/* ============================================================
   Voetbaloefeningen — stijl
   Palet: veld-donkergroen, koel papier, grasgroen, warme accent-
   oranje, en een stempel dat de categorie van een oefening toont.
   ============================================================ */

:root {
    --ink:    #17251C;
    --paper:  #F4F6F1;
    --card:   #FFFFFF;
    --grass:  #2E7D46;
    --grass-dark: #266638;
    --grass-soft: #EEF4EC;
    --grass-rgb: 46,125,70;
    --on-grass: #FFFFFF;
    --accent: #E4572E;
    --accent-dark: #B94322;
    --accent-soft: #FCEEEA;
    --accent-rgb: 228,87,46;
    --on-accent: #FFFFFF;
    --danger: #C63A3A;
    --muted:  #7C857C;
    --line:   #E1E5DD;

    --shadow: 0 1px 2px rgba(23,37,28,.05), 0 8px 24px rgba(23,37,28,.08);
    --radius: 14px;
    --wrap:   1040px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    background-image:
        radial-gradient(60rem 60rem at 82% -10%, rgba(var(--grass-rgb),.12), transparent 60%),
        radial-gradient(50rem 50rem at -5% 8%, rgba(var(--accent-rgb),.08), transparent 55%);
    background-attachment: fixed;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

/* ---- Kop van de site ---------------------------------------- */
.site-head {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(244, 246, 241, .82);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--line);
}
.site-head-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: .8rem 1.4rem;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    text-decoration: none;
}

.wordmark-logo-image {
    display: block;
    width: min(100%, 240px);
    max-width: 240px;
    height: auto;
    flex: 0 1 auto;
}

.wordmark-teamline {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.wordmark-mark {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: 9px;
    font-size: 1.15rem;
    transform: rotate(-6deg);
    flex: 0 0 auto;
}

.wordmark-copy { display: grid; line-height: 1.05; min-width: 0; }
.wordmark-copy small {
    margin-top: 0;
    color: var(--muted);
    font-family: "Instrument Sans", sans-serif;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .02em;
    white-space: nowrap;
}
.wordmark-club-logo { overflow: hidden; padding: .14rem; background: #fff; border: 1px solid var(--line); transform: none; box-shadow: 0 3px 10px rgba(23,37,28,.09); }
.wordmark-club-logo img { width: 100%; height: 100%; object-fit: contain; }

/* ---- Hoofdcontainer ------------------------------------------ */
.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 1rem 1.4rem 4rem;
}

/* ---- Het stempel (toont de categorie, of "Oefening") -------- */
.stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .34em .8em;
    border: 2px solid var(--accent);
    border-radius: 4px;
    color: var(--accent);
    font-family: "Instrument Sans", sans-serif;
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .3em;
    line-height: 1;
    transform: rotate(-4deg);
    position: relative;
    background: rgba(var(--accent-rgb),.05);
}
.stamp span { padding-left: .18em; }
.stamp::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid var(--accent);
    border-radius: 2px;
    opacity: .45;
}
.stamp-sm { font-size: .56rem; padding: .3em .6em; letter-spacing: .22em; }
.stamp-lg { font-size: .92rem; padding: .42em .95em; letter-spacing: .3em; }

/* ---- Knoppen -------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .62rem 1.15rem;
    border-radius: 999px;
    border: 2px solid transparent;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .12s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-solid  { background: var(--grass); color: var(--on-grass); border-color: var(--grass); }
.btn-solid:hover { background: var(--grass-dark); }
.btn-ghost  { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); padding: .4rem .8rem; font-size: .9rem; }
.btn-danger:hover { background: var(--danger); color: #fff; }

/* ---- Hero + insturen ----------------------------------------- */
.hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 2.6rem;
    align-items: center;
    padding: 1.5rem 0 2.8rem;
    animation: rise .5s ease both;
}
.hero-copy .stamp { margin-bottom: 1.1rem; }
.hero-title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 900;
    font-size: clamp(2.1rem, 4.6vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    margin: 0 0 1rem;
}
.hero-title em {
    font-style: italic;
    font-weight: 600;
    color: var(--accent);
}
.hero-lead {
    font-size: 1.1rem;
    color: #3f4a41;
    max-width: 34ch;
    margin: 0;
}
.hero-lead a { color: var(--grass); font-weight: 600; }

.paste {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem 1.4rem 1.5rem;
}
.paste-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    margin: 1rem 0 .35rem;
    color: var(--ink);
}
.paste-label:first-child { margin-top: 0; }
.paste-label .opt { color: var(--muted); font-weight: 500; }
.paste-row { display: flex; gap: .6rem; }
.paste-input {
    width: 100%;
    padding: .7rem .85rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font: inherit;
    color: var(--ink);
    background: #fcfdfb;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.paste-input::placeholder { color: #a9b0a7; }
.paste-input:focus {
    outline: none;
    border-color: var(--grass);
    box-shadow: 0 0 0 3px rgba(var(--grass-rgb),.2);
}
textarea.paste-input { resize: vertical; min-height: 2.6rem; }
.paste-row .paste-input { flex: 1; }
.paste-row .btn { flex-shrink: 0; }

/* Kaart met uitleg als iemand (nog) niet mag insturen. */
.notice-card { color: #3f4a41; }
.notice-card-title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 900;
    font-size: 1.25rem;
    margin: 0 0 .5rem;
    color: var(--ink);
}
.notice-card a { color: var(--grass); font-weight: 600; }

/* Verborgen spamval. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.notice {
    margin: 1rem 0 0;
    padding: .7rem .9rem;
    border-radius: 10px;
    font-size: .95rem;
}
.notice-ok    { background: rgba(var(--grass-rgb),.14);  color: var(--grass-dark); }
.notice-error { background: rgba(198,58,58,.10);  color: #8f2626; }

/* ---- Overzicht / feed ---------------------------------------- */
.feed { margin-top: 1rem; }
.feed-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-top: 2px solid var(--ink);
    padding-top: .8rem;
    margin-bottom: 1.4rem;
}
.feed-head h2, .feed-head h1 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 900;
    font-size: 1.5rem;
    margin: 0;
}
.feed-count {
    font-size: .8rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}

.cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.4rem;
}
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(23,37,28,.14); }
.card-link { text-decoration: none; color: inherit; display: block; }
.card-media {
    position: relative;
    aspect-ratio: 3 / 4;
    background: #e7ece3;
    overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media-fallback {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    background: repeating-linear-gradient(135deg, #e7ece3, #e7ece3 12px, #dfe6da 12px, #dfe6da 24px);
}
.card-stamp { position: absolute; top: .7rem; left: .7rem; }
.card-stamp .stamp { background: var(--card); }
.card-body { padding: .9rem 1rem 1.1rem; }
.card-title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.08rem;
    line-height: 1.2;
    margin: 0 0 .3rem;
}
.card-meta { margin: 0; font-size: .85rem; color: var(--muted); }

/* ---- Lege staat ---------------------------------------------- */
.empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
}
.empty .stamp { margin-bottom: 1rem; }
.empty a { color: var(--grass); font-weight: 600; }

/* ---- Oefeningpagina ------------------------------------------ */
.recipe { max-width: 680px; margin: 1rem auto 0; }
.recipe-head { text-align: center; margin-bottom: 1.6rem; }
.recipe-head .stamp { margin-bottom: 1rem; }
.recipe-title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 0 0 .7rem;
}
.recipe-cat { margin: 0 0 .6rem; }
.recipe-meta { color: var(--muted); font-size: .95rem; margin: 0; }
.recipe-meta a { color: var(--grass); text-decoration: none; font-weight: 600; }
.recipe-meta a:hover { text-decoration: underline; }
.recipe-meta .dot { margin: 0 .3rem; }
.recipe-note {
    font-size: 1.12rem;
    line-height: 1.55;
    text-align: center;
    color: #38423a;
    max-width: 52ch;
    margin: 0 auto 2rem;
}
.recipe-video { display: flex; justify-content: center; min-height: 500px; }
.recipe-video .tiktok-embed { margin: 0 auto !important; }
.recipe-actions {
    display: flex;
    gap: .7rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* ---- Beheer --------------------------------------------------- */
.admin-login { max-width: 440px; margin: 2rem auto; text-align: center; }
.admin-login .stamp { margin-bottom: 1rem; }
.admin-login h1 { font-family: "Fraunces", Georgia, serif; margin: 0 0 .4rem; }
.admin-login .paste { text-align: left; margin-top: 1.4rem; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.admin-table th, .admin-table td {
    text-align: left;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
    vertical-align: middle;
}
.admin-table th {
    background: #eaefe5;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table a { color: var(--ink); font-weight: 600; }
.admin-table form { margin: 0; }

.perm-state {
    display: inline-block;
    margin-right: .5rem;
    font-weight: 700;
    font-size: .85rem;
}
.perm-state.perm-on  { color: var(--grass); }
.perm-state.perm-off { color: var(--muted); }

/* ---- Voet ----------------------------------------------------- */
.site-foot {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 2rem 1.4rem 3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .9rem;
}
.site-foot p { margin: 0; }

/* ---- Filterbalk (categorieen) -------------------------------- */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.6rem;
}
.chip {
    display: inline-flex;
    align-items: center;
    padding: .4rem .9rem;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.chip:hover { transform: translateY(-1px); border-color: var(--grass); }
.chip.is-active { background: var(--grass); border-color: var(--grass); color: #fff; }

/* ---- Categorielabel ------------------------------------------ */
.cat-badge {
    display: inline-block;
    padding: .24em .65em;
    border-radius: 999px;
    background: var(--grass);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.5;
    text-decoration: none;
}
a.cat-badge:hover { background: var(--grass-dark); }

/* ---- Navigatie in de bovenbalk ------------------------------- */
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: flex-end; }
.nav-link {
    position: relative;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    color: #4f584f;
    white-space: nowrap;
    padding: .3rem 0;
    transition: color .15s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

.btn-sm { padding: .48rem .95rem; font-size: .92rem; }

@media (max-width: 620px) {
    .site-head-in { flex-wrap: wrap; gap: .6rem; }
    .site-nav { width: 100%; justify-content: flex-start; gap: .3rem 1.1rem; }
}

/* ---- Categorie-overzicht (tegels) ---------------------------- */
.cat-overview { margin-top: 1rem; }
.cat-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.4rem;
}
.cat-tile a {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cat-tile a:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(23,37,28,.14); }
.cat-tile-media {
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    background: linear-gradient(155deg, #eef5ea 0%, #e3efdd 100%);
}
.cat-tile-icon-wrap {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(var(--grass-rgb),.12);
    display: grid;
    place-items: center;
}
.cat-icon { width: 40px; height: 40px; color: var(--grass); }
.cat-tile-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; }
.cat-tile-name {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 1.1;
}
.cat-tile-count { font-size: .85rem; color: var(--muted); }

.back-link { margin: 0 0 1.5rem; }
.back-link a { color: var(--grass); text-decoration: none; font-weight: 600; }
.back-link a:hover { text-decoration: underline; }

/* ---- Account / inloggen -------------------------------------- */
.auth { max-width: 460px; margin: 1.5rem auto; text-align: center; }
.auth .stamp { margin-bottom: 1rem; }
.auth h1 { font-family: "Fraunces", Georgia, serif; margin: 0 0 .4rem; }
.auth > p { color: var(--muted); margin: 0 0 1.4rem; }
.auth .paste { text-align: left; }
.auth-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-top: 1.2rem;
    font-size: .92rem;
    color: var(--muted);
}
.auth-actions a { color: var(--grass); font-weight: 600; text-decoration: none; }
.auth-actions a:hover { text-decoration: underline; }

/* ---- Bewaarknop ---------------------------------------------- */
.inline-form { display: inline; margin: 0; }

/* ---- Persoonlijk boek ---------------------------------------- */
.book { margin-top: 1rem; }
.book-sub {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 900;
    font-size: 1.25rem;
    margin: 1.8rem 0 1rem;
}

/* ---- Bewegingen ---------------------------------------------- */
@keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Klein scherm -------------------------------------------- */
@media (max-width: 760px) {
    .hero { grid-template-columns: 1fr; gap: 1.6rem; padding-bottom: 2rem; }
    .hero-lead { max-width: none; }
    body { font-size: 16px; }
}

@media (max-width: 420px) {
    .paste-row { flex-direction: column; }
    .paste-row .btn { width: 100%; }
    .site-head { padding: 1rem; }
    .wordmark-text { display: none; }
    .wordmark-logo-image { max-width: 170px; }
    .wordmark-teamline { display: none; }
}

/* ---- Toegankelijkheid ---------------------------------------- */
:focus-visible { outline: 3px solid var(--grass); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .btn:hover, .card:hover { transform: none; }
}

/* ---- Trainingssamensteller ---------------------------------- */
.training-builder-page {
    max-width: 980px;
    margin: 1rem auto 0;
    padding-top: .35rem;
}

.training-builder-page [hidden] {
    display: none !important;
}

.training-builder-intro {
    max-width: 720px;
    margin-bottom: 2rem;
}

.training-builder-intro .stamp {
    margin-bottom: 1rem;
}

.training-builder-intro h1,
.training-detail-head h1 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.3rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 0 0 .75rem;
}

.training-builder-intro p {
    max-width: 60ch;
    margin: 0;
    color: #3f4a41;
    font-size: 1.08rem;
}

.training-builder-empty {
    padding: 2rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}

.training-builder-empty .stamp {
    margin-bottom: 1rem;
}

.builder-panel {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--shadow);
    padding: clamp(1.2rem, 3vw, 2rem);
    animation: rise .3s ease both;
}

#training-amount-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 350px);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.builder-panel h2 {
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(1.4rem, 3vw, 1.75rem);
    line-height: 1.15;
    margin: .25rem 0 .45rem;
}

.builder-panel p {
    margin: 0;
    color: var(--muted);
}

.builder-step {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--accent);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.builder-step::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.builder-amount-control {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    padding: 1.1rem;
    background: linear-gradient(145deg, #f8faf6, #eef4ea);
    border: 1px solid #dfe6da;
    border-radius: 16px;
}

.builder-amount-control label {
    font-size: .82rem;
    font-weight: 800;
    color: #405043;
}

.builder-amount-control input {
    width: 100%;
    min-height: 52px;
    font-size: 1.15rem;
    font-weight: 800;
    text-align: center;
    background: #fff;
}

.builder-amount-control .btn {
    width: 100%;
    min-height: 48px;
    margin-top: .15rem;
}

.builder-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.2rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--line);
}

#training-progress {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-top: .45rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: #edf4e9;
    color: #3f6047;
    font-size: .82rem;
    font-weight: 700;
}

.training-title-label {
    display: block;
    margin-top: 1.45rem;
}

.training-title-input {
    width: min(100%, 540px);
    margin-top: .4rem;
}

.text-button {
    appearance: none;
    border: 0;
    background: none;
    padding: .2rem 0;
    color: var(--grass);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.text-button:hover {
    text-decoration: underline;
}

.text-button-danger {
    color: var(--danger);
}

.training-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.15rem;
    margin-top: 1.5rem;
}

.training-slot-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.training-slot {
    position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 17px;
    cursor: pointer;
    font: inherit;
    isolation: isolate;
    box-shadow: 0 2px 10px rgba(23,37,28,.05);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.training-slot:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(23,37,28,.14);
}

.training-slot:active {
    transform: translateY(-1px);
}

.training-slot-empty {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: 1rem;
    border: 2px dashed #aeb9aa;
    background:
        radial-gradient(circle at 50% 35%, rgba(var(--grass-rgb),.08), transparent 38%),
        #f8faf6;
    color: #526052;
    font-weight: 700;
    text-align: center;
}

.training-slot-empty:hover {
    border-color: var(--grass);
    background-color: #f3f8f0;
    color: var(--grass);
}

.training-slot-empty > span:last-child {
    max-width: 12ch;
    line-height: 1.25;
    font-size: .9rem;
}

.training-slot-plus {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--grass-rgb),.12);
    box-shadow: inset 0 0 0 1px rgba(var(--grass-rgb),.12);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    transition: transform .15s ease, background-color .15s ease;
}

.training-slot-empty:hover .training-slot-plus {
    transform: scale(1.06);
    background: rgba(var(--grass-rgb),.18);
}

.training-slot-number {
    position: absolute;
    top: .65rem;
    left: .65rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.16);
    font-size: .8rem;
    font-weight: 800;
}

.training-slot-filled {
    display: block;
    padding: 0;
    border: 0;
    background: #dfe6da;
    text-align: left;
}

.training-slot-filled > img,
.training-slot-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.training-slot-filled:hover > img,
.training-slot-filled:hover .training-slot-fallback {
    transform: scale(1.035);
}

.training-slot-fallback {
    display: grid;
    place-items: center;
    font-size: 3rem;
    background: linear-gradient(155deg, #eef5ea 0%, #dbe9d6 100%);
}

.training-slot-overlay {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 58%;
    justify-content: flex-end;
    padding: 3.2rem .85rem .85rem;
    color: #fff;
    background: linear-gradient(transparent, rgba(11,22,14,.94));
}

.training-slot-overlay strong {
    line-height: 1.15;
    font-size: .96rem;
}

.training-slot-overlay small {
    opacity: .8;
    margin-top: .18rem;
    font-size: .75rem;
}

.training-slot-overlay em {
    display: inline-flex;
    align-self: flex-start;
    margin-top: .4rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-style: normal;
    font-size: .68rem;
    font-weight: 700;
}

.training-slot-tools {
    display: flex;
    justify-content: space-between;
    gap: .65rem;
    min-height: 31px;
    padding: .4rem .15rem 0;
}

.training-slot-tools .text-button {
    font-size: .76rem;
}

.training-actions {
    margin-top: 1.8rem;
    padding: 1.15rem 1.25rem;
    border-radius: 16px;
    background: linear-gradient(145deg, #eef5ea, #e8f1e4);
    border: 1px solid #d4e2cf;
    box-shadow: 0 5px 18px rgba(var(--grass-rgb),.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

.training-actions strong {
    display: block;
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.08rem;
}

.training-actions p {
    margin: .15rem 0 0;
    font-size: .9rem;
}

.training-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
    flex-shrink: 0;
}

/* Oefeningkiezer */
html.has-open-dialog {
    overflow: hidden;
}

.exercise-picker {
    width: min(900px, calc(100% - 2rem));
    max-height: min(760px, calc(100dvh - 2rem));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 24px 80px rgba(10,25,15,.28);
}

.exercise-picker[open] {
    animation: picker-in .18s ease both;
}

.exercise-picker::backdrop {
    background: rgba(16,28,19,.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

@keyframes picker-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.picker-head {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 100px;
    align-items: center;
    min-height: 66px;
    padding: .85rem 1.2rem;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
}

.picker-head h2 {
    overflow: hidden;
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.45rem;
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

.picker-head .text-button {
    justify-self: start;
}

.picker-close {
    justify-self: end;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #edf1ea;
    color: var(--ink);
    font: inherit;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.picker-close:hover {
    background: #e1e8dc;
    transform: rotate(4deg);
}

#picker-categories,
#picker-exercises {
    max-height: calc(min(760px, 100dvh - 2rem) - 66px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.picker-help {
    margin: 0;
    padding: 1.15rem 1.2rem 0;
    color: var(--muted);
}

.picker-category-grid,
.picker-exercise-grid {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
}

.picker-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.picker-category {
    position: relative;
    min-height: 132px;
    padding: 1.05rem;
    overflow: hidden;
    border: 1.5px solid var(--line);
    border-radius: 15px;
    background: linear-gradient(145deg, #fafcf8, #edf5ea);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.picker-category::after {
    content: "+";
    position: absolute;
    right: .85rem;
    bottom: .7rem;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: rgba(var(--grass-rgb),.11);
    color: var(--grass);
    font-size: 1.25rem;
    line-height: 1;
}

.picker-category strong {
    display: block;
    max-width: calc(100% - 30px);
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.22rem;
    line-height: 1.15;
}

.picker-category span {
    display: block;
    color: var(--muted);
    font-size: .85rem;
    margin-top: .35rem;
}

.picker-category:hover:not(:disabled) {
    border-color: var(--grass);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(23,37,28,.09);
}

.picker-category:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.picker-category:disabled::after {
    content: "–";
}

.picker-exercise-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.picker-exercise {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: .8rem;
    align-items: center;
    min-height: 98px;
    padding: .65rem;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.picker-exercise:hover:not(:disabled) {
    border-color: var(--grass);
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(23,37,28,.09);
}

.picker-exercise:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.picker-exercise-media {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border-radius: 11px;
    overflow: hidden;
    background: #e4eadf;
}

.picker-exercise-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.picker-exercise-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.7rem;
}

.picker-exercise-copy {
    min-width: 0;
}

.picker-exercise-copy strong {
    display: block;
    overflow: hidden;
    line-height: 1.2;
    font-size: .92rem;
    text-overflow: ellipsis;
}

.picker-exercise-copy small {
    display: block;
    color: var(--muted);
    margin-top: .25rem;
}

.picker-exercise-copy em {
    display: inline-flex;
    margin-top: .35rem;
    padding: .14rem .42rem;
    border-radius: 999px;
    background: #f7e7e3;
    color: var(--accent);
    font-style: normal;
    font-size: .68rem;
    font-weight: 800;
}

@media (max-width: 760px) {
    #training-amount-panel {
        grid-template-columns: 1fr;
        gap: 1.3rem;
        align-items: stretch;
    }

    .training-slots {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .9rem;
    }

    .training-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .training-actions-buttons {
        width: 100%;
    }
}

@media (max-width: 580px) {
    .training-builder-page {
        margin-top: .4rem;
    }

    .builder-panel {
        padding: 1rem;
        border-radius: 15px;
    }

    .builder-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: .6rem;
    }

    .training-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem;
    }

    .training-slot {
        border-radius: 14px;
    }

    .training-slot-tools {
        flex-direction: column;
        gap: .05rem;
        align-items: flex-start;
        padding-top: .3rem;
    }

    .training-actions-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .training-actions-buttons .btn {
        width: 100%;
    }

    .exercise-picker {
        width: calc(100% - 1rem);
        max-height: calc(100dvh - 1rem);
        border-radius: 16px;
    }

    .picker-head {
        grid-template-columns: 70px minmax(0, 1fr) 70px;
        min-height: 60px;
        padding: .7rem .75rem;
    }

    .picker-head h2 {
        font-size: 1.12rem;
    }

    .picker-head .text-button {
        font-size: .78rem;
    }

    .picker-close {
        width: 36px;
        height: 36px;
    }

    #picker-categories,
    #picker-exercises {
        max-height: calc(100dvh - 1rem - 60px);
    }

    .picker-help {
        padding: .95rem .9rem 0;
        font-size: .9rem;
    }

    .picker-category-grid,
    .picker-exercise-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
        padding: .9rem;
    }

    .picker-category {
        min-height: 105px;
    }

    .picker-exercise {
        grid-template-columns: 66px minmax(0, 1fr);
        min-height: 82px;
    }

    .picker-exercise-media {
        width: 66px;
        height: 66px;
    }
}

@media (max-width: 380px) {
    .training-slots {
        grid-template-columns: 1fr;
    }

    .training-slot {
        aspect-ratio: 4 / 3;
    }
}


/* ---- Opgeslagen en gedeelde training ------------------------ */
.training-detail { max-width: 880px; margin: 1rem auto 0; }
.training-detail-head { text-align: center; margin-bottom: 1.8rem; }
.training-detail-head .stamp { margin-bottom: 1rem; }
.training-detail-head > p { color: var(--muted); margin: 0; }
.training-eyebrow { color: var(--accent) !important; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 800; margin-bottom: .45rem !important; }
.training-notice { max-width: 600px; margin: 0 auto 1.4rem; text-align: center; }
.training-exercise-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.training-exercise-row {
    display: grid;
    grid-template-columns: 42px 92px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--card);
    box-shadow: 0 2px 12px rgba(23,37,28,.05);
}
.training-exercise-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-size: .85rem; }
.training-exercise-media { display: grid; place-items: center; width: 92px; height: 72px; overflow: hidden; border-radius: 10px; background: #e3eadd; text-decoration: none; font-size: 1.8rem; }
.training-exercise-media img { width: 100%; height: 100%; object-fit: cover; }
.training-exercise-info { min-width: 0; }
.training-exercise-info h3 { font-family: "Fraunces", Georgia, serif; font-size: 1.08rem; line-height: 1.2; margin: 0 0 .35rem; }
.training-exercise-info h3 a { text-decoration: none; }
.training-exercise-info h3 a:hover { text-decoration: underline; }
.training-exercise-info p { margin: 0; }
.training-exercise-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.training-share-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.5rem;
    padding: 1.2rem 1.35rem;
    border-radius: 16px;
    background: #eaf3e6;
    border: 1px solid #d4e3cf;
}
.training-share-box h2 { font-family: "Fraunces", Georgia, serif; margin: 0 0 .2rem; font-size: 1.25rem; }
.training-share-box p { margin: 0; color: #4c594d; font-size: .92rem; }
.training-public-link { display: inline-block; margin-top: .45rem; color: var(--grass); font-weight: 700; font-size: .86rem; text-decoration: none; }
.training-public-link:hover { text-decoration: underline; }
[data-copy-text].is-copied, [data-copy-base64].is-copied { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Trainingen in het account ------------------------------ */
.account-head { align-items: center; }
.account-summary { margin: .2rem 0 0; color: var(--muted); font-size: .88rem; }
.account-section { margin-top: 2.2rem; }
.account-section-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1rem; }
.account-section-head h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; margin: 0; }
.account-section-head p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }
.account-section-head > a { color: var(--grass); font-size: .9rem; font-weight: 700; text-decoration: none; }
.account-empty-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px dashed #b7c1b3; border-radius: 14px; background: rgba(255,255,255,.55); }
.account-empty-card p { margin: 0; color: var(--muted); }
.training-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.training-card { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--card); box-shadow: var(--shadow); transition: transform .15s ease; }
.training-card:hover { transform: translateY(-2px); }
.training-card-link { display: block; color: inherit; text-decoration: none; }
.training-card-preview { position: relative; height: 135px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(150deg, #eaf3e6, #dcebd7); }
.training-card-preview img { width: 100%; height: 100%; object-fit: cover; }
.training-card-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(16,31,19,.45)); }
.training-card-icon { font-size: 2.5rem; }
.training-card-count { position: absolute; z-index: 2; right: .65rem; bottom: .6rem; padding: .25rem .55rem; border-radius: 999px; background: rgba(23,37,28,.9); color: #fff; font-size: .72rem; font-weight: 700; }
.training-card-body { padding: .85rem 1rem 1rem; }
.training-card-body h3 { font-family: "Fraunces", Georgia, serif; font-size: 1.08rem; line-height: 1.2; margin: 0 0 .25rem; }
.training-card-body p { margin: 0; color: var(--muted); font-size: .8rem; }

@media (max-width: 760px) {
    #training-amount-panel { grid-template-columns: 1fr; gap: 1.3rem; }
    .training-actions,
    .training-share-box { align-items: flex-start; flex-direction: column; }
    .training-exercise-row { grid-template-columns: 38px 72px minmax(0, 1fr); gap: .7rem; }
    .training-exercise-media { width: 72px; height: 62px; }
    .training-exercise-actions { grid-column: 2 / -1; justify-content: flex-start; }
    .account-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
    .training-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
    .builder-panel { padding: 1rem; }
    .builder-topline { align-items: flex-start; flex-direction: column; }
    .training-actions-buttons { width: 100%; }
    .training-actions-buttons .btn { width: 100%; }
    .picker-head { grid-template-columns: 70px 1fr 70px; padding: .85rem; }
    .picker-head h2 { font-size: 1.15rem; }
    .picker-category-grid { grid-template-columns: 1fr; }
    .picker-exercise-grid { grid-template-columns: 1fr; }
    .training-exercise-row { grid-template-columns: 34px 58px minmax(0, 1fr); padding: .65rem; }
    .training-exercise-media { width: 58px; height: 54px; }
    .training-exercise-info h3 { font-size: .95rem; }
    .training-exercise-actions .btn { padding: .4rem .65rem; font-size: .78rem; }
    .account-empty-card { align-items: flex-start; flex-direction: column; }
}

/* ---- Automatische trainingsgenerator ------------------------- */
.generator-explanation {
    display: grid;
    gap: .2rem;
    max-width: 570px;
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-left: 4px solid var(--grass);
    border-radius: 0 12px 12px 0;
    background: #eef5ea;
}

.generator-explanation strong {
    font-size: .9rem;
}

.generator-explanation span {
    color: #4f5d50;
    font-size: .86rem;
    line-height: 1.45;
}

.builder-start-buttons {
    display: grid;
    gap: .55rem;
}

.builder-start-buttons .btn {
    margin-top: 0;
}

.generator-message {
    margin: .15rem 0 0 !important;
    padding: .65rem .75rem;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.4;
}

.generator-message.is-success {
    color: #2e6040;
    background: #e6f2e3;
    border: 1px solid #cfe4ca;
}

.generator-message.is-error {
    color: #8f2f2f;
    background: #fae9e7;
    border: 1px solid #efd0cc;
}

.generator-message-inline {
    margin-top: 1rem !important;
}

.builder-top-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem 1rem;
}

/* ---- Training verwijderen ------------------------------------ */
.training-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 48px;
    padding: .55rem 1rem .7rem;
    border-top: 1px solid var(--line);
    background: #fbfcfa;
}

.training-card-footer .text-button,
.training-delete-form .text-button {
    font-size: .8rem;
}

.training-delete-form {
    margin: 0;
}

.training-delete-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    margin-top: 1rem;
    padding: 1.05rem 1.25rem;
    border: 1px solid #eccbc7;
    border-radius: 16px;
    background: #fff5f3;
}

.training-delete-box h2 {
    margin: 0 0 .15rem;
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.1rem;
}

.training-delete-box p {
    margin: 0;
    color: #725451;
    font-size: .86rem;
}

.training-delete-box form {
    flex-shrink: 0;
    margin: 0;
}

@media (max-width: 760px) {
    .builder-top-actions {
        justify-content: flex-start;
    }

    .training-delete-box {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .generator-explanation {
        padding: .8rem .85rem;
    }

    .builder-top-actions {
        display: grid;
        gap: .35rem;
    }

    .training-delete-box .btn {
        width: 100%;
    }

    .training-delete-box form {
        width: 100%;
    }
}

/* ---- Mooie deel- en oefenlinks ------------------------------- */
.training-share-content {
    flex: 1 1 430px;
    min-width: 0;
}

.share-link-preview {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    max-width: 560px;
    margin-top: .85rem;
    padding: .72rem .8rem;
    border: 1px solid rgba(46, 125, 70, .22);
    border-radius: 13px;
    background: rgba(255, 255, 255, .78);
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(23, 37, 28, .05);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.share-link-preview:hover {
    border-color: rgba(46, 125, 70, .48);
    box-shadow: 0 7px 18px rgba(23, 37, 28, .09);
    transform: translateY(-1px);
}

.share-link-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #dfeeda;
    color: var(--grass);
}

.share-link-icon svg,
.training-link-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.share-link-copy {
    display: block;
    min-width: 0;
}

.share-link-copy strong {
    display: block;
    margin-bottom: .12rem;
    font-size: .84rem;
    line-height: 1.25;
}

.share-link-copy small {
    display: block;
    overflow: hidden;
    color: #637064;
    font-size: .76rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-link-arrow {
    color: var(--grass);
    font-size: 1.05rem;
    font-weight: 800;
}

.training-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 36px;
    padding: .42rem .68rem;
    border: 1px solid #c9d5c6;
    border-radius: 999px;
    background: #f7faf5;
    color: var(--grass);
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.training-link-button:hover {
    border-color: var(--grass);
    background: #eef6eb;
    transform: translateY(-1px);
}

.training-link-button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.training-link-button-compact {
    min-height: 29px;
    padding: .32rem .54rem;
    font-size: .72rem;
}

.training-link-button.is-copied,
[data-share-url].is-copied {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

@media (max-width: 760px) {
    .training-share-content {
        width: 100%;
        flex-basis: auto;
    }

    .share-link-preview {
        max-width: none;
    }
}

@media (max-width: 520px) {
    .share-link-preview {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: .65rem;
        padding: .65rem;
    }

    .share-link-icon {
        width: 38px;
        height: 38px;
    }

    .training-exercise-actions .training-link-button {
        min-height: 34px;
        padding: .4rem .62rem;
        font-size: .75rem;
    }

    .training-slot-tools {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ============================================================
   Mijn Team
   ============================================================ */
.team-page,
.team-event-page,
.team-stats-page { padding-top: 1rem; }

.team-hero,
.team-stats-hero,
.team-event-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.8rem 0 2rem;
}
.team-hero h1,
.team-stats-hero h1,
.team-event-hero h1 {
    margin: .18rem 0 .55rem;
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -.035em;
}
.team-hero p,
.team-stats-hero p,
.team-event-hero p { max-width: 680px; margin: 0; color: #526056; }
.team-eyebrow,
.team-section-label,
.team-event-kicker {
    display: inline-block;
    color: var(--grass);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.team-event-kicker.is-match { color: var(--accent); }
.team-hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.team-flash { margin: 0 0 1.2rem; }

.team-panel {
    background: rgba(255,255,255,.94);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(23,37,28,.07);
    padding: 1.4rem;
}
.team-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}
.team-panel-head h2,
.team-side-panel h2,
.team-onboarding-copy h2 {
    margin: .12rem 0 .25rem;
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.55rem;
    line-height: 1.15;
}
.team-panel-head p,
.team-side-panel > p,
.team-onboarding-copy > p { margin: 0; color: #667068; font-size: .92rem; }
.team-wide-button { width: 100%; }
.team-count-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #edf5eb;
    color: var(--grass);
    padding: .35rem .65rem;
    font-size: .78rem;
    font-weight: 800;
}

.team-onboarding-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 2rem;
    align-items: start;
    padding: 1rem 0 2rem;
}
.team-onboarding-copy { padding: 2rem 1rem 1rem 0; }
.team-step-number {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: .9rem;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-weight: 800;
}
.team-benefits { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.team-benefits li { position: relative; padding: .35rem 0 .35rem 1.6rem; }
.team-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--grass); font-weight: 900; }
.team-create-form { padding: 1.7rem; }

.team-day-fieldset { min-width: 0; margin: 1.35rem 0; padding: 0; border: 0; }
.team-day-fieldset legend { padding: 0; font-weight: 800; }
.team-day-fieldset > p { margin: .1rem 0 .7rem; color: var(--muted); font-size: .82rem; }
.team-day-fieldset.compact { margin: 1rem 0; }
.team-day-picker { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .42rem; }
.team-day-option { position: relative; display: block; min-width: 0; cursor: pointer; }
.team-day-option input { position: absolute; opacity: 0; pointer-events: none; }
.team-day-option span {
    display: grid;
    place-items: center;
    min-height: 46px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fafbf9;
    font-weight: 800;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.team-day-option small { display: none; }
.team-day-option:hover span { border-color: #aab7a8; transform: translateY(-1px); }
.team-day-option input:checked + span { border-color: var(--grass); background: var(--grass); color: var(--on-grass); box-shadow: 0 5px 15px rgba(var(--grass-rgb),.18); }
.team-day-option input:focus-visible + span { outline: 3px solid rgba(var(--grass-rgb),.22); outline-offset: 2px; }

.team-switcher {
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    padding: .3rem 0 1rem;
    scrollbar-width: thin;
}
.team-switcher a {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    padding: .42rem .8rem;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 750;
}
.team-switcher a.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }

.team-summary-grid {
    display: grid;
    grid-template-columns: 1.55fr repeat(3, 1fr);
    gap: .8rem;
    margin-bottom: 1rem;
}
.team-summary-card {
    min-height: 142px;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 8px 24px rgba(23,37,28,.05);
}
.team-summary-card > span { display: block; color: var(--muted); font-size: .76rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.team-summary-card strong { display: block; margin: .35rem 0 .1rem; font-family: "Fraunces", Georgia, serif; font-size: 2rem; line-height: 1; }
.team-summary-card p { margin: 0; color: #667068; font-size: .8rem; }
.team-summary-card a { display: inline-block; margin-top: .65rem; color: var(--grass); font-size: .8rem; font-weight: 800; text-decoration: none; }
.team-summary-primary { border-color: #bfd2bb; background: linear-gradient(135deg, #eaf4e7, #fff); }
.team-summary-primary strong { font-size: 1.5rem; }

.team-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.team-main-column,
.team-side-column { display: grid; gap: 1rem; min-width: 0; }
.team-side-panel { padding: 1.25rem; }
.team-schedule-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin-bottom: 1rem;
}
.team-schedule-strip > div { padding: .72rem .85rem; border-radius: 12px; background: #f4f7f2; }
.team-schedule-strip span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; font-weight: 800; letter-spacing: .06em; }
.team-schedule-strip strong { display: block; margin-top: .12rem; font-size: .88rem; }

.team-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1.5rem; }
.team-subpanel { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfa; }
.team-subpanel h3 { margin: 0; font-size: 1rem; }
.team-subpanel > p { margin: .1rem 0 .8rem; color: var(--muted); font-size: .78rem; }
.team-subpanel label,
.team-inline-add label,
.team-trainer-form label,
.team-event-details label { display: block; color: #4c584f; font-size: .77rem; font-weight: 750; }
.team-subpanel label > span { color: var(--muted); font-weight: 500; }
.team-subpanel .paste-input,
.team-inline-add .paste-input,
.team-trainer-form .paste-input,
.team-event-details .paste-input { margin-top: .22rem; font-size: .88rem; }
.team-subpanel > label { margin-bottom: .58rem; }
.team-two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: .58rem; }

.team-list-heading { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 .55rem; }
.team-list-heading h3 { margin: 0; font-size: .98rem; }
.team-list-heading span,
.team-past-events summary span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 .35rem; border-radius: 999px; background: #edf0eb; color: #5f6a61; font-size: .72rem; font-weight: 800; }
.team-event-list { display: grid; gap: .45rem; }
.team-event-row {
    display: grid;
    grid-template-columns: 45px auto minmax(0, 1fr) auto 18px;
    gap: .65rem;
    align-items: center;
    min-width: 0;
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.team-event-row:hover { border-color: #aebbaa; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(23,37,28,.06); }
.team-event-date { display: grid; place-items: center; width: 45px; height: 48px; border-radius: 10px; background: #f0f3ee; line-height: 1; }
.team-event-date strong { font-size: 1.05rem; }
.team-event-date small { margin-top: -.1rem; color: var(--muted); font-size: .57rem; font-weight: 800; }
.team-event-type { display: inline-flex; align-items: center; width: max-content; border-radius: 999px; background: #e8f3e6; color: var(--grass); padding: .23rem .52rem; font-size: .65rem; font-weight: 800; }
.team-event-type.is-match { background: #fff0eb; color: var(--accent); }
.team-event-copy { min-width: 0; }
.team-event-copy strong,
.team-event-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-event-copy strong { font-size: .88rem; }
.team-event-copy small { color: var(--muted); font-size: .72rem; }
.team-event-progress { color: #5f6a61; font-size: .7rem; white-space: nowrap; }
.team-event-arrow { color: var(--grass); font-weight: 900; }
.team-past-events { margin-top: .8rem; }
.team-past-events summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: #536057; font-size: .84rem; font-weight: 750; }
.team-past-events[open] summary { margin-bottom: .55rem; }
.team-empty-state { padding: 1rem; border: 1px dashed #cad2c7; border-radius: 12px; background: #fafbf9; color: var(--muted); text-align: center; }
.team-empty-state p { margin: 0; }

.team-inline-add {
    display: grid;
    grid-template-columns: 1.5fr .65fr 1fr auto;
    gap: .55rem;
    align-items: end;
    padding: .8rem;
    margin-bottom: 1rem;
    border-radius: 13px;
    background: #f4f7f2;
}
.team-player-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.team-player-card,
.team-trainer-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}
.team-player-card > div,
.team-trainer-row > div { min-width: 0; flex: 1; }
.team-player-card strong,
.team-player-card small,
.team-trainer-row strong,
.team-trainer-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-player-card strong,
.team-trainer-row strong { font-size: .86rem; }
.team-player-card small,
.team-trainer-row small { color: var(--muted); font-size: .7rem; }
.team-shirt-number {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px 11px 14px 14px;
    background: var(--ink);
    color: #fff;
    font-weight: 900;
    line-height: 1;
}
.team-icon-button {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #929a92;
    font: inherit;
    font-size: 1.2rem;
    cursor: pointer;
}
.team-icon-button:hover { background: rgba(198,58,58,.09); color: var(--danger); }

.team-trainer-list { display: grid; gap: .5rem; margin: 1rem 0; }
.team-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: #e9f2e6; color: var(--grass); font-weight: 900; }
.team-trainer-form { padding-top: .9rem; border-top: 1px solid var(--line); }
.team-trainer-form .btn { width: 100%; margin-top: .55rem; }
.team-help-text { margin: .55rem 0 0 !important; color: var(--muted) !important; font-size: .72rem !important; }
.team-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: 1rem 0; }
.team-mini-stats div { padding: .55rem .3rem; border-radius: 10px; background: #f3f6f1; text-align: center; }
.team-mini-stats strong,
.team-mini-stats span { display: block; }
.team-mini-stats strong { font-size: 1.05rem; }
.team-mini-stats span { color: var(--muted); font-size: .59rem; line-height: 1.2; }
.team-settings-panel { padding: 1.1rem 1.2rem; }
.team-settings-panel > summary { cursor: pointer; font-weight: 800; }
.team-settings-panel[open] > summary { margin-bottom: .8rem; }

.team-back-link { display: inline-block; margin-top: .5rem; color: #526056; font-size: .84rem; font-weight: 750; text-decoration: none; }
.team-back-link:hover { color: var(--grass); }
.team-event-hero { align-items: center; }
.team-event-head-stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.team-event-head-stats div { min-width: 92px; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; text-align: center; }
.team-event-head-stats strong,
.team-event-head-stats span { display: block; }
.team-event-head-stats strong { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; line-height: 1; }
.team-event-head-stats span { margin-top: .15rem; color: var(--muted); font-size: .62rem; }
.team-event-form { display: grid; gap: 1rem; }
.team-event-details { padding: 1.1rem 1.3rem; }
.team-event-details .team-panel-head { margin-bottom: .7rem; }
.team-attendance-panel { padding: 0; overflow: hidden; }
.team-attendance-panel .team-panel-head { padding: 1.3rem 1.3rem 1rem; margin: 0; }
.team-bulk-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.team-bulk-actions button { border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: .35rem .65rem; color: #465248; font: inherit; font-size: .7rem; font-weight: 750; cursor: pointer; }
.team-bulk-actions button:hover { border-color: var(--grass); color: var(--grass); }
.team-attendance-table-wrap,
.team-stats-table-wrap { overflow-x: auto; }
.team-attendance-table,
.team-stats-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.team-attendance-table th,
.team-stats-table th { padding: .65rem .8rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f6f8f4; color: #657067; font-size: .68rem; text-align: left; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.team-attendance-table td,
.team-stats-table td { padding: .72rem .8rem; border-bottom: 1px solid #edf0ea; vertical-align: middle; }
.team-attendance-table tbody tr:last-child td,
.team-stats-table tbody tr:last-child td { border-bottom: 0; }
.team-player-cell { display: flex; align-items: center; gap: .6rem; min-width: 170px; }
.team-player-cell div { min-width: 0; }
.team-player-cell strong,
.team-player-cell small { display: block; }
.team-player-cell small { color: var(--muted); font-size: .68rem; }
.team-status-options { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 360px; }
.team-status-choice { cursor: pointer; }
.team-status-choice input { position: absolute; opacity: 0; pointer-events: none; }
.team-status-choice span { display: block; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: .3rem .52rem; color: #68726a; font-size: .68rem; font-weight: 750; white-space: nowrap; }
.team-status-choice input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.team-status-choice.status-present input:checked + span { border-color: var(--grass); background: var(--grass); }
.team-status-choice.status-absent input:checked + span { border-color: var(--accent); background: var(--accent); }
.team-status-choice.status-injured input:checked + span { border-color: #916f21; background: #916f21; }
.team-status-choice.status-vacation input:checked + span { border-color: #3478a5; background: #3478a5; }
.team-stat-input { width: 64px; padding: .45rem; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; text-align: center; }
.team-stat-input:focus { outline: none; border-color: var(--grass); box-shadow: 0 0 0 3px rgba(var(--grass-rgb),.14); }
.team-stat-input:disabled { opacity: .35; background: #f2f3f1; }
.team-attendance-row.is-not-present { background: rgba(244,246,241,.5); }
.team-event-savebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-top: 1px solid var(--line); background: #fbfcfa; }
.team-event-savebar strong,
.team-event-savebar span { display: block; }
.team-event-savebar span { color: var(--muted); font-size: .7rem; }
.team-event-delete { display: flex; justify-content: flex-end; margin-top: .8rem; }
.text-button.danger { border: 0; background: none; color: var(--danger); cursor: pointer; }
.team-empty-event { text-align: center; padding: 2.5rem; }
.team-empty-event h2 { margin: 0; font-family: "Fraunces", Georgia, serif; }

.team-stats-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.team-stats-cards article { padding: 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(23,37,28,.05); }
.team-stats-cards span,
.team-stats-cards strong,
.team-stats-cards small { display: block; }
.team-stats-cards span { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.team-stats-cards strong { margin: .3rem 0 .15rem; font-family: "Fraunces", Georgia, serif; font-size: 2rem; line-height: 1; }
.team-stats-cards small { color: #69736b; font-size: .7rem; }
.team-stats-notice { margin: 1rem 0 0; }
.team-highlight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.team-highlight-card { display: flex; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(135deg, #fff, #f6f8f4); }
.team-highlight-icon { display: grid; place-items: center; flex: 0 0 auto; width: 45px; height: 45px; border-radius: 13px; background: var(--ink); color: #fff; font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; font-weight: 900; }
.team-highlight-card small,
.team-highlight-card strong,
.team-highlight-card p { display: block; margin: 0; }
.team-highlight-card small { color: var(--muted); font-size: .68rem; text-transform: uppercase; font-weight: 800; letter-spacing: .05em; }
.team-highlight-card strong { font-size: .95rem; }
.team-highlight-card p { color: #667068; font-size: .72rem; }
.team-stats-table-panel { margin-top: 1rem; padding: 0; overflow: hidden; }
.team-stats-table-panel .team-panel-head { padding: 1.3rem 1.3rem .9rem; margin: 0; }
.team-stats-table th:first-child,
.team-stats-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
.team-stats-table th:first-child { background: #f6f8f4; }
.team-ranking-player { display: flex; align-items: center; gap: .55rem; min-width: 190px; }
.team-ranking-player > div { min-width: 0; }
.team-ranking-player strong,
.team-ranking-player small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-ranking-player small { color: var(--muted); font-size: .68rem; }
.team-rank { width: 20px; color: #899189; font-size: .7rem; font-weight: 800; text-align: center; }
.team-percentage-cell { min-width: 112px; }
.team-percentage-cell strong { display: block; font-size: .78rem; }
.team-percentage-cell > span { display: block; width: 100%; height: 5px; margin-top: .25rem; border-radius: 999px; background: #e8ece5; overflow: hidden; }
.team-percentage-cell i { display: block; height: 100%; border-radius: inherit; background: var(--grass); }
.team-event-stat-list { display: grid; }
.team-event-stat-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 18px; align-items: center; gap: .7rem; padding: .75rem 1rem; border-top: 1px solid #edf0ea; text-decoration: none; }
.team-event-stat-list a:hover { background: #fafbf9; }
.team-event-stat-list div { min-width: 0; }
.team-event-stat-list strong,
.team-event-stat-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-event-stat-list small { color: var(--muted); font-size: .7rem; }
.team-event-stat-list > a > span:nth-last-of-type(1) { color: #59645b; font-size: .75rem; white-space: nowrap; }
.team-event-stat-list b { color: var(--grass); }

.account-team-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 0; margin: 0; list-style: none; }
.account-team-card { display: flex; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; }
.account-team-card:hover { border-color: #a9b7a7; }
.account-team-card-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #e8f3e6; color: var(--grass); font-size: 1.3rem; }
.account-team-card div { min-width: 0; }
.account-team-card strong,
.account-team-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-team-card small { color: var(--muted); font-size: .75rem; }
.account-head-actions { display: flex; flex-wrap: wrap; gap: .55rem; }

@media (max-width: 980px) {
    .team-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .team-layout { grid-template-columns: 1fr; }
    .team-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .team-settings-panel { grid-column: 1 / -1; }
    .team-stats-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .team-hero,
    .team-stats-hero,
    .team-event-hero { align-items: flex-start; flex-direction: column; gap: 1rem; padding-top: 1.2rem; }
    .team-onboarding-grid { grid-template-columns: 1fr; gap: .5rem; }
    .team-onboarding-copy { padding: .6rem 0; }
    .team-form-grid,
    .team-schedule-strip { grid-template-columns: 1fr; }
    .team-inline-add { grid-template-columns: 1fr 1fr; }
    .team-inline-add label:first-of-type { grid-column: 1 / -1; }
    .team-inline-add .btn { min-height: 44px; }
    .team-player-grid { grid-template-columns: 1fr; }
    .team-event-row { grid-template-columns: 45px minmax(0, 1fr) 18px; }
    .team-event-row .team-event-type { grid-column: 2; grid-row: 2; }
    .team-event-copy { grid-column: 2; grid-row: 1; }
    .team-event-progress { display: none; }
    .team-event-arrow { grid-column: 3; grid-row: 1 / 3; }
    .team-event-date { grid-row: 1 / 3; }
    .team-event-head-stats { width: 100%; }
    .team-event-head-stats div { flex: 1; min-width: 84px; }
    .team-attendance-panel .team-panel-head { flex-direction: column; }
    .team-bulk-actions { justify-content: flex-start; }
    .team-event-savebar { align-items: stretch; flex-direction: column; }
    .team-event-savebar .btn { width: 100%; }
    .team-highlight-grid { grid-template-columns: 1fr; }
    .account-team-cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .team-panel { padding: 1rem; border-radius: 15px; }
    .team-create-form { padding: 1rem; }
    .team-day-picker { gap: .25rem; }
    .team-day-option span { min-height: 40px; border-radius: 10px; font-size: .78rem; }
    .team-summary-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
    .team-summary-card { min-height: 118px; padding: .85rem; }
    .team-summary-card strong { font-size: 1.55rem; }
    .team-summary-primary { grid-column: 1 / -1; }
    .team-side-column { grid-template-columns: 1fr; }
    .team-form-grid { display: block; }
    .team-subpanel + .team-subpanel { margin-top: .65rem; }
    .team-two-fields { grid-template-columns: 1fr; }
    .team-inline-add { grid-template-columns: 1fr; }
    .team-inline-add label:first-of-type { grid-column: auto; }
    .team-stats-cards { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .team-stats-cards article { padding: .85rem; }
    .team-stats-cards strong { font-size: 1.55rem; }
    .team-event-stat-list a { grid-template-columns: minmax(0, 1fr) auto; }
    .team-event-stat-list .team-event-type { grid-column: 1; width: max-content; }
    .team-event-stat-list div { grid-column: 1; }
    .team-event-stat-list > a > span:nth-last-of-type(1) { grid-column: 2; grid-row: 1 / 3; }
    .team-event-stat-list b { display: none; }
}

/* ============================================================
   Spelerfoto's, wedstrijddetails en opstellingmaker
   ============================================================ */
.team-inline-add {
    grid-template-columns: 1.35fr .55fr .9fr 1.15fr auto;
}
.team-file-input {
    min-height: 42px;
    padding: .45rem;
    font-size: .72rem !important;
}
.team-file-input::file-selector-button {
    margin-right: .45rem;
    border: 0;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    padding: .42rem .55rem;
    cursor: pointer;
    font-weight: 750;
}
.team-player-card-photo {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
}
.team-player-card-copy { min-width: 0; }
.team-player-card-copy strong,
.team-player-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-player-photo {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, #e5eee1, #cbdcc6);
    color: var(--grass);
    box-shadow: 0 0 0 1px #cbd5c7, 0 5px 13px rgba(23,37,28,.12);
    overflow: visible;
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 900;
}
.team-player-photo img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}
.team-player-photo > span { line-height: 1; }
.team-player-photo > b {
    position: absolute;
    right: -4px;
    bottom: -3px;
    display: grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-family: "Instrument Sans", sans-serif;
    font-size: .58rem;
    line-height: 1;
}
.team-player-photo-small { width: 46px; height: 46px; font-size: 1rem; }
.team-player-photo-mini { width: 38px; height: 38px; font-size: .8rem; }
.team-player-photo-mini > b { min-width: 17px; height: 17px; font-size: .5rem; }
.team-player-photo-form { flex: 0 0 auto; }
.team-photo-button {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8faf7;
    color: #59645b;
    padding: .3rem .52rem;
    cursor: pointer;
    font-size: .65rem;
    font-weight: 800;
    white-space: nowrap;
}
.team-photo-button:hover { border-color: var(--grass); color: var(--grass); }
.team-photo-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.team-match-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr);
    gap: .8rem;
    align-items: end;
    margin-top: .8rem;
}
.team-field-title { display: block; color: #4c584f; font-size: .77rem; font-weight: 750; }
.team-score-editor {
    min-width: 0;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #f8faf7;
}
.team-score-inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: .55rem; }
.team-score-inputs label { min-width: 0; }
.team-score-inputs label span { display: block; color: var(--muted); font-size: .66rem; }
.team-score-inputs input { text-align: center; font-size: 1.1rem !important; font-weight: 850; }
.team-score-inputs b { padding-bottom: .65rem; font-size: 1.4rem; }
.team-goal-balance {
    margin-top: .55rem;
    border-radius: 9px;
    background: #eef1ec;
    color: #606a62;
    padding: .46rem .58rem;
    font-size: .72rem;
    font-weight: 750;
}
.team-goal-balance.is-warning { background: #fff3d7; color: #7b5b11; }
.team-goal-balance.is-error { background: #ffe8e4; color: #a43d31; }
.team-goal-balance.is-complete { background: #e5f4e2; color: #276c3a; }
.team-input-help { display: block; margin-top: .25rem; color: var(--muted); font-size: .65rem; font-weight: 500; }
.team-duty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: .8rem; }
.team-score-head { border-color: #efc5b8 !important; background: #fff4f0 !important; }
.team-score-head strong { color: var(--accent); }
.team-attendance-table th small { display: block; color: var(--muted); font-size: .55rem; font-weight: 600; }

.team-lineup-panel { padding: 1.3rem; overflow: hidden; }
.team-lineup-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.team-lineup-toolbar label { color: #4c584f; font-size: .7rem; font-weight: 750; }
.team-lineup-toolbar .paste-input { min-width: 175px; margin-top: .2rem; padding: .54rem .65rem; font-size: .78rem; }
.team-lineup-toolbar .text-button { min-height: 36px; border: 0; background: none; color: #677169; cursor: pointer; font-size: .72rem; font-weight: 750; }
.team-lineup-builder {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) 265px;
    gap: 1rem;
    align-items: start;
}
.team-football-pitch {
    position: relative;
    width: min(100%, 680px);
    aspect-ratio: 68 / 98;
    justify-self: center;
    border: 4px solid #f7fbf4;
    border-radius: 20px;
    background:
        linear-gradient(to bottom, rgba(255,255,255,.055) 0 10%, transparent 10% 20%, rgba(255,255,255,.055) 20% 30%, transparent 30% 40%, rgba(255,255,255,.055) 40% 50%, transparent 50% 60%, rgba(255,255,255,.055) 60% 70%, transparent 70% 80%, rgba(255,255,255,.055) 80% 90%, transparent 90%),
        #3d8c4d;
    box-shadow: 0 0 0 1px #236c37, inset 0 0 35px rgba(10,62,25,.22), 0 18px 35px rgba(23,37,28,.12);
    overflow: hidden;
    touch-action: none;
}
.team-football-pitch::before {
    content: "";
    position: absolute;
    inset: 2.5%;
    border: 2px solid rgba(255,255,255,.85);
    border-radius: 4px;
    pointer-events: none;
}
.pitch-halfway { position: absolute; left: 2.5%; right: 2.5%; top: 50%; border-top: 2px solid rgba(255,255,255,.85); pointer-events: none; }
.pitch-circle { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.pitch-circle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.9); transform: translate(-50%, -50%); }
.pitch-box { position: absolute; left: 25%; width: 50%; height: 16%; border: 2px solid rgba(255,255,255,.85); pointer-events: none; }
.pitch-box-top { top: 2.5%; border-top: 0; }
.pitch-box-bottom { bottom: 2.5%; border-bottom: 0; }
.pitch-goal { position: absolute; left: 39%; width: 22%; height: 2.7%; border: 2px solid rgba(255,255,255,.95); pointer-events: none; }
.pitch-goal-top { top: 0; border-top: 0; }
.pitch-goal-bottom { bottom: 0; border-bottom: 0; }
.team-football-pitch.is-drop-target { box-shadow: 0 0 0 5px rgba(255,179,87,.55), inset 0 0 35px rgba(10,62,25,.22); }
.team-lineup-token {
    position: absolute;
    z-index: 4;
    display: grid;
    justify-items: center;
    width: 78px;
    transform: translate(-50%, -50%);
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.team-lineup-token.is-dragging { z-index: 10; cursor: grabbing; filter: drop-shadow(0 10px 8px rgba(0,0,0,.22)); }
.team-lineup-token > strong {
    max-width: 78px;
    margin-top: .22rem;
    border-radius: 999px;
    background: rgba(21,34,24,.86);
    color: #fff;
    padding: .17rem .42rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .58rem;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.team-lineup-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #e8f1e5;
    color: var(--grass);
    box-shadow: 0 5px 14px rgba(0,0,0,.2);
    overflow: visible;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 900;
}
.team-lineup-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.team-lineup-avatar > b { position: absolute; right: -5px; bottom: -3px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 3px; border: 2px solid #fff; border-radius: 999px; background: var(--ink); color: #fff; font-family: "Instrument Sans", sans-serif; font-size: .52rem; }
.team-lineup-avatar.is-small { width: 42px; height: 42px; border-width: 2px; font-size: .85rem; }
.team-lineup-avatar.is-small > b { min-width: 17px; height: 17px; font-size: .48rem; }
.team-lineup-remove {
    position: absolute;
    z-index: 3;
    right: 5px;
    top: -4px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-size: .8rem;
    line-height: 1;
}
.team-lineup-bench { padding: .85rem; border: 1px solid var(--line); border-radius: 15px; background: #f7f9f5; }
.team-lineup-bench > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .65rem; }
.team-lineup-bench h3 { margin: 0; font-size: .9rem; }
.team-lineup-bench > div:first-child > span { color: var(--muted); font-size: .65rem; }
.team-lineup-bench > p { margin: .65rem 0 0; color: var(--muted); font-size: .65rem; line-height: 1.45; }
.team-bench-list { display: grid; gap: .4rem; max-height: 610px; overflow-y: auto; padding-right: .15rem; }
.team-bench-player {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    padding: .48rem;
    cursor: grab;
    text-align: left;
}
.team-bench-player:hover { border-color: var(--grass); box-shadow: 0 5px 12px rgba(23,37,28,.07); }
.team-bench-player.is-dragging { opacity: .45; }
.team-bench-player > span:nth-child(2) { min-width: 0; }
.team-bench-player strong,
.team-bench-player small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-bench-player strong { font-size: .74rem; }
.team-bench-player small { color: var(--muted); font-size: .61rem; }
.team-bench-player > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e8f3e6; color: var(--grass); font-style: normal; font-weight: 900; }
.team-bench-empty { margin: 0; padding: .8rem; border: 1px dashed #c5d0c2; border-radius: 10px; color: var(--muted); font-size: .7rem; text-align: center; }

.team-highlight-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .team-inline-add { grid-template-columns: 1fr 1fr; }
    .team-inline-add label:first-of-type { grid-column: 1 / -1; }
    .team-inline-add .btn { align-self: end; min-height: 44px; }
    .team-lineup-builder { grid-template-columns: minmax(330px, 1fr) 230px; }
}

@media (max-width: 860px) {
    .team-player-card-photo { grid-template-columns: auto minmax(0, 1fr) auto; }
    .team-player-photo-form { grid-column: 2; }
    .team-player-card-photo > form:last-child { grid-column: 3; grid-row: 1 / 3; }
    .team-lineup-builder { grid-template-columns: 1fr; }
    .team-football-pitch { width: min(100%, 560px); }
    .team-bench-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
    .team-lineup-toolbar { justify-content: flex-start; }
    .team-highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .team-match-detail-grid,
    .team-duty-grid { grid-template-columns: 1fr; }
    .team-lineup-panel { padding: 1rem; }
    .team-lineup-panel .team-panel-head { flex-direction: column; }
    .team-lineup-toolbar { width: 100%; align-items: stretch; }
    .team-lineup-toolbar label { width: 100%; }
    .team-lineup-toolbar .paste-input { width: 100%; }
    .team-lineup-toolbar .btn { flex: 1; }
    .team-football-pitch { min-height: 500px; aspect-ratio: auto; }
    .team-lineup-token { width: 64px; }
    .team-lineup-token > strong { max-width: 64px; font-size: .52rem; }
    .team-lineup-avatar { width: 46px; height: 46px; }
    .team-bench-list { grid-template-columns: 1fr; }
    .team-player-card-photo { grid-template-columns: auto minmax(0, 1fr) auto; }
    .team-photo-button span { font-size: 0; }
    .team-photo-button span::after { content: "Foto"; font-size: .65rem; }
}

@media (max-width: 620px) {
    .team-inline-add { grid-template-columns: 1fr; }
    .team-inline-add label:first-of-type { grid-column: auto; }
    .team-highlight-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Mobiele navigatie, seizoendashboard en teamhulpmiddelen
   ============================================================ */
.site-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    cursor: pointer;
}
.site-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 4px 0;
    border-radius: 99px;
    background: var(--ink);
    transition: transform .18s ease, opacity .18s ease;
}
.site-menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.site-menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.team-dashboard-page { padding-top: 1rem; }
.team-section-nav {
    position: sticky;
    top: 65px;
    z-index: 20;
    display: flex;
    gap: .35rem;
    margin: 0 0 1rem;
    padding: .38rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 20px rgba(23,37,28,.06);
    overflow-x: auto;
    scrollbar-width: none;
}
.team-section-nav::-webkit-scrollbar { display: none; }
.team-section-nav a {
    flex: 0 0 auto;
    border-radius: 10px;
    padding: .58rem .8rem;
    color: #556158;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.team-section-nav a:hover { background: #f1f4ef; color: var(--ink); }
.team-section-nav a.is-active { background: var(--ink); color: #fff; }

.team-season-picker {
    min-width: 190px;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.team-season-picker label { display: block; margin-bottom: .2rem; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.team-season-picker .paste-input { padding: .52rem .65rem; font-size: .84rem; }

.season-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.65fr) repeat(4, minmax(135px, .7fr));
    gap: .75rem;
    margin-bottom: 1rem;
}
.season-dashboard-card,
.season-kpi-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(23,37,28,.06);
}
.season-dashboard-next { grid-row: span 2; padding: 1.25rem; background: linear-gradient(145deg, #eaf4e7, #fff); }
.season-card-label,
.season-kpi-card > span { display: block; color: var(--muted); font-size: .68rem; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.season-dashboard-next h2 { margin: .45rem 0 .15rem; font-family: "Fraunces", Georgia, serif; font-size: 1.75rem; line-height: 1.1; }
.season-dashboard-next p { margin: 0 0 .25rem; color: #556158; }
.season-dashboard-next small { display: block; margin: .4rem 0 .9rem; color: var(--grass); font-size: .74rem; font-weight: 750; }
.season-event-chip { display: inline-flex; margin-top: .75rem; border-radius: 999px; background: #e8f3e6; color: var(--grass); padding: .25rem .55rem; font-size: .67rem; font-weight: 850; }
.season-event-chip.is-match { background: #fff0eb; color: var(--accent); }
.season-kpi-card { padding: 1rem; }
.season-kpi-card strong { display: block; margin: .35rem 0 .15rem; font-family: "Fraunces", Georgia, serif; font-size: 1.7rem; line-height: 1; }
.season-kpi-card small { display: block; color: #687169; font-size: .68rem; line-height: 1.35; }
.season-dashboard-columns { display: grid; grid-template-columns: 1.3fr .7fr; gap: 1rem; margin-bottom: 1rem; }
.season-dashboard-panel { padding: 1.2rem; }
.season-upcoming-list { display: grid; gap: .45rem; }
.season-upcoming-list a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .65rem;
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fbfcfa;
    text-decoration: none;
}
.season-upcoming-list a:hover { border-color: #afbaad; background: #fff; }
.season-upcoming-list div { min-width: 0; }
.season-upcoming-list strong,
.season-upcoming-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.season-upcoming-list strong { font-size: .84rem; }
.season-upcoming-list small { color: var(--muted); font-size: .67rem; }
.season-upcoming-list > a > span:nth-last-of-type(1) { color: #657067; font-size: .68rem; white-space: nowrap; }
.season-upcoming-list b { color: var(--grass); font-size: 1.2rem; }
.season-last-match { display: grid; gap: .55rem; min-height: 190px; place-content: center; border-radius: 15px; background: linear-gradient(145deg, #17251c, #294333); color: #fff; padding: 1.25rem; text-align: center; text-decoration: none; }
.season-last-match > span { color: rgba(255,255,255,.68); font-size: .7rem; }
.season-last-match > strong { font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; }
.season-last-match > strong b { display: inline-block; margin: 0 .35rem; color: #ffb357; font-size: 1.65rem; }
.season-last-match > small { color: rgba(255,255,255,.78); }
.season-leaders-panel { padding: 1.2rem; }
.season-leader-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.season-leader-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; min-height: 96px; padding: .8rem; border: 1px solid var(--line); border-radius: 14px; background: #fafbf9; overflow: hidden; }
.season-leader-icon { position: absolute; right: .55rem; top: .35rem; color: #dfe6dc; font-family: "Fraunces", Georgia, serif; font-size: 2.3rem; font-weight: 900; line-height: 1; }
.season-leader-card > div:last-child { min-width: 0; }
.season-leader-card small,
.season-leader-card strong,
.season-leader-card p { display: block; margin: 0; }
.season-leader-card small { color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.season-leader-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.season-leader-card p { color: var(--grass); font-size: .7rem; font-weight: 800; }

.team-message-card {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr) auto;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #cbd8c8;
    border-radius: 17px;
    background: linear-gradient(135deg, #edf6ea, #fff);
}
.team-message-card h2 { margin: .1rem 0 .2rem; font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; }
.team-message-card p { margin: 0; color: #647067; font-size: .76rem; }
.team-message-card pre { margin: 0; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #465149; font: 500 .74rem/1.45 "Instrument Sans", sans-serif; white-space: pre-wrap; }
.team-message-actions { display: grid; gap: .45rem; }
.team-message-actions .btn { width: 100%; }

.team-training-linker { display: flex; align-items: flex-end; gap: .65rem; margin-top: .6rem; }
.team-training-linker label { flex: 1; }
.team-linked-training-card { display: grid; grid-template-columns: minmax(180px, .6fr) minmax(0, 1.4fr); gap: .8rem; margin-top: .8rem; padding: .8rem; border: 1px solid #cbd8c8; border-radius: 13px; background: #f1f7ef; }
.team-linked-training-card span,
.team-linked-training-card strong,
.team-linked-training-card small { display: block; }
.team-linked-training-card > div:first-child > span { color: var(--grass); font-size: .63rem; font-weight: 850; text-transform: uppercase; }
.team-linked-training-card strong { font-size: .9rem; }
.team-linked-training-card small { color: var(--muted); font-size: .67rem; }
.team-linked-exercises { display: flex; flex-wrap: wrap; align-content: center; gap: .35rem; }
.team-linked-exercises a,
.team-linked-exercises > span { border-radius: 999px; background: #fff; padding: .3rem .55rem; color: #526056; font-size: .67rem; font-weight: 700; text-decoration: none; }
.team-linked-exercises a:hover { color: var(--grass); }
.team-single-field { grid-template-columns: 1fr; }
.team-side-actions { display: grid; gap: .45rem; }

.training-team-link-box { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(300px, 1.2fr); gap: 1rem; align-items: center; margin: 1rem 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(23,37,28,.06); }
.training-team-link-box h2 { margin: .15rem 0 .25rem; font-family: "Fraunces", Georgia, serif; }
.training-team-link-box p { margin: 0; color: var(--muted); }
.training-team-link-box form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .6rem; }
.training-team-link-box form .paste-label { grid-column: 1 / -1; margin: 0; }

@media (max-width: 1120px) {
    .season-dashboard-grid { grid-template-columns: minmax(280px, 1.3fr) repeat(2, minmax(145px, .7fr)); }
    .season-dashboard-next { grid-row: span 2; }
}

@media (max-width: 820px) {
    .season-dashboard-columns { grid-template-columns: 1fr; }
    .season-leader-grid { grid-template-columns: 1fr 1fr; }
    .team-message-card { grid-template-columns: 1fr; align-items: stretch; }
    .team-message-actions { grid-template-columns: 1fr 1fr; }
    .team-training-linker { align-items: stretch; flex-direction: column; }
    .team-training-linker .btn { width: 100%; }
    .team-linked-training-card { grid-template-columns: 1fr; }
    .training-team-link-box { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    body { background-attachment: scroll; }
    .site-head-in { position: relative; flex-wrap: nowrap; padding: .62rem .85rem; }
    .site-menu-toggle { display: block; flex: 0 0 auto; }
    .site-nav {
        position: absolute;
        left: .65rem;
        right: .65rem;
        top: calc(100% + .35rem);
        display: none;
        width: auto;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        align-items: stretch;
        flex-direction: column;
        gap: .15rem;
        padding: .65rem;
        border: 1px solid var(--line);
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 18px 45px rgba(23,37,28,.18);
    }
    .site-nav.is-open { display: flex; }
    .site-nav .nav-link { width: 100%; padding: .72rem .75rem; border-radius: 10px; }
    .site-nav .nav-link:hover { background: #f2f5f0; }
    .site-nav .nav-link::after { display: none; }
    .site-nav .btn { width: 100%; margin-top: .25rem; }
    .wrap { padding: .65rem .85rem 5rem; }
    .btn { min-height: 44px; }
    .paste-input, input, select, textarea { font-size: 16px; }

    .team-page,
    .team-event-page,
    .team-stats-page,
    .team-dashboard-page { padding-top: .3rem; }
    .team-section-nav { top: 60px; margin-left: -.2rem; margin-right: -.2rem; border-radius: 12px; }
    .team-hero,
    .team-stats-hero,
    .team-event-hero { padding: 1rem 0 1.15rem; }
    .team-hero h1,
    .team-stats-hero h1,
    .team-event-hero h1 { font-size: clamp(1.9rem, 10vw, 2.7rem); }
    .team-hero-actions { width: 100%; }
    .team-hero-actions .btn { flex: 1; }
    .team-season-picker { width: 100%; min-width: 0; }

    .season-dashboard-grid {
        display: flex;
        gap: .65rem;
        margin-left: -.85rem;
        margin-right: -.85rem;
        padding: 0 .85rem .25rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .season-dashboard-grid::-webkit-scrollbar { display: none; }
    .season-dashboard-card,
    .season-kpi-card { flex: 0 0 82%; scroll-snap-align: start; }
    .season-kpi-card { flex-basis: 62%; min-height: 130px; }
    .season-dashboard-next { min-height: 260px; }
    .season-upcoming-list a { grid-template-columns: auto minmax(0, 1fr) auto; }
    .season-upcoming-list b { display: none; }
    .season-leader-grid { grid-template-columns: 1fr; }

    .team-summary-grid {
        display: flex;
        gap: .55rem;
        margin-left: -.85rem;
        margin-right: -.85rem;
        padding: 0 .85rem .25rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .team-summary-grid::-webkit-scrollbar { display: none; }
    .team-summary-card { flex: 0 0 68%; min-height: 125px; scroll-snap-align: start; }
    .team-summary-primary { flex-basis: 84%; }
    .team-panel { box-shadow: 0 8px 24px rgba(23,37,28,.06); }
    .team-panel-head { align-items: stretch; flex-direction: column; }
    .team-count-badge { align-self: flex-start; }
    .team-event-row { padding: .62rem; }
    .team-event-copy strong { white-space: normal; line-height: 1.25; }
    .team-event-copy small { white-space: normal; line-height: 1.3; }

    .team-attendance-table-wrap { overflow: visible; padding: 0 .75rem 1rem; }
    .team-attendance-table,
    .team-attendance-table tbody,
    .team-attendance-table tr,
    .team-attendance-table td { display: block; width: 100%; }
    .team-attendance-table thead { display: none; }
    .team-attendance-table tbody { display: grid; gap: .7rem; }
    .team-attendance-table tr { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
    .team-attendance-table td { padding: .72rem; border: 0; border-bottom: 1px solid #edf0ea; }
    .team-attendance-table td:last-child { border-bottom: 0; }
    .team-attendance-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .35rem; color: var(--muted); font-size: .62rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
    .team-attendance-table td[data-label="Speler"]::before { display: none; }
    .team-player-cell { min-width: 0; }
    .team-status-options { display: grid; grid-template-columns: 1fr 1fr; min-width: 0; gap: .35rem; }
    .team-status-choice span { min-height: 40px; display: grid; place-items: center; padding: .42rem; text-align: center; white-space: normal; }
    .team-mobile-stat-cell { display: grid !important; grid-template-columns: minmax(0, 1fr) 88px; align-items: center; gap: .75rem; }
    .team-mobile-stat-cell::before { margin: 0 !important; }
    .team-stat-input { width: 88px; min-height: 44px; }
    .team-event-savebar { position: sticky; z-index: 15; bottom: 0; margin: 0 -.75rem -1rem; padding: .75rem; box-shadow: 0 -10px 25px rgba(23,37,28,.1); }
    .team-event-savebar > div { display: none; }
    .team-event-savebar .btn { width: 100%; }
    .team-bulk-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .team-bulk-actions button { min-height: 40px; }

    .team-message-actions { grid-template-columns: 1fr; }
    .team-message-card pre { max-height: 210px; overflow-y: auto; }
    .team-linked-exercises { flex-wrap: nowrap; padding-bottom: .2rem; overflow-x: auto; }
    .team-linked-exercises a,
    .team-linked-exercises > span { flex: 0 0 auto; }
    .training-team-link-box form { grid-template-columns: 1fr; }
    .training-team-link-box form .paste-label { grid-column: auto; }
    .training-team-link-box .btn { width: 100%; }

    .team-stats-table-wrap { -webkit-overflow-scrolling: touch; }
    .team-stats-table { min-width: 900px; }
    .team-stats-table th:first-child,
    .team-stats-table td:first-child { box-shadow: 8px 0 12px rgba(23,37,28,.05); }

    .training-builder-page,
    .training-detail { margin-top: .25rem; }
    .builder-panel,
    .training-share-box,
    .training-delete-box,
    .training-team-link-box { border-radius: 15px; }
    .training-actions-buttons,
    .training-share-box .training-actions-buttons { width: 100%; }
    .training-actions-buttons .btn { width: 100%; }
    .exercise-picker { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
}

@media (max-width: 480px) {
    .wordmark { font-size: 1.12rem; }
    .wordmark-mark { width: 1.85rem; height: 1.85rem; }
    .wordmark-text { display: inline; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wordmark-logo-image { max-width: 210px; }
    .site-head { padding: 0; }
    .team-section-nav a { padding: .55rem .68rem; font-size: .72rem; }
    .team-day-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .team-day-option small { display: block; margin-top: .15rem; color: var(--muted); font-size: .55rem; text-align: center; }
    .team-player-card-photo { padding: .65rem; }
    .team-player-photo { width: 48px; height: 48px; }
    .team-event-head-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .team-event-head-stats div { min-width: 0; }
    .team-score-inputs { gap: .35rem; }
    .team-score-inputs b { padding-bottom: .55rem; }
    .team-football-pitch { min-height: 430px; }
    .season-dashboard-card,
    .season-kpi-card { flex-basis: 88%; }
    .season-kpi-card { flex-basis: 72%; }
}

/* ============================================================
   Automatisch opslaan + rijd/was/vlagschema
   ============================================================ */
.team-autosave-status { color: var(--ink); }
.team-autosave-status.is-ready { color: #536057; }
.team-autosave-status.is-pending,
.team-autosave-status.is-saving { color: #9a6200; }
.team-autosave-status.is-saved { color: var(--grass); }
.team-autosave-status.is-error { color: var(--danger); }
.team-match-when-fields { margin-top: .15rem; }

.team-player-card-photo { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.team-player-card-copy em { display: block; margin-top: .16rem; color: #718078; font-size: .61rem; font-style: normal; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-player-duty-form { display: flex; align-items: center; }
.team-duty-switch { position: relative; display: inline-flex; cursor: pointer; }
.team-duty-switch input { position: absolute; opacity: 0; pointer-events: none; }
.team-duty-switch span { position: relative; display: block; width: 38px; height: 22px; border-radius: 999px; background: #d9ded7; transition: background .18s ease; }
.team-duty-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(23,37,28,.2); transition: transform .18s ease; }
.team-duty-switch input:checked + span { background: var(--grass); }
.team-duty-switch input:checked + span::after { transform: translateX(16px); }
.team-duty-switch input:focus-visible + span { outline: 3px solid rgba(57,104,67,.2); outline-offset: 2px; }

.team-duty-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.team-duty-generator-panel,
.team-duty-list-panel { padding: 1.25rem; }
.team-duty-generator-form { display: grid; gap: .85rem; }
.team-three-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.team-three-fields label,
.team-duty-generator-form label,
.team-import-panel label { color: #4c584f; font-size: .75rem; font-weight: 750; }
.team-three-fields .paste-input,
.team-duty-generator-form .paste-input,
.team-import-panel .paste-input { margin-top: .22rem; }
.team-duty-generator-summary { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: 13px; background: #f2f6f0; }
.team-duty-generator-summary span { color: #5b675e; font-size: .72rem; }
.team-duty-generator-summary strong { color: var(--ink); font-size: .95rem; }
.team-duty-generator-summary .btn { margin-left: auto; }

.team-duty-match-list { display: grid; gap: .55rem; }
.team-duty-match-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; gap: .75rem; align-items: center; padding: .75rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.team-duty-match-card:hover { border-color: #aebbaa; box-shadow: 0 8px 20px rgba(23,37,28,.06); transform: translateY(-1px); }
.team-duty-match-copy { min-width: 0; }
.team-duty-match-copy > div > strong,
.team-duty-match-copy > div > small { display: block; }
.team-duty-match-copy > div > strong { font-size: .9rem; }
.team-duty-match-copy > div > small { color: var(--muted); font-size: .7rem; }
.team-duty-match-copy dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: .55rem 0 0; }
.team-duty-match-copy dl > div { min-width: 0; padding: .45rem .55rem; border-radius: 9px; background: #f5f7f3; }
.team-duty-match-copy dt { color: var(--muted); font-size: .57rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.team-duty-match-copy dd { margin: .1rem 0 0; color: #465149; font-size: .67rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.team-duty-player-form { display: grid; gap: .75rem; }
.team-duty-player-list { display: grid; gap: .4rem; max-height: 430px; overflow-y: auto; padding-right: .15rem; }
.team-duty-player-list > label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .52rem; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; }
.team-duty-player-list > label > span:nth-child(2) { min-width: 0; }
.team-duty-player-list strong,
.team-duty-player-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-duty-player-list strong { font-size: .78rem; }
.team-duty-player-list small { color: var(--muted); font-size: .62rem; }
.team-duty-player-list input { width: 20px; height: 20px; accent-color: var(--grass); }
.team-player-photo-tiny { width: 38px; height: 38px; border-width: 1px; box-shadow: 0 0 0 1px #cbd5c7; font-size: .8rem; overflow: hidden; }
.team-player-photo-tiny b { position: static; min-width: 0; height: auto; border: 0; background: transparent; color: var(--grass); font-size: .8rem; }

.team-import-panel form { display: grid; gap: .65rem; margin-top: .8rem; }
.team-import-drop { display: grid; gap: .3rem; padding: .75rem; border: 1px dashed #aebbaa; border-radius: 12px; background: #f7faf5; }
.team-import-drop input { width: 100%; font-size: .72rem; }
.team-import-check { display: flex !important; align-items: center; gap: .45rem; }
.team-import-check input { width: 18px; height: 18px; accent-color: var(--grass); }
.team-example-download { display: inline-block; margin-top: .7rem; }

@media (max-width: 1050px) {
    .team-duty-layout { grid-template-columns: 1fr; }
    .team-duty-layout .team-side-column { grid-template-columns: 1fr 1fr; display: grid; }
}

@media (max-width: 860px) {
    .team-player-card-photo { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .team-player-photo-form { grid-column: 2; }
    .team-player-duty-form { grid-column: 3; grid-row: 1 / 3; }
    .team-player-card-photo > form:last-child { grid-column: 4; grid-row: 1 / 3; }
    .team-duty-match-copy dl { grid-template-columns: 1fr; }
    .team-duty-match-copy dd { white-space: normal; }
}

@media (max-width: 760px) {
    .team-duty-layout .team-side-column { grid-template-columns: 1fr; }
    .team-three-fields { grid-template-columns: 1fr; }
    .team-duty-generator-summary { align-items: stretch; flex-direction: column; }
    .team-duty-generator-summary .btn { width: 100%; margin-left: 0; }
    .team-duty-match-card { grid-template-columns: 44px minmax(0, 1fr); }
    .team-duty-match-card .team-event-arrow { display: none; }
    .team-duty-generator-panel,
    .team-duty-list-panel { padding: .85rem; }
    .team-match-when-fields { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .team-player-card-photo { grid-template-columns: auto minmax(0, 1fr) auto; }
    .team-player-duty-form { grid-column: 3; grid-row: 1; }
    .team-player-photo-form { grid-column: 2 / 4; grid-row: 2; }
    .team-player-card-photo > form:last-child { position: absolute; right: .35rem; top: .35rem; grid-column: auto; grid-row: auto; }
    .team-match-when-fields { grid-template-columns: 1fr; }
    .team-duty-match-card { padding: .62rem; }
    .team-duty-match-copy dl { gap: .3rem; }
}

/* Deelbaar totaaloverzicht voor het rijd-, was- en vlagschema */
.team-duty-share-panel { padding: 1.25rem; }
.team-duty-share-grid { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: .9rem; align-items: start; }
.team-duty-share-grid pre { margin: 0; max-height: 360px; overflow: auto; padding: .9rem; border: 1px solid var(--line); border-radius: 13px; background: #f7f9f5; color: #465149; font: 600 .76rem/1.55 "Instrument Sans", sans-serif; white-space: pre-wrap; }
.team-duty-share-actions { display: grid; gap: .55rem; }
.team-duty-share-actions .btn { width: 100%; }
.team-import-status { min-height: 1.2em; margin: .2rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.team-import-status.is-loading { color: #756126; }
.team-import-status.is-success { color: var(--grass); }
.team-import-status.is-error { color: #a43f3f; }
.team-import-status.is-ready { color: var(--muted); }
.team-import-panel button[disabled] { opacity: .62; cursor: wait; }

@media (max-width: 760px) {
    .team-duty-share-panel { padding: .85rem; }
    .team-duty-share-grid { grid-template-columns: 1fr; }
    .team-duty-share-grid pre { max-height: 300px; font-size: .71rem; }
    .team-duty-share-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
    .team-duty-share-actions { grid-template-columns: 1fr; }
}

.team-duty-share-grid-image { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; }
.team-duty-poster-card { min-width: 0; }
.team-duty-poster-frame { display: block; padding: .8rem; border-radius: 18px; background: linear-gradient(180deg, #f7faf6 0%, var(--grass-soft) 100%); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }
.team-duty-poster-frame img { display: block; width: 100%; height: auto; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(23,37,28,.10); }
.team-duty-share-actions .btn { text-align: center; }
@media (max-width: 900px) {
    .team-duty-share-grid-image { grid-template-columns: 1fr; }
}

/* Wedstrijdregels, waarschuwingen en extra spelerscontext */
.team-duty-grid label.is-disabled { opacity: .62; }
.team-duty-grid label.is-disabled input { background: #eef1ed; cursor: not-allowed; }
.team-duty-grid label small[data-travel-home-note] { display: block; min-height: 1.1em; margin-top: .3rem; color: var(--muted); font-size: .67rem; }
.team-match-attention { display: flex; align-items: center; gap: .65rem; }
.team-match-attention > strong,
.team-event-alert { display: inline-grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #b93c35; color: #fff; font-size: .82rem; font-style: normal; font-weight: 900; box-shadow: 0 4px 10px rgba(185,60,53,.2); }
.team-event-row .team-event-alert { margin-left: auto; }
.team-event-stat-list .team-event-alert { width: 23px; height: 23px; }
.team-player-match-context { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .32rem; }
.team-player-match-context em { display: inline-flex; padding: .22rem .42rem; border-radius: 999px; background: var(--grass-soft); color: #526158; font-size: .58rem; font-style: normal; font-weight: 750; line-height: 1.2; }
.team-lineup-toolbar button[disabled] { opacity: .48; cursor: not-allowed; }

/* Tactiekbord */
.team-tactics-page { display: grid; gap: 1rem; }
.team-tactics-hero { align-items: center; }
.team-tactics-hero-stat { display: grid; min-width: 155px; padding: 1rem 1.2rem; border-radius: 20px; background: rgba(255,255,255,.14); text-align: center; }
.team-tactics-hero-stat strong { color: #fff; font-size: 2.1rem; line-height: 1; }
.team-tactics-hero-stat span { margin-top: .3rem; color: #edf5ef; font-size: .72rem; font-weight: 750; }
.team-tactics-form { --tactics-opponent-bg: #a13a35; --tactics-opponent-text: #ffffff; --tactics-opponent-soft: #fff8f7; --tactics-opponent-border: #ead2d0; --tactics-opponent-label-bg: rgba(102,31,28,.90); --tactics-opponent-label-text: #ffffff; display: grid; gap: 1rem; }
.team-tactics-toolbar-panel { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(360px, 1.45fr) minmax(260px, 1fr); gap: .85rem; align-items: end; padding: 1rem; }
.team-tactics-toolbar-panel label { display: grid; gap: .32rem; color: var(--ink); font-size: .7rem; font-weight: 800; }
.team-tactics-field-controls { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: .55rem; }
.team-tactics-frame-controls,
.team-tactics-play-controls { display: flex; flex-wrap: wrap; gap: .55rem; align-items: end; }
.team-tactics-frame-controls label { flex: 1 1 145px; }
.team-tactics-play-controls label { flex: 0 1 115px; }
.team-tactics-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.team-tactics-board-panel { min-width: 0; padding: 1.1rem; }
.team-tactics-frame-badge { display: inline-flex; padding: .45rem .7rem; border-radius: 999px; background: var(--grass-soft); color: var(--grass-dark); font-size: .7rem; font-weight: 850; white-space: nowrap; }
.team-tactics-pitch { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1.62 / 1; min-height: 560px; border: 5px solid #f2f7f1; border-radius: 24px; background: repeating-linear-gradient(90deg, #43834e 0, #43834e 12.5%, #4b8d57 12.5%, #4b8d57 25%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.66), 0 12px 28px rgba(24,65,32,.12); touch-action: none; }
.team-tactics-pitch::after { content: ""; position: absolute; inset: 18px; border: 2px solid rgba(255,255,255,.82); border-radius: 4px; pointer-events: none; }
.tactics-halfway { position: absolute; z-index: 1; left: 50%; top: 18px; bottom: 18px; width: 2px; background: rgba(255,255,255,.82); transform: translateX(-50%); pointer-events: none; }
.tactics-circle { position: absolute; z-index: 1; left: 50%; top: 50%; width: 19%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.82); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.tactics-circle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.9); transform: translate(-50%,-50%); }
.tactics-box { position: absolute; z-index: 1; top: 24%; width: 17%; height: 52%; border: 2px solid rgba(255,255,255,.82); pointer-events: none; }
.tactics-box-left { left: 18px; border-left: 0; }
.tactics-box-right { right: 18px; border-right: 0; }
.tactics-goal { position: absolute; z-index: 1; top: 39%; width: 18px; height: 22%; border: 2px solid rgba(255,255,255,.82); pointer-events: none; }
.tactics-goal-left { left: 0; border-left: 0; }
.tactics-goal-right { right: 0; border-right: 0; }
.tactics-token { position: absolute; z-index: 4; display: grid; justify-items: center; width: 82px; padding: 0; border: 0; background: transparent; color: #fff; transform: translate(-50%,-50%); cursor: grab; touch-action: none; user-select: none; }
.tactics-token.is-dragging { z-index: 20; cursor: grabbing; transform: translate(-50%,-50%) scale(1.08); }
.tactics-token.is-animating { transition: left .85s ease-in-out, top .85s ease-in-out; }
.tactics-token-avatar { display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: #1d4d29; color: #fff; font-size: .92rem; font-weight: 900; box-shadow: 0 6px 13px rgba(0,0,0,.2); }
.tactics-token.is-opponent .tactics-token-avatar { background: var(--tactics-opponent-bg); color: var(--tactics-opponent-text); }
.tactics-token-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tactics-token-name { display: block; max-width: 82px; margin-top: .25rem; padding: .18rem .38rem; overflow: hidden; border-radius: 7px; background: rgba(20,34,24,.82); font-size: .58rem; font-weight: 850; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 3px 7px rgba(0,0,0,.16); }
.tactics-token.is-opponent .tactics-token-name { background: var(--tactics-opponent-label-bg); color: var(--tactics-opponent-label-text); }
.team-tactics-pitch[data-player-style="shirt"] .tactics-token { width: 92px; }
.team-tactics-pitch[data-player-style="shirt"] .tactics-token-avatar { width: 52px; height: 48px; border-width: 0; border-radius: 10px 10px 12px 12px; clip-path: polygon(18% 6%, 36% 6%, 43% 18%, 57% 18%, 64% 6%, 82% 6%, 94% 26%, 81% 39%, 81% 100%, 19% 100%, 19% 39%, 6% 26%); padding-top: 6px; box-shadow: 0 6px 13px rgba(0,0,0,.22); }
.team-tactics-pitch[data-player-style="shirt"] .tactics-token-avatar img { display: none; }
.team-tactics-pitch[data-player-style="shirt"] .tactics-token-avatar.is-text-only { font-size: .9rem; font-weight: 900; }
.team-tactics-pitch[data-player-style="shirt"] .tactics-token-name { margin-top: .15rem; }
.team-tactics-legend { display: flex; gap: 1rem; margin-top: .7rem; color: var(--muted); font-size: .7rem; font-weight: 750; }
.team-tactics-legend span { display: inline-flex; align-items: center; gap: .38rem; }
.team-tactics-legend i { display: block; width: 12px; height: 12px; border-radius: 50%; }
.team-tactics-legend i.is-own { background: var(--grass-dark); }
.team-tactics-legend i.is-opponent { background: var(--tactics-opponent-bg); }
.team-tactics-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.team-tactics-selection-panel { padding: 1rem; }
.team-tactics-selection-panel > h2 { margin-bottom: .25rem; }
.team-tactics-selection-panel > p { margin-bottom: .7rem; color: var(--muted); font-size: .7rem; }
.team-tactics-slot-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .7rem; max-height: none; overflow: visible; padding-right: 0; }
.team-tactics-slot-list label { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: .45rem; align-items: center; }
.team-tactics-slot-list label > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--grass-soft); color: var(--grass-dark); font-size: .65rem; font-weight: 900; }
.team-tactics-slot-list .paste-input { min-height: 38px; padding: .48rem .58rem; font-size: .72rem; }
.team-tactics-savebar { position: sticky; z-index: 25; bottom: .65rem; box-shadow: 0 12px 30px rgba(23,37,28,.12); }

@media (max-width: 1100px) {
    .team-tactics-toolbar-panel { grid-template-columns: 1fr 1fr; }
    .team-tactics-title-field { grid-column: 1 / -1; }
    .team-tactics-layout { grid-template-columns: 1fr; }
    .team-tactics-pitch { min-height: 500px; }
    .team-tactics-side { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .team-event-row .team-event-alert { margin-left: 0; }
    .team-player-match-context { display: grid; }
    .team-player-match-context em { width: fit-content; }
    .team-tactics-hero-stat { min-width: 110px; padding: .8rem; }
    .team-tactics-toolbar-panel { grid-template-columns: 1fr; padding: .8rem; }
    .team-tactics-title-field { grid-column: auto; }
    .team-tactics-field-controls { grid-template-columns: 1fr 1fr; }
    .team-tactics-frame-controls,
    .team-tactics-play-controls { display: grid; grid-template-columns: 1fr 1fr; }
    .team-tactics-frame-controls label,
    .team-tactics-play-controls label { grid-column: 1 / -1; }
    .team-tactics-board-panel { padding: .7rem; overflow: hidden; }
    .team-tactics-pitch { min-height: 390px; aspect-ratio: 1 / 1.05; }
    .tactics-token { width: 58px; }
    .tactics-token-avatar { width: 35px; height: 35px; border-width: 2px; font-size: .72rem; }
    .tactics-token-name { max-width: 58px; font-size: .48rem; padding: .15rem .25rem; }
    .team-tactics-pitch[data-player-style="shirt"] .tactics-token { width: 66px; }
    .team-tactics-pitch[data-player-style="shirt"] .tactics-token-avatar { width: 38px; height: 36px; font-size: .7rem; }
    .team-tactics-side { grid-template-columns: 1fr; }
    .team-tactics-slot-list { grid-template-columns: 1fr; max-height: none; }
    .team-tactics-savebar { bottom: .35rem; }
}

/* Opkomstinformatie direct in de wedstrijdopstelling */
.team-bench-player-copy { min-width: 0; }
.team-lineup-player-stats {
    display: grid;
    gap: .18rem;
    margin-top: .32rem;
}
.team-lineup-player-stats em {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #536057;
    font-size: .56rem;
    font-style: normal;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.team-lineup-player-stats em:last-child {
    width: fit-content;
    padding: .16rem .34rem;
    border-radius: 999px;
    background: #e8f3e6;
    color: #2f6f3d;
    font-weight: 850;
}
.team-lineup-token-stats {
    display: flex;
    justify-content: center;
    margin-top: .18rem;
    pointer-events: none;
}
.team-lineup-token-stats em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: .13rem .34rem;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 999px;
    background: rgba(245,250,243,.94);
    color: #2f6f3d;
    box-shadow: 0 2px 6px rgba(16,51,24,.15);
    font-size: .52rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}
@media (max-width: 620px) {
    .team-lineup-player-stats em { font-size: .58rem; }
    .team-lineup-token-stats em { min-width: 36px; font-size: .48rem; }
}

/* Uitgebreid tactiekbord: slepen, bal, half veld en oefeningen tekenen */
.team-tactics-toolbar-panel {
    grid-template-columns: minmax(190px, .85fr) minmax(145px, .45fr) minmax(360px, 1.35fr) minmax(250px, .9fr);
}
.team-tactics-field-controls label { display: grid; gap: .32rem; color: var(--ink); font-size: .7rem; font-weight: 800; }
.team-tactics-drawing-panel {
    display: grid;
    grid-template-columns: minmax(220px, .65fr) minmax(0, 1.8fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}
.team-tactics-drawing-copy h2 { margin: .14rem 0 .25rem; }
.team-tactics-drawing-copy p { margin: 0; color: var(--muted); font-size: .72rem; }
.team-tactics-drawing-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; align-items: center; }
.tactics-tool {
    min-height: 38px;
    padding: .5rem .7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: #465149;
    font: inherit;
    font-size: .68rem;
    font-weight: 850;
    cursor: pointer;
}
.tactics-tool:hover { border-color: #9fb09d; }
.tactics-tool.is-active { border-color: var(--grass-dark); background: var(--grass-soft); color: var(--grass-dark); box-shadow: inset 0 0 0 1px var(--grass-dark); }
.tactics-color-picker { display: grid; grid-template-columns: auto 105px; gap: .4rem; align-items: center; color: var(--muted); font-size: .65rem; font-weight: 800; }
.tactics-color-picker .paste-input { min-height: 38px; padding: .45rem .55rem; }

.team-tactics-pitch { isolation: isolate; }
.team-tactics-pitch[data-field-mode="full"] .tactics-half-markings { display: none; }
.team-tactics-pitch[data-field-mode="half"] {
    aspect-ratio: 1.28 / 1;
    min-height: 680px;
    background: repeating-linear-gradient(90deg, #43834e 0, #43834e 10%, #4b8d57 10%, #4b8d57 20%);
}
.team-tactics-pitch[data-field-mode="half"] .tactics-full-markings { display: none; }
.tactics-full-markings,
.tactics-half-markings { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.tactics-half-line { position: absolute; left: 18px; top: 18px; bottom: 18px; width: 2px; background: rgba(255,255,255,.82); }
.tactics-half-circle { position: absolute; left: 18px; top: 50%; width: 24%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.82); border-radius: 50%; transform: translate(-50%,-50%); }
.tactics-half-circle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.9); transform: translate(-50%,-50%); }
.tactics-half-box { position: absolute; right: 18px; top: 22%; width: 28%; height: 56%; border: 2px solid rgba(255,255,255,.82); border-right: 0; }
.tactics-half-goal { position: absolute; right: 0; top: 39%; width: 18px; height: 22%; border: 2px solid rgba(255,255,255,.82); border-right: 0; }
.tactics-half-arc { position: absolute; right: 21%; top: 50%; width: 18%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.82); border-radius: 50%; transform: translateY(-50%); }
.tactics-drawing-layer { position: absolute; z-index: 3; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); overflow: visible; pointer-events: none; }
.tactics-token-layer { position: absolute; z-index: 5; inset: 0; }
.team-tactics-pitch.is-drawing { cursor: crosshair; }
.team-tactics-pitch.is-drawing .tactics-token,
.team-tactics-pitch.is-drawing .tactics-ball-token { pointer-events: none; }
.team-tactics-pitch.is-drop-target { box-shadow: inset 0 0 0 5px rgba(255,216,77,.85), 0 12px 28px rgba(24,65,32,.12); }

.tactics-token[hidden],
.tactics-ball-token[hidden] { display: none !important; }
.tactics-token { z-index: 6; }
.tactics-token-remove {
    position: absolute;
    z-index: 3;
    top: -7px;
    right: 7px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #26352a;
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease;
}
.tactics-token:hover .tactics-token-remove,
.tactics-token:focus-within .tactics-token-remove,
.tactics-ball-token:hover .tactics-token-remove,
.tactics-ball-token:focus-within .tactics-token-remove { opacity: 1; }
.tactics-ball-token {
    position: absolute;
    z-index: 8;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    cursor: grab;
    touch-action: none;
    user-select: none;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,.28));
}
.tactics-ball-token > span { font-size: 2rem; line-height: 1; }
.tactics-ball-token.is-dragging { z-index: 25; cursor: grabbing; transform: translate(-50%,-50%) scale(1.14); }
.tactics-ball-token.is-animating { transition: left .85s ease-in-out, top .85s ease-in-out; }
.tactics-ball-token .tactics-token-remove { right: -6px; top: -7px; }
.team-tactics-legend i.is-ball { background: #fff; border: 2px solid #222; }
.team-tactics-field-count { margin-left: auto; color: var(--grass-dark); font-weight: 850; }

.team-tactics-side { align-items: start; }
.team-tactics-selection-panel .team-panel-head { align-items: flex-start; margin-bottom: .7rem; }
.team-tactics-player-palette {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    max-height: 460px;
    overflow-y: auto;
    padding: .1rem .2rem .1rem 0;
}
.tactics-palette-player {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: .55rem;
    align-items: center;
    min-width: 0;
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    color: inherit;
    text-align: left;
    cursor: grab;
}
.tactics-palette-player:hover { border-color: #9fb09d; background: #f8faf7; }
.tactics-palette-player.is-dragging { opacity: .55; }
.tactics-palette-player.is-used { background: var(--grass-soft); opacity: .68; cursor: default; }
.tactics-palette-player > span:nth-child(2) { min-width: 0; }
.tactics-palette-player strong,
.tactics-palette-player small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tactics-palette-player strong { font-size: .72rem; }
.tactics-palette-player small { margin-top: .08rem; color: var(--muted); font-size: .58rem; }
.tactics-palette-player em,
.tactics-palette-opponent em,
.tactics-material-card em { color: var(--grass-dark); font-size: .9rem; font-style: normal; font-weight: 900; }
.tactics-palette-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--grass-dark);
    color: #fff;
    font-size: .75rem;
    font-weight: 900;
}
.tactics-palette-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tactics-palette-avatar i {
    position: absolute;
    right: -1px;
    bottom: -1px;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #17251c;
    color: #fff;
    font-size: .46rem;
    font-style: normal;
}
.team-tactics-opponent-palette { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .48rem; }
.tactics-palette-opponent {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr) auto;
    gap: .42rem;
    align-items: center;
    padding: .5rem;
    border: 1px solid var(--tactics-opponent-border);
    border-radius: 12px;
    background: var(--tactics-opponent-soft);
    color: var(--ink);
    cursor: grab;
    text-align: left;
}
.tactics-palette-opponent > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tactics-opponent-bg); color: var(--tactics-opponent-text); font-size: .7rem; font-weight: 900; }
.tactics-palette-opponent strong { min-width: 0; overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.tactics-palette-opponent.is-used { opacity: .6; cursor: default; }
.team-tactics-materials { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.tactics-material-card {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: .65rem;
    align-items: center;
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #f8faf7;
    text-align: left;
    cursor: grab;
}
.tactics-material-card strong,
.tactics-material-card small { display: block; }
.tactics-material-card strong { font-size: .74rem; }
.tactics-material-card small { color: var(--muted); font-size: .6rem; }
.tactics-material-card.is-used { opacity: .6; cursor: default; }
.tactics-material-ball { display: grid; place-items: center; width: 38px; height: 38px; font-size: 1.7rem; }
.team-tactics-save-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; }

@media (max-width: 1180px) {
    .team-tactics-toolbar-panel { grid-template-columns: 1fr 1fr; }
    .team-tactics-title-field { grid-column: 1 / -1; }
    .team-tactics-player-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .team-tactics-opponent-palette { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .team-tactics-drawing-panel { grid-template-columns: 1fr; }
    .team-tactics-drawing-tools { justify-content: flex-start; }
    .team-tactics-pitch[data-field-mode="half"] { min-height: 580px; }
}
@media (max-width: 720px) {
    .team-tactics-toolbar-panel { grid-template-columns: 1fr; }
    .team-tactics-title-field { grid-column: auto; }
    .team-tactics-field-controls { grid-template-columns: 1fr; }
    .team-tactics-drawing-panel { padding: .8rem; }
    .team-tactics-drawing-tools { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .tactics-tool { width: 100%; }
    .tactics-color-picker { grid-column: 1 / -1; grid-template-columns: auto 1fr; }
    .team-tactics-pitch[data-field-mode="full"] { min-height: 420px; aspect-ratio: 1 / 1.08; }
    .team-tactics-pitch[data-field-mode="half"] { min-height: 500px; aspect-ratio: .95 / 1; }
    .team-tactics-player-palette { grid-template-columns: 1fr; max-height: 400px; }
    .team-tactics-opponent-palette { grid-template-columns: 1fr 1fr; }
    .tactics-token-remove,
    .tactics-ball-token .tactics-token-remove { opacity: 1; }
    .team-tactics-field-count { width: 100%; margin-left: 0; }
    .team-tactics-save-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
    .team-tactics-save-actions .btn { width: 100%; }
}
@media (max-width: 440px) {
    .team-tactics-opponent-palette { grid-template-columns: 1fr; }
}
.tactics-drawing-layer { inset: 0; width: 100%; height: 100%; }


/* ---- Clublogo en automatische teamkleuren -------------------- */
.team-branding-panel { overflow: hidden; }
.team-branding-preview { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .85rem; align-items: center; margin: .85rem 0; padding: .75rem; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, var(--grass-soft), #fff 68%); }
.team-branding-logo-preview { display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(23,37,28,.08); }
.team-branding-logo-preview img { width: 100%; height: 100%; object-fit: contain; padding: .3rem; }
.team-branding-logo-preview b { display: grid; place-items: center; width: 100%; height: 100%; background: var(--grass); color: var(--on-grass); font-family: "Fraunces", serif; font-size: 2rem; }
.team-branding-preview-copy strong, .team-branding-preview-copy small { display: block; }
.team-branding-preview-copy strong { color: var(--ink); font-size: .9rem; }
.team-branding-preview-copy small { margin-top: .15rem; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.team-branding-form { display: grid; gap: .75rem; }
.team-branding-upload { display: grid; gap: .3rem; padding: .75rem; border: 1.5px dashed var(--line); border-radius: 13px; background: #fff; cursor: pointer; }
.team-branding-upload strong { font-size: .8rem; }
.team-branding-upload small { color: var(--muted); font-size: .66rem; }
.team-branding-upload input { width: 100%; font-size: .68rem; }
.team-branding-colors { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.team-branding-color { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .55rem; align-items: center; padding: .55rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.team-branding-color input[type="color"] { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: transparent; cursor: pointer; }
.team-branding-color span { min-width: 0; }
.team-branding-color strong, .team-branding-color small { display: block; }
.team-branding-color strong { font-size: .72rem; }
.team-branding-color small { color: var(--muted); font-size: .59rem; }
.team-branding-actions { display: grid; grid-template-columns: 1fr auto; gap: .55rem; }
.team-branding-status { min-height: 1.2em; margin: 0; color: var(--muted); font-size: .65rem; }
.team-branding-status.is-loading { color: var(--grass-dark); }
.team-branding-status.is-error { color: var(--danger); }
.has-team-theme .team-hero, .has-team-theme .team-dashboard-hero { position: relative; overflow: hidden; }
.has-team-theme .team-hero::after, .has-team-theme .team-dashboard-hero::after { content: ""; position: absolute; width: 240px; height: 240px; right: -90px; top: -120px; border-radius: 50%; background: rgba(var(--accent-rgb), .11); pointer-events: none; }

@media (max-width: 520px) {
    .team-branding-preview { grid-template-columns: 58px minmax(0, 1fr); }
    .team-branding-logo-preview { width: 58px; height: 58px; border-radius: 14px; }
    .team-branding-colors, .team-branding-actions { grid-template-columns: 1fr; }
    .wordmark-copy small { display: none; }
}

/* Clubstijl v2: primaire kleur voor de volledige groene sfeer, secundair voor CTA's */
.btn-solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-solid:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.has-team-theme .team-hero,
.has-team-theme .team-dashboard-hero,
.has-team-theme .team-tactics-hero { background: linear-gradient(135deg, var(--grass-dark), var(--grass)); }
.has-team-theme .team-event-type,
.has-team-theme .season-event-chip,
.has-team-theme .team-avatar,
.has-team-theme .account-team-card-icon,
.has-team-theme .team-lineup-player-stats em:last-child,
.has-team-theme .team-lineup-token-stats em,
.has-team-theme .team-player-match-context em { background: var(--grass-soft); color: var(--grass-dark); }
.has-team-theme .team-event-type.is-match,
.has-team-theme .season-event-chip.is-match { background: var(--accent-soft); color: var(--accent-dark); }
.has-team-theme .team-duty-generator-summary,
.has-team-theme .team-duty-match-copy dl > div,
.has-team-theme .tactics-material-card,
.has-team-theme .tactics-palette-player:hover { background: var(--grass-soft); }
.has-team-theme .team-tactics-pitch {
    background: repeating-linear-gradient(90deg, var(--grass-dark) 0, var(--grass-dark) 12.5%, var(--grass) 12.5%, var(--grass) 25%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.66), 0 12px 28px rgba(var(--grass-rgb),.18);
}
.has-team-theme .team-tactics-pitch[data-field-mode="half"] {
    background: repeating-linear-gradient(90deg, var(--grass-dark) 0, var(--grass-dark) 10%, var(--grass) 10%, var(--grass) 20%);
}
.has-team-theme .tactics-token.is-own .tactics-token-avatar,
.has-team-theme .tactics-palette-avatar { background: var(--grass-dark); }
.has-team-theme input[type="checkbox"],
.has-team-theme input[type="radio"] { accent-color: var(--grass); }

/* Tactiekbibliotheek */
.tactics-library-panel { padding: 1rem; }
.tactics-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.tactics-library-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .65rem; align-items: center; padding: .75rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: inherit; text-decoration: none; }
.tactics-library-card:hover { border-color: var(--grass); box-shadow: 0 8px 20px rgba(var(--grass-rgb),.10); }
.tactics-library-card.is-active { border-color: var(--grass); background: var(--grass-soft); box-shadow: inset 0 0 0 1px var(--grass); }
.tactics-library-card > span:nth-child(2) { min-width: 0; }
.tactics-library-card strong, .tactics-library-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tactics-library-card strong { font-size: .78rem; }
.tactics-library-card small { margin-top: .18rem; color: var(--muted); font-size: .62rem; }
.tactics-library-card em { color: var(--grass-dark); font-size: .62rem; font-style: normal; font-weight: 850; white-space: nowrap; }
.tactics-library-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--grass-soft); font-size: 1.15rem; }
.tactics-delete-form { display: flex; justify-content: flex-end; margin-top: -.35rem; }

/* Tekenobjecten achteraf selecteren en verplaatsen */
.tactics-width-picker { display: grid; grid-template-columns: auto 105px; gap: .4rem; align-items: center; color: var(--muted); font-size: .65rem; font-weight: 800; }
.tactics-width-picker .paste-input { min-height: 38px; padding: .45rem .55rem; }
.tactics-drawing-object { pointer-events: all; cursor: move; }
.tactics-drawing-object .tactics-drawing-hit { pointer-events: stroke; }
.tactics-drawing-object.is-selected > line:not(.tactics-drawing-hit),
.tactics-drawing-object.is-selected > polyline:not(.tactics-drawing-hit) { filter: drop-shadow(0 0 1px #17251c) drop-shadow(0 0 2px #fff); }
.team-tactics-pitch[data-active-tool="select"] .tactics-drawing-object { pointer-events: all; }
.team-tactics-pitch:not([data-active-tool="select"]) .tactics-drawing-object { pointer-events: none; }

/* Correcte veldmarkeringen */
.tactics-goal-box { position: absolute; z-index: 1; top: 37%; width: 7%; height: 26%; border: 2px solid rgba(255,255,255,.82); pointer-events: none; }
.tactics-goal-box-left { left: 18px; border-left: 0; }
.tactics-goal-box-right { right: 18px; border-right: 0; }
.tactics-penalty-spot { position: absolute; z-index: 1; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.9); transform: translateY(-50%); }
.tactics-penalty-spot-left { left: 12.5%; }
.tactics-penalty-spot-right { right: 12.5%; }
.team-tactics-pitch[data-field-mode="half"] { aspect-ratio: 1.36 / 1; min-height: 680px; }
.tactics-half-line { left: 18px; }
.tactics-half-centre-arc { position: absolute; left: 18px; top: 50%; width: 22%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.82); border-radius: 50%; transform: translate(-50%,-50%); }
.tactics-half-centre-arc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.9); transform: translate(-50%,-50%); }
.tactics-half-box { right: 18px; top: 22%; width: 31%; height: 56%; border: 2px solid rgba(255,255,255,.82); border-right: 0; }
.tactics-half-goal-box { position: absolute; right: 18px; top: 37%; width: 12%; height: 26%; border: 2px solid rgba(255,255,255,.82); border-right: 0; }
.tactics-half-goal { right: 0; top: 39%; width: 18px; height: 22%; border: 2px solid rgba(255,255,255,.82); border-right: 0; }
.tactics-half-penalty-spot { position: absolute; right: 23%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.9); transform: translate(50%,-50%); }
.tactics-half-penalty-arc { position: absolute; right: 21%; top: 50%; width: 15%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.82); border-radius: 50%; transform: translateY(-50%); clip-path: inset(0 0 0 48%); }

.training-exercise-row.is-tactic-item { border-color: rgba(var(--grass-rgb),.28); background: linear-gradient(135deg, var(--grass-soft), #fff 72%); }

@media (max-width: 1050px) { .tactics-library-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) {
    .tactics-library-grid { grid-template-columns: 1fr; }
    .tactics-library-panel .team-panel-head { align-items: stretch; }
    .tactics-library-panel .team-panel-head .btn { width: 100%; }
    .team-tactics-pitch[data-field-mode="half"] { min-height: 500px; aspect-ratio: .95 / 1; }
}

/* ============================================================
   Grote teamupdate: rustige clubstijl, dashboard en mobiele modus
   ============================================================ */

/* De voetbalvelden blijven bewust echte veldgroene kleuren houden. */
.has-team-theme .team-tactics-pitch,
.has-team-theme .team-tactics-pitch[data-field-mode="half"] {
    background: repeating-linear-gradient(90deg, #397b47 0, #397b47 12.5%, #438b51 12.5%, #438b51 25%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.66), 0 12px 28px rgba(24,65,32,.14);
}
.has-team-theme .team-football-pitch {
    background:
        linear-gradient(to bottom, rgba(255,255,255,.055) 0 10%, transparent 10% 20%, rgba(255,255,255,.055) 20% 30%, transparent 30% 40%, rgba(255,255,255,.055) 40% 50%, transparent 50% 60%, rgba(255,255,255,.055) 60% 70%, transparent 70% 80%, rgba(255,255,255,.055) 80% 90%, transparent 90%),
        #397b47;
}

/* Clubkleuren zonder botsende kleurgradients. */
.has-team-theme .team-hero,
.has-team-theme .team-dashboard-hero,
.has-team-theme .team-tactics-hero,
.has-team-theme .team-stats-hero,
.has-team-theme .team-event-hero { background: var(--grass); }
.has-team-theme .team-hero::after,
.has-team-theme .team-dashboard-hero::after { background: rgba(255,255,255,.10); }
.has-team-theme .team-summary-primary,
.has-team-theme .season-dashboard-next,
.has-team-theme .team-branding-preview,
.has-team-theme .training-exercise-row.is-tactic-item,
.has-team-theme .team-duty-poster-frame { background: var(--grass-soft); border-color: rgba(var(--grass-rgb),.24); }
.has-team-theme .team-highlight-card { background: #fff; }
.has-team-theme .season-last-match { background: var(--grass-dark); }
.has-team-theme .btn-solid,
.has-team-theme button.btn-solid,
.has-team-theme a.btn-solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 7px 18px rgba(var(--accent-rgb),.18); }
.has-team-theme .btn-solid:hover,
.has-team-theme button.btn-solid:hover,
.has-team-theme a.btn-solid:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.has-team-theme .team-section-nav a.is-active,
.has-team-theme .team-action-symbol,
.has-team-theme .team-count-badge:not(.is-alert) { background: var(--grass-soft); color: var(--grass-dark); }
.has-team-theme .team-count-badge.is-alert { background: var(--accent-soft); color: var(--accent-dark); }

/* Correct half veld: middenlijn links, strafschopgebied rechts en D buiten de zestien. */
.team-tactics-pitch[data-field-mode="half"] { aspect-ratio: 1.48 / 1; min-height: 620px; }
.tactics-half-line { left: 18px; top: 18px; bottom: 18px; }
.tactics-half-centre-arc {
    left: 18px; top: 50%; width: 25%; aspect-ratio: 1;
    border: 2px solid rgba(255,255,255,.84); border-radius: 50%;
    transform: translate(-50%,-50%);
}
.tactics-half-centre-arc::after { width: 6px; height: 6px; }
.tactics-half-box { right: 18px; top: 20%; width: 34%; height: 60%; border: 2px solid rgba(255,255,255,.84); border-right: 0; }
.tactics-half-goal-box { right: 18px; top: 36%; width: 13%; height: 28%; border: 2px solid rgba(255,255,255,.84); border-right: 0; }
.tactics-half-goal { right: 0; top: 39%; width: 18px; height: 22%; }
.tactics-half-penalty-spot { right: 21%; top: 50%; width: 6px; height: 6px; transform: translate(50%,-50%); }
.tactics-half-penalty-arc {
    right: 21%; top: 50%; width: 21%; aspect-ratio: 1;
    border: 2px solid rgba(255,255,255,.84); border-radius: 50%;
    transform: translate(50%,-50%);
    clip-path: inset(0 50% 0 0);
}

/* Homepage: Mijn Team staat centraal. */
.home-team-hero { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(310px,.85fr); gap: 1rem; align-items: stretch; padding: 2rem 0 1.2rem; }
.home-team-hero-copy { display: flex; flex-direction: column; justify-content: center; min-height: 390px; padding: clamp(1.5rem,4vw,3.25rem); border-radius: 28px; background: var(--ink); color: #fff; box-shadow: var(--shadow); }
.home-team-hero-copy h1 { max-width: 720px; margin: .45rem 0 .85rem; font: 900 clamp(2.45rem,6vw,4.9rem)/.96 "Fraunces",serif; letter-spacing: -.045em; }
.home-team-hero-copy h1 em { color: var(--accent); font-style: italic; }
.home-team-hero-copy p { max-width: 650px; margin: 0; color: rgba(255,255,255,.78); font-size: 1.06rem; }
.home-eyebrow { display: block; color: var(--grass); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.home-team-hero-copy .home-eyebrow { color: var(--accent); }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.home-team-hero-copy .btn-ghost { border-color: rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.07); }
.home-team-overview-card { display: grid; grid-template-rows: auto 1fr auto; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.home-team-card-head { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .55rem; }
.home-team-card-head > img,.home-team-card-head > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; object-fit: contain; background: var(--grass-soft); color: var(--grass-dark); font-weight: 900; }
.home-team-card-head small,.home-team-card-head strong { display: block; }
.home-team-card-head small { color: var(--muted); font-size: .65rem; }
.home-team-card-head strong { font-size: 1rem; }
.home-team-card-head a { color: var(--grass-dark); font-size: .68rem; font-weight: 800; }
.home-next-event { display: flex; flex-direction: column; justify-content: center; min-height: 190px; padding: 1.25rem; border-radius: 20px; background: var(--grass-soft); color: inherit; text-decoration: none; }
.home-next-event span { color: var(--grass-dark); font-size: .68rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.home-next-event strong { margin-top: .35rem; font: 800 1.45rem/1.1 "Fraunces",serif; }
.home-next-event small { margin-top: .45rem; color: var(--muted); }
.home-team-mini-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .4rem; }
.home-team-mini-stats div { padding: .65rem .35rem; border-radius: 13px; background: #f7f8f5; text-align: center; }
.home-team-mini-stats strong,.home-team-mini-stats span { display: block; }
.home-team-mini-stats strong { font-size: 1.05rem; }
.home-team-mini-stats span { color: var(--muted); font-size: .58rem; }
.home-feature-stack { display: grid; gap: .65rem; align-content: center; padding: 1rem; }
.home-feature-stack article { display: grid; grid-template-columns: 50px 1fr; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.home-feature-stack article > span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--grass-soft); color: var(--grass-dark); font-weight: 900; }
.home-feature-stack p { margin: .15rem 0 0; color: var(--muted); font-size: .76rem; }
.home-team-actions-section,.home-exercise-section,.home-tiktok-add { margin-top: 1.6rem; }
.home-action-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; }
.home-action-grid a { min-height: 180px; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-decoration: none; transition: transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.home-action-grid a:hover { transform: translateY(-2px); border-color: var(--grass); box-shadow: var(--shadow); }
.home-action-grid span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: .7rem; border-radius: 13px; background: var(--grass-soft); color: var(--grass-dark); font-weight: 900; }
.home-action-grid strong { display: block; font-size: .88rem; }
.home-action-grid p { margin: .3rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.home-exercise-section { padding: 1.2rem 0; }
.home-exercise-section .feed-head { align-items: end; }
.home-exercise-section .feed-head h2,.home-team-actions-section h2,.home-tiktok-add h2 { margin: .15rem 0 0; font: 800 clamp(1.7rem,4vw,2.5rem)/1 "Fraunces",serif; }
.home-exercise-section .feed-head p { max-width: 650px; margin: .4rem 0 0; color: var(--muted); font-size: .8rem; }
.home-tiktok-add { display: grid; grid-template-columns: .72fr 1.28fr; gap: 1rem; padding: 1rem; border-radius: 24px; background: var(--grass-soft); }
.home-tiktok-copy { padding: 1rem; align-self: center; }
.home-tiktok-copy p { color: var(--muted); }
.home-tiktok-form { margin: 0; }
.home-tiktok-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.home-tiktok-fields label,.home-tiktok-form > label { font-size: .72rem; font-weight: 750; }

/* Actiedashboard */
.team-action-dashboard { margin: 1rem 0; padding: 1rem; }
.team-count-badge.is-alert { background: var(--accent-soft); color: var(--accent-dark); }
.team-action-list { display: grid; gap: .45rem; }
.team-action-item { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .7rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; }
.team-action-item:hover { border-color: var(--grass); }
.team-action-symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--grass-soft); color: var(--grass-dark); font-weight: 900; }
.team-action-item.is-priority-4 .team-action-symbol { background: #fde8e8; color: var(--danger); }
.team-action-item strong { display: block; font-size: .8rem; }
.team-action-item p { margin: .12rem 0 0; color: var(--muted); font-size: .67rem; }
.team-action-item > b { color: var(--grass-dark); font-size: .65rem; }
.team-action-complete { display: flex; gap: .7rem; align-items: center; padding: .9rem; border-radius: 14px; background: var(--grass-soft); }
.team-action-complete > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--grass); color: var(--on-grass); font-weight: 900; }
.team-action-complete p { margin: .1rem 0 0; color: var(--muted); font-size: .7rem; }

/* Geschiedenis */
.team-history-page,.team-player-profile-page { padding-top: .35rem; }
.team-history-panel { padding: 1rem; }
.team-history-list { display: grid; gap: .55rem; }
.team-history-card { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: .8rem; align-items: center; padding: .85rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.team-history-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--grass-soft); color: var(--grass-dark); font-weight: 900; }
.team-history-copy span,.team-history-copy small { color: var(--muted); font-size: .62rem; }
.team-history-copy h3 { margin: .08rem 0; font-size: .9rem; }
.team-history-copy p { margin: 0; font-size: .7rem; }
.team-history-actions { display: flex; gap: .4rem; align-items: center; }

/* Spelersprofiel */
.team-player-profile-hero { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1rem; align-items: center; padding: 1.2rem; border-radius: 22px; background: var(--grass-soft); }
.team-player-photo-profile { width: 94px; height: 94px; border-radius: 24px; font-size: 2rem; }
.team-player-profile-hero h1 { margin: .15rem 0; font: 900 clamp(2rem,5vw,3.2rem)/1 "Fraunces",serif; }
.team-player-profile-hero p { margin: 0; color: var(--muted); }
.team-player-profile-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: .65rem; margin: .75rem 0; }
.team-player-profile-stats article { padding: .85rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.team-player-profile-stats span,.team-player-profile-stats small,.team-player-profile-stats strong { display: block; }
.team-player-profile-stats span { color: var(--muted); font-size: .62rem; }
.team-player-profile-stats strong { margin: .15rem 0; font-size: 1.55rem; }
.team-player-profile-stats small { color: var(--muted); font-size: .62rem; }
.team-player-profile-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: .75rem; }
.team-player-event-list { display: grid; gap: .4rem; }
.team-player-event-list a { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: .65rem; align-items: center; padding: .65rem; border: 1px solid var(--line); border-radius: 13px; color: inherit; text-decoration: none; }
.team-player-event-list strong,.team-player-event-list small { display: block; }
.team-player-event-list small { color: var(--muted); font-size: .62rem; }
.team-player-event-list > a > span:last-child { font-size: .65rem; font-weight: 800; }
.team-player-notes-panel { padding: 1rem; }
.team-player-notes-panel form { display: grid; gap: .65rem; }
.team-player-profile-link { color: inherit; text-decoration: none; }
.team-player-profile-button { display: inline-block; margin-top: .25rem; }

/* Wedstrijddagmodus */
.matchday-page { max-width: 820px; margin: 0 auto; padding-bottom: 5rem; }
.matchday-topbar { display: flex; justify-content: space-between; gap: .7rem; padding: .6rem 0; color: var(--muted); font-size: .68rem; font-weight: 750; }
.matchday-hero { padding: 1.2rem; border-radius: 22px; background: var(--ink); color: #fff; text-align: center; }
.matchday-hero > span { color: var(--accent); font-size: .65rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.matchday-hero h1 { margin: .25rem 0; font: 900 clamp(1.65rem,6vw,2.8rem)/1 "Fraunces",serif; }
.matchday-hero p { margin: .3rem 0 0; color: rgba(255,255,255,.75); }
.matchday-form { display: grid; gap: .65rem; margin-top: .65rem; }
.matchday-score-card { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; padding: .85rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.matchday-score-card > div { display: flex; align-items: end; justify-content: center; gap: .6rem; }
.matchday-score-card label { display: grid; gap: .2rem; color: var(--muted); font-size: .63rem; font-weight: 800; }
.matchday-score-card input[type="number"] { width: 82px; padding: .65rem; border: 1px solid var(--line); border-radius: 13px; font-size: 1.4rem; font-weight: 900; text-align: center; }
.matchday-score-card b { padding-bottom: .65rem; font-size: 1.5rem; }
.matchday-lineup-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .8rem; border-radius: 17px; background: var(--grass-soft); }
.matchday-lineup-summary span,.matchday-lineup-summary strong { display: block; }
.matchday-lineup-summary span { color: var(--grass-dark); font-size: .62rem; font-weight: 850; text-transform: uppercase; }
.matchday-lineup-summary p { margin: .25rem 0 0; color: var(--muted); font-size: .65rem; }
.matchday-player-list { display: grid; gap: .5rem; }
.matchday-player-card { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(280px,1.3fr) auto; gap: .65rem; align-items: center; padding: .65rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.matchday-player-head { display: flex; align-items: center; gap: .55rem; }
.matchday-player-head strong,.matchday-player-head small { display: block; }
.matchday-player-head small { color: var(--muted); font-size: .6rem; }
.matchday-statuses { display: grid; grid-template-columns: repeat(5,1fr); gap: .25rem; }
.matchday-statuses input { position: absolute; opacity: 0; }
.matchday-statuses span { display: block; padding: .45rem .25rem; border: 1px solid var(--line); border-radius: 9px; text-align: center; font-size: .57rem; font-weight: 750; cursor: pointer; }
.matchday-statuses input:checked + span { border-color: var(--grass); background: var(--grass-soft); color: var(--grass-dark); }
.matchday-player-stats { display: flex; gap: .35rem; }
.matchday-player-stats label { color: var(--muted); font-size: .55rem; font-weight: 800; text-align: center; }
.matchday-player-stats input { display: block; width: 58px; margin-top: .15rem; }
.matchday-savebar { position: sticky; bottom: .55rem; z-index: 20; display: flex; justify-content: space-between; gap: .7rem; align-items: center; padding: .7rem; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(23,37,28,.16); backdrop-filter: blur(10px); }
.matchday-savebar strong,.matchday-savebar span { display: block; }
.matchday-savebar span { color: var(--muted); font-size: .6rem; }
.matchday-savebar > div:last-child { display: flex; gap: .35rem; }
.team-event-save-actions { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.team-matchday-link { white-space: nowrap; }
.team-autosave-status.is-offline,.team-autosave-status.is-error { color: var(--danger); }
.team-autosave-status.is-conflict { color: var(--accent-dark); }

@media (max-width: 900px) {
    .home-team-hero,.home-tiktok-add,.team-player-profile-layout { grid-template-columns: 1fr; }
    .home-action-grid { grid-template-columns: 1fr 1fr; }
    .home-team-hero-copy { min-height: 330px; }
    .team-player-profile-stats { grid-template-columns: 1fr 1fr; }
    .team-history-card { grid-template-columns: 42px minmax(0,1fr); }
    .team-history-actions { grid-column: 2; }
    .matchday-player-card { grid-template-columns: 1fr; }
    .matchday-statuses { order: 3; }
    .matchday-player-stats { position: absolute; right: .75rem; top: .65rem; }
    .matchday-player-card { position: relative; padding-right: 145px; }
}
@media (max-width: 620px) {
    .home-team-hero { padding-top: .7rem; }
    .home-team-hero-copy { min-height: auto; padding: 1.25rem; }
    .home-team-hero-copy h1 { font-size: 2.55rem; }
    .home-action-grid,.home-tiktok-fields { grid-template-columns: 1fr; }
    .home-action-grid a { min-height: auto; }
    .home-team-mini-stats { grid-template-columns: repeat(3,1fr); }
    .team-action-item { grid-template-columns: 38px minmax(0,1fr); }
    .team-action-item > b { display: none; }
    .team-player-profile-hero { grid-template-columns: auto minmax(0,1fr); }
    .team-player-profile-hero .team-season-picker { grid-column: 1 / -1; }
    .team-player-photo-profile { width: 72px; height: 72px; }
    .team-player-profile-stats { gap: .4rem; }
    .team-history-actions { flex-direction: column; align-items: stretch; }
    .team-history-actions .btn { width: 100%; }
    .matchday-score-card { grid-template-columns: 1fr; }
    .matchday-player-card { padding-right: .65rem; }
    .matchday-player-stats { position: static; }
    .matchday-statuses { grid-template-columns: repeat(3,1fr); }
    .matchday-savebar { align-items: stretch; flex-direction: column; }
    .matchday-savebar > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
    .matchday-savebar .btn-solid { grid-column: 1 / -1; }
    .team-event-save-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .team-event-save-actions .btn { width: 100%; }
}
/* De strafschopboog ligt buiten de zestien en sluit aan op de rand richting middenlijn. */
.tactics-half-penalty-arc {
    right: calc(34% + 16px);
    top: 50%;
    width: 10%;
    height: 24%;
    aspect-ratio: auto;
    border: 2px solid rgba(255,255,255,.84);
    border-right: 0;
    border-radius: 100% 0 0 100%;
    transform: translateY(-50%);
    clip-path: none;
}
.has-team-theme { background-image: none; background-color: var(--paper); }

/* Vergelijking met historische seizoenscijfers */
.team-stats-page:not(.is-comparing) [data-compare-only] { display: none !important; }
.team-stats-compare-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 18px; background: var(--grass-soft); }
.team-stats-compare-copy h2 { margin: .15rem 0 .25rem; font-size: 1.15rem; }
.team-stats-compare-copy p { margin: 0; color: var(--muted); font-size: .76rem; }
.team-stats-compare-switch { display: inline-flex; align-items: center; gap: .6rem; min-width: max-content; cursor: pointer; }
.team-stats-compare-switch input { position: absolute; opacity: 0; pointer-events: none; }
.team-stats-compare-switch > span { position: relative; width: 48px; height: 27px; border-radius: 999px; background: #cfd7cd; transition: background .18s ease; }
.team-stats-compare-switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(23,37,28,.22); transition: transform .18s ease; }
.team-stats-compare-switch input:checked + span { background: var(--grass); }
.team-stats-compare-switch input:checked + span::after { transform: translateX(21px); }
.team-stats-compare-switch input:focus-visible + span { outline: 3px solid rgba(var(--grass-rgb),.22); outline-offset: 2px; }
.team-stats-compare-switch b { font-size: .76rem; }
.team-stats-compare-switch.is-disabled { opacity: .5; cursor: not-allowed; }
.team-previous-stats-import { margin: 0 0 1rem; padding: 0; overflow: hidden; }
.team-previous-stats-import summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; cursor: pointer; list-style: none; }
.team-previous-stats-import summary::-webkit-details-marker { display: none; }
.team-previous-stats-import summary span small,
.team-previous-stats-import summary span strong { display: block; }
.team-previous-stats-import summary span small { color: var(--grass-dark); font-size: .62rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.team-previous-stats-import summary span strong { margin-top: .15rem; font-size: .92rem; }
.team-previous-stats-import summary > b { color: var(--muted); font-size: .7rem; }
.team-previous-stats-import-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .7fr); gap: 1rem; padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--line); }
.team-previous-stats-import-body > div { padding-top: .9rem; }
.team-previous-stats-import-body p { margin: 0 0 .55rem; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.team-previous-stats-import-body form { display: grid; gap: .55rem; padding-top: .9rem; }
.team-stats-comparison-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.team-stats-comparison-summary article { padding: .95rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.team-stats-comparison-summary span,
.team-stats-comparison-summary strong,
.team-stats-comparison-summary small { display: block; }
.team-stats-comparison-summary span { color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.team-stats-comparison-summary strong { margin: .25rem 0 .12rem; font-size: 1.45rem; }
.team-stats-comparison-summary small { color: var(--muted); font-size: .66rem; }
.team-stat-delta { display: inline-flex; padding: .2rem .42rem; border-radius: 999px; background: var(--grass-soft); color: var(--grass-dark); font-size: .68rem; font-weight: 850; white-space: nowrap; }
.team-stats-page.is-comparing .team-stats-table { min-width: 1180px; }
@media (max-width: 900px) {
    .team-stats-compare-toolbar { align-items: flex-start; flex-direction: column; }
    .team-previous-stats-import-body { grid-template-columns: 1fr; }
    .team-stats-comparison-summary { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .team-stats-compare-toolbar { padding: .85rem; }
    .team-stats-compare-switch { width: 100%; justify-content: space-between; }
    .team-previous-stats-import summary { align-items: flex-start; flex-direction: column; }
    .team-stats-comparison-summary { gap: .45rem; }
    .team-stats-comparison-summary article { padding: .75rem; }
}

/* Statistieken v2: kaartweergave zonder horizontaal scrollen */
.team-stats-page-v2 { max-width: 1180px; margin: 0 auto; }
.team-stats-page-v2 .team-stats-cards-primary { margin-top: 1rem; }
.team-stats-page-v2 .team-highlight-grid-compact { margin-top: 1rem; }
.team-player-stats-panel { margin-top: 1rem; padding: 1.15rem; overflow: visible; }
.team-player-stats-head { align-items: flex-end; margin-bottom: .9rem; }
.team-player-stats-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: .7rem; margin-bottom: .9rem; }
.team-player-stats-toolbar label { display: grid; gap: .3rem; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.team-player-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.team-player-stat-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 7px 20px rgba(23,37,28,.045); }
.team-player-stat-card[hidden] { display: none !important; }
.team-player-stat-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .8rem; color: inherit; text-decoration: none; border-bottom: 1px solid #edf0ea; }
.team-player-stat-card-head:hover { background: var(--grass-soft); }
.team-player-stat-card-head > div { min-width: 0; }
.team-player-stat-card-head strong,
.team-player-stat-card-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-player-stat-card-head strong { font-size: .9rem; }
.team-player-stat-card-head small { color: var(--muted); font-size: .65rem; }
.team-player-stat-rank { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 .4rem; border-radius: 999px; background: var(--grass-soft); color: var(--grass-dark); font-size: .72rem; font-weight: 900; }
.team-player-stat-attendance { padding: .75rem .8rem .65rem; }
.team-player-stat-attendance > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; }
.team-player-stat-attendance span { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.team-player-stat-attendance strong { font-family: "Fraunces", Georgia, serif; font-size: 1.45rem; }
.team-player-stat-attendance small { display: block; margin-top: .38rem; color: var(--muted); font-size: .66rem; }
.team-player-stat-progress { height: 8px; margin-top: .45rem; overflow: hidden; border-radius: 999px; background: #e8ede6; }
.team-player-stat-progress i { display: block; height: 100%; border-radius: inherit; background: var(--grass); }
.team-player-stat-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: #e8ede6; border-top: 1px solid #e8ede6; }
.team-player-stat-metrics > div { min-width: 0; padding: .62rem .45rem; background: #f8faf7; text-align: center; }
.team-player-stat-metrics dt { color: var(--muted); font-size: .58rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.team-player-stat-metrics dd { margin: .18rem 0 0; color: var(--ink); font-size: .86rem; font-weight: 900; }
.team-player-stat-compare { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding: .7rem .8rem; border-top: 1px solid var(--line); background: var(--grass-soft); }
.team-player-stat-compare > div { min-width: 0; }
.team-player-stat-compare span,
.team-player-stat-compare strong,
.team-player-stat-compare small { display: block; }
.team-player-stat-compare span { color: var(--muted); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.team-player-stat-compare strong { margin-top: .12rem; font-size: .9rem; }
.team-player-stat-compare small { color: var(--grass-dark); font-size: .64rem; font-weight: 850; }
.team-player-stat-compare p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .68rem; }
.team-player-search-empty { margin-top: .8rem; }
.team-event-history-panel { margin-top: 1rem; padding: 0; overflow: hidden; }
.team-event-history-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem 1.15rem; cursor: pointer; list-style: none; }
.team-event-history-panel > summary::-webkit-details-marker { display: none; }
.team-event-history-panel > summary span small,
.team-event-history-panel > summary span strong { display: block; }
.team-event-history-panel > summary span small { color: var(--grass); font-size: .62rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.team-event-history-panel > summary span strong { margin-top: .12rem; font-size: 1.05rem; }
.team-event-history-panel > summary > b { color: var(--muted); font-size: .7rem; }
.team-event-stat-list-v2 a { grid-template-columns: auto minmax(0, 1fr) minmax(125px, auto) auto; }
.team-event-stat-score { min-width: 0; text-align: right; }
.team-event-stat-score strong,
.team-event-stat-score small { display: block; }
.team-event-stat-score strong { font-size: .78rem; }
.team-event-stat-score small { color: var(--muted); font-size: .63rem; }
.team-stats-page-v2 .team-previous-stats-import { margin-top: 1rem; }

@media (max-width: 760px) {
    .team-stats-page-v2 { width: 100%; overflow: hidden; }
    .team-stats-page-v2 .team-stats-hero { padding: 1rem; }
    .team-stats-page-v2 .team-stats-hero h1 { font-size: 1.8rem; }
    .team-stats-page-v2 .team-stats-cards { grid-template-columns: 1fr 1fr; }
    .team-stats-page-v2 .team-stats-cards article { min-width: 0; padding: .8rem; }
    .team-stats-page-v2 .team-stats-cards strong { font-size: 1.45rem; }
    .team-stats-page-v2 .team-stats-cards small { line-height: 1.35; }
    .team-stats-page-v2 .team-highlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
    .team-stats-page-v2 .team-highlight-card { min-width: 0; padding: .7rem; }
    .team-stats-page-v2 .team-highlight-card .team-highlight-icon { width: 32px; height: 32px; font-size: .82rem; }
    .team-stats-page-v2 .team-highlight-card strong { font-size: .78rem; }
    .team-stats-page-v2 .team-highlight-card p { font-size: .63rem; }
    .team-player-stats-panel { padding: .8rem; }
    .team-player-stats-head { align-items: flex-start; }
    .team-player-stats-toolbar { grid-template-columns: 1fr; gap: .55rem; }
    .team-player-stat-grid { grid-template-columns: 1fr; gap: .6rem; }
    .team-player-stat-card-head { padding: .7rem; }
    .team-player-stat-attendance { padding: .65rem .7rem .58rem; }
    .team-player-stat-metrics > div { padding: .56rem .3rem; }
    .team-player-stat-compare { padding: .62rem .7rem; }
    .team-event-history-panel > summary { padding: .85rem; }
    .team-event-stat-list-v2 a { grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; padding: .72rem .75rem; }
    .team-event-stat-list-v2 .team-event-type { grid-column: 1; grid-row: 1; }
    .team-event-stat-list-v2 .team-event-stat-copy { grid-column: 2; grid-row: 1; }
    .team-event-stat-list-v2 .team-event-stat-score { grid-column: 1 / 3; grid-row: 2; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding-left: 0; text-align: left; }
    .team-event-stat-list-v2 .team-event-alert { grid-column: 3; grid-row: 1 / 3; }
    .team-event-stat-list-v2 strong,
    .team-event-stat-list-v2 small { white-space: normal; }
    .team-stats-compare-toolbar { gap: .65rem; }
    .team-stats-compare-switch { min-width: 0; }
    .team-stats-comparison-summary { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
    .team-stats-page-v2 .team-stats-cards { grid-template-columns: 1fr 1fr; gap: .4rem; }
    .team-stats-page-v2 .team-stats-cards article { padding: .68rem; border-radius: 13px; }
    .team-stats-page-v2 .team-stats-cards span { font-size: .58rem; }
    .team-stats-page-v2 .team-stats-cards strong { font-size: 1.3rem; }
    .team-stats-page-v2 .team-highlight-grid { grid-template-columns: 1fr; }
    .team-player-stat-metrics { grid-template-columns: repeat(3, 1fr); }
}

/* Admin analytics */
.admin-dashboard-page { max-width: 1180px; margin: 0 auto; padding-top: 1rem; }
.admin-dashboard-head { align-items: flex-start; }
.admin-dashboard-head h1 { margin: .2rem 0 .25rem; }
.admin-dashboard-head p { max-width: 680px; margin: 0; color: var(--muted); font-size: .78rem; }
.admin-section-nav { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0 1rem; }
.admin-section-nav a { padding: .52rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .72rem; font-weight: 800; text-decoration: none; }
.admin-section-nav a:hover { border-color: var(--grass); color: var(--grass-dark); }
.admin-analytics-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; margin-bottom: 1rem; }
.admin-analytics-summary article { min-width: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 7px 20px rgba(23,37,28,.045); }
.admin-analytics-summary span,
.admin-analytics-summary strong,
.admin-analytics-summary small { display: block; }
.admin-analytics-summary span { color: var(--muted); font-size: .59rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.admin-analytics-summary strong { margin: .24rem 0 .1rem; font-family: "Fraunces", Georgia, serif; font-size: 1.7rem; }
.admin-analytics-summary small { color: var(--muted); font-size: .62rem; line-height: 1.35; }
.admin-users-panel { padding: 1rem; }
.admin-users-head { align-items: flex-end; }
.admin-user-search { display: grid; gap: .28rem; min-width: 240px; color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.admin-user-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.admin-user-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.admin-user-card[hidden] { display: none !important; }
.admin-user-card header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .75rem; border-bottom: 1px solid #edf0ea; }
.admin-user-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--grass-soft); color: var(--grass-dark); font-weight: 900; }
.admin-user-card header > div { min-width: 0; }
.admin-user-card header strong,
.admin-user-card header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-card header strong { font-size: .84rem; }
.admin-user-card header small { color: var(--muted); font-size: .64rem; }
.admin-activity-status { padding: .3rem .48rem; border-radius: 999px; background: #eef1ed; color: #69736b; font-size: .59rem; font-weight: 850; white-space: nowrap; }
.admin-activity-status.is-online { background: #dff4e3; color: #2f6e3c; }
.admin-activity-status.is-today { background: #e8f0ff; color: #3f639b; }
.admin-activity-status.is-recent { background: #fff1dc; color: #8b642a; }
.admin-user-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: #e9ede7; }
.admin-user-card dl > div { min-width: 0; padding: .62rem; background: #f9faf8; }
.admin-user-card dt { color: var(--muted); font-size: .55rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.admin-user-card dd { margin: .16rem 0 0; overflow: hidden; color: var(--ink); font-size: .72rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-card footer { display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: .65rem .75rem; }
.admin-user-card footer small { color: var(--muted); font-size: .61rem; }
.admin-exercises-section { margin-top: 1rem; }
.admin-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 980px) {
    .admin-analytics-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .admin-dashboard-page { width: 100%; overflow: hidden; }
    .admin-dashboard-head { gap: .7rem; }
    .admin-users-panel { padding: .8rem; }
    .admin-users-head { align-items: stretch; flex-direction: column; }
    .admin-user-search { min-width: 0; width: 100%; }
    .admin-user-grid { grid-template-columns: 1fr; }
    .admin-user-card header { grid-template-columns: auto minmax(0, 1fr); }
    .admin-activity-status { grid-column: 1 / -1; width: max-content; }
    .admin-user-card footer { align-items: stretch; flex-direction: column; }
    .admin-user-card footer .inline-form,
    .admin-user-card footer .btn { width: 100%; }
}
@media (max-width: 430px) {
    .admin-analytics-summary { grid-template-columns: 1fr 1fr; gap: .45rem; }
    .admin-analytics-summary article { padding: .7rem; }
    .admin-user-card dl { grid-template-columns: 1fr 1fr; }
}

/* Adminnavigatie en accountrollen */
#analytics,
#gebruikers,
#oefeningen { scroll-margin-top: 1rem; }
.nav-admin-button { border-color: rgba(var(--accent-rgb), .38); background: var(--accent-soft); color: var(--accent-dark); }
.nav-admin-button:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.admin-rights-notice { margin: 0 0 1rem; }
.admin-user-name-line { display: flex !important; align-items: center; gap: .38rem; min-width: 0; }
.admin-user-name-line strong { min-width: 0; }
.admin-role-badge { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 20px; padding: .15rem .42rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: .54rem; font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: .05em; }
.admin-user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.admin-user-actions .inline-form { margin: 0; }
.admin-user-actions .btn[disabled] { cursor: not-allowed; opacity: .48; }
@media (max-width: 760px) {
    .admin-section-nav { position: sticky; top: .4rem; z-index: 8; padding: .42rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 8px 22px rgba(23,37,28,.08); backdrop-filter: blur(8px); }
    .admin-section-nav a { flex: 1 1 0; text-align: center; }
    .admin-user-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
    .admin-user-actions .inline-form,
    .admin-user-actions .btn { width: 100%; }
}

/* ============================================================
   UX-herbouw 2026 — taakgerichte navigatie en rustige app-layout
   ============================================================ */
:root {
    --surface: #ffffff;
    --surface-soft: #f7f8f5;
    --surface-muted: #eef1eb;
    --text-soft: #59635b;
    --warning: #d77b17;
    --warning-soft: #fff4e4;
    --success: #28743e;
    --success-soft: #eaf5ed;
    --app-nav-height: 72px;
    --wrap: 1160px;
}
html { scroll-behavior: smooth; }
body { background-image: none; background-color: #f4f5f2; overflow-x: hidden; }
body.has-app-nav { padding-bottom: 0; }
.wrap { padding-top: 1.15rem; }
.site-foot { margin-top: 2rem; }

/* Hoofdnavigatie */
.site-head { background: rgba(255,255,255,.94); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(23,37,28,.06); }
.site-head-in { max-width: var(--wrap); padding: .7rem 1.25rem; }
.site-primary-nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.site-primary-nav > a { padding: .55rem .75rem; border-radius: 10px; color: #59635b; font-size: .88rem; font-weight: 750; text-decoration: none; }
.site-primary-nav > a:hover { background: var(--surface-soft); color: var(--ink); }
.site-primary-nav > a.is-active { background: var(--grass-soft); color: var(--grass-dark); }
.site-head-actions { display: flex; align-items: center; gap: .45rem; margin-left: .45rem; }
.site-account-menu { position: relative; }
.site-account-menu > summary { list-style: none; display: flex; align-items: center; gap: .45rem; min-height: 40px; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: .78rem; }
.site-account-menu > summary::-webkit-details-marker { display: none; }
.site-account-menu > summary i { color: var(--muted); font-style: normal; }
.site-account-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--grass-soft); color: var(--grass-dark); font-weight: 850; }
.site-head-team-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grass); }
.site-account-popover { position: absolute; top: calc(100% + .45rem); left: 0; z-index: 100; min-width: 210px; padding: .45rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(23,37,28,.15); }
.site-account-popover-right { left: auto; right: 0; }
.site-account-popover small { display: block; padding: .35rem .55rem; color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.site-account-popover a { display: block; padding: .55rem .65rem; border-radius: 9px; text-decoration: none; font-size: .82rem; font-weight: 650; }
.site-account-popover a:hover, .site-account-popover a.is-active { background: var(--grass-soft); color: var(--grass-dark); }
.mobile-app-nav { display: none; }

/* Contextnavigatie team */
.team-context-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .4rem 0 1.2rem; padding: .45rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.team-context-home { display: flex; align-items: center; gap: .5rem; padding: .35rem .55rem; text-decoration: none; }
.team-context-home > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--grass); color: var(--on-grass); font-size: .7rem; font-weight: 900; }
.team-context-home strong { font-size: .8rem; }
.team-context-links { display: flex; align-items: center; gap: .2rem; }
.team-context-links > a, .team-context-more > summary { padding: .45rem .65rem; border-radius: 9px; color: var(--text-soft); font-size: .76rem; font-weight: 750; text-decoration: none; cursor: pointer; list-style: none; }
.team-context-links > a.is-active, .team-context-more > summary.is-active { background: var(--grass-soft); color: var(--grass-dark); }
.team-context-more { position: relative; }
.team-context-more > summary::-webkit-details-marker { display: none; }
.team-context-more > div { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; min-width: 210px; padding: .4rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 16px 36px rgba(23,37,28,.14); }
.team-context-more > div a { display: block; padding: .5rem .6rem; border-radius: 8px; font-size: .78rem; text-decoration: none; }
.team-context-more > div a:hover, .team-context-more > div a.is-active { background: var(--grass-soft); color: var(--grass-dark); }

/* Algemene apppagina */
.ux-page { display: grid; gap: 1.2rem; }
.ux-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.2rem 0 .45rem; }
.ux-page-head-compact { align-items: center; }
.ux-page-head h1 { margin: .1rem 0 .25rem; font-family: "Fraunces", Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.ux-page-head p { max-width: 60ch; margin: 0; color: var(--text-soft); }
.ux-eyebrow { color: var(--grass-dark); font-size: .68rem; font-weight: 850; text-transform: uppercase; letter-spacing: .11em; }
.ux-section-block, .ux-section-card, .ux-settings-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 5px 20px rgba(23,37,28,.045); }
.ux-section-block, .ux-section-card { padding: 1.15rem; }
.ux-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.ux-section-heading h2 { margin: 0; font-size: 1.15rem; }
.ux-section-heading p { margin: .08rem 0 0; color: var(--muted); font-size: .76rem; }
.ux-section-heading > a { color: var(--grass-dark); font-size: .76rem; font-weight: 800; text-decoration: none; }
.ux-empty-state { display: grid; justify-items: start; gap: .35rem; padding: 1.4rem; border: 1px dashed #cfd5cc; border-radius: 14px; background: var(--surface-soft); }
.ux-empty-state strong { font-size: 1rem; }
.ux-empty-state p { margin: 0 0 .35rem; color: var(--text-soft); font-size: .82rem; }
.ux-count-pill { display: grid; place-items: center; min-width: 34px; height: 28px; padding: 0 .55rem; border-radius: 999px; background: var(--grass-soft); color: var(--grass-dark); font-size: .72rem; font-weight: 850; }
.ux-count-pill.is-alert { background: var(--warning-soft); color: #98520c; }

/* Vandaag / dashboard */
.ux-focus-card, .ux-dashboard-next { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(250px,.7fr); gap: 1rem; padding: 1.35rem; border: 1px solid rgba(var(--grass-rgb),.22); border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(23,37,28,.07); }
.ux-focus-main, .ux-dashboard-next-main { display: grid; align-content: center; justify-items: start; }
.ux-focus-main h2, .ux-dashboard-next-main h2 { margin: .45rem 0 .2rem; font-family: "Fraunces", Georgia, serif; font-size: clamp(1.8rem,3vw,2.5rem); line-height: 1.08; }
.ux-focus-main p, .ux-dashboard-next-main p { margin: 0 0 1rem; color: var(--text-soft); }
.ux-readiness, .ux-dashboard-checklist { padding: 1rem; border-radius: 16px; background: var(--grass-soft); }
.ux-readiness > div, .ux-dashboard-checklist > div { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; }
.ux-progress-track { display: block; height: 7px; margin: .65rem 0; border-radius: 999px; background: rgba(var(--grass-rgb),.16); overflow: hidden; }
.ux-progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--grass); }
.ux-readiness ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: 0; padding: 0; }
.ux-readiness li, .ux-dashboard-checklist p { display: flex; align-items: center; gap: .4rem; margin: .35rem 0 0; color: #7a5b2e; font-size: .72rem; font-weight: 650; }
.ux-readiness li span, .ux-dashboard-checklist p span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--warning-soft); }
.ux-readiness li.is-done, .ux-dashboard-checklist p.is-done { color: var(--success); }
.ux-readiness li.is-done span, .ux-dashboard-checklist p.is-done span { background: var(--success-soft); }
.ux-today-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; }
.ux-action-list { display: grid; gap: .5rem; }
.ux-action-list > a { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
.ux-action-list > a:hover { border-color: rgba(var(--grass-rgb),.4); background: var(--surface-soft); }
.ux-action-list > a > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--grass-soft); color: var(--grass-dark); font-weight: 900; }
.ux-action-list > a > span.is-urgent { background: var(--warning-soft); color: #9b570f; }
.ux-action-list strong { display: block; font-size: .82rem; }
.ux-action-list p { margin: .08rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.ux-inline-success { display: flex; gap: .7rem; align-items: center; padding: 1rem; border-radius: 13px; background: var(--success-soft); color: var(--success); }
.ux-inline-success > span { font-size: 1.25rem; font-weight: 900; }
.ux-inline-success p { margin: .1rem 0 0; font-size: .74rem; }
.ux-quick-actions { display: grid; gap: .5rem; }
.ux-quick-actions a { display: flex; align-items: center; gap: .65rem; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }
.ux-quick-actions a:hover { background: var(--grass-soft); border-color: rgba(var(--grass-rgb),.25); }
.ux-quick-actions span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-dark); }
.ux-quick-actions strong { font-size: .8rem; }
.ux-recent-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; }
.ux-recent-grid > a { min-height: 130px; padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; }
.ux-recent-grid > a:hover { border-color: rgba(var(--grass-rgb),.4); transform: translateY(-1px); }
.ux-recent-grid span { color: var(--grass-dark); font-size: .62rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.ux-recent-grid h3 { margin: .3rem 0 .15rem; font-size: .95rem; }
.ux-recent-grid p { margin: 0; color: var(--muted); font-size: .7rem; }
.ux-inspiration-block, .ux-setup-panel, .ux-archive-block { border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.ux-inspiration-block > summary, .ux-setup-panel > summary, .ux-archive-block > summary { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 1rem 1.1rem; cursor: pointer; list-style: none; }
.ux-inspiration-block > summary::-webkit-details-marker, .ux-setup-panel > summary::-webkit-details-marker, .ux-archive-block > summary::-webkit-details-marker { display: none; }
.ux-inspiration-block > summary span, .ux-setup-panel > summary span { font-weight: 850; }
.ux-inspiration-block > summary small, .ux-setup-panel > summary small { color: var(--muted); }
.ux-inspiration-content, .ux-setup-panel > form, .ux-archive-block > div { padding: 0 1rem 1rem; }
.ux-inspiration-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.ux-more-actions summary { margin-top: .75rem; color: var(--grass-dark); font-size: .75rem; font-weight: 800; cursor: pointer; }
.ux-kpi-grid { display: grid; gap: .75rem; }
.ux-kpi-grid-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ux-kpi-grid article { padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.ux-kpi-grid span, .ux-kpi-grid small { display: block; color: var(--muted); font-size: .68rem; }
.ux-kpi-grid strong { display: block; margin: .2rem 0; font-size: 1.65rem; line-height: 1; }
.ux-dashboard-footer-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* Agenda */
.ux-next-activity { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 17px; background: var(--grass); color: var(--on-grass); text-decoration: none; }
.ux-next-activity span { color: rgba(255,255,255,.78); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.ux-next-activity h2 { margin: .1rem 0; font-size: 1.2rem; }
.ux-next-activity p { margin: 0; font-size: .76rem; }
.ux-next-activity > strong { font-size: .78rem; }
.ux-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ux-filter-tabs { display: flex; gap: .3rem; padding: .3rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ux-filter-tabs a { padding: .42rem .7rem; border-radius: 8px; color: var(--muted); font-size: .75rem; font-weight: 750; text-decoration: none; }
.ux-filter-tabs a.is-active { background: var(--grass-soft); color: var(--grass-dark); }
.ux-toolbar-more { position: relative; }
.ux-toolbar-more > summary { padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; list-style: none; font-size: .76rem; font-weight: 750; }
.ux-toolbar-more > summary::-webkit-details-marker { display: none; }
.ux-toolbar-more > div { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; width: 220px; padding: .4rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.ux-toolbar-more button { width: 100%; padding: .55rem; border: 0; border-radius: 8px; background: transparent; text-align: left; font: inherit; font-size: .76rem; cursor: pointer; }
.ux-toolbar-more button:hover { background: var(--grass-soft); }
.ux-agenda-list { display: grid; gap: .45rem; }
.ux-agenda-row { display: grid; grid-template-columns: 48px 84px minmax(0,1fr) auto; align-items: center; gap: .7rem; min-height: 72px; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: inherit; text-decoration: none; }
.ux-agenda-row:hover { border-color: rgba(var(--grass-rgb),.4); background: var(--surface-soft); }
.ux-agenda-row time { display: grid; place-items: center; width: 44px; height: 50px; border-radius: 11px; background: var(--grass-soft); color: var(--grass-dark); line-height: 1; }
.ux-agenda-row time strong { font-size: 1.05rem; }
.ux-agenda-row time small { margin-top: .15rem; font-size: .56rem; font-weight: 850; }
.ux-event-kind { display: inline-flex; width: max-content; padding: .25rem .45rem; border-radius: 7px; background: var(--grass-soft); color: var(--grass-dark); font-size: .58rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.ux-event-kind.is-match { background: var(--accent-soft); color: var(--accent-dark); }
.ux-agenda-row h3 { margin: 0; font-size: .86rem; }
.ux-agenda-row p, .ux-agenda-row div > small { display: block; margin: .08rem 0 0; color: var(--muted); font-size: .68rem; }
.ux-agenda-row > b { color: var(--muted); font-size: 1.2rem; }
.ux-alert-dot { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--warning-soft); color: #a05b0c; font-weight: 900; }
.ux-archive-block > summary span { min-width: 25px; padding: .15rem .4rem; border-radius: 999px; background: var(--surface-muted); text-align: center; font-size: .68rem; }
.ux-dialog { width: min(94vw, 600px); max-height: 90vh; padding: 0; border: 0; border-radius: 20px; background: transparent; }
.ux-dialog::backdrop { background: rgba(13,25,17,.58); backdrop-filter: blur(4px); }
.ux-dialog-card { display: grid; gap: .85rem; max-height: 88vh; overflow: auto; padding: 1.2rem; border-radius: 20px; background: #fff; box-shadow: 0 28px 70px rgba(0,0,0,.24); }
.ux-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ux-dialog-head small { color: var(--grass-dark); font-size: .62rem; font-weight: 850; text-transform: uppercase; }
.ux-dialog-head h2 { margin: .1rem 0 0; font-size: 1.3rem; }
.ux-dialog-head > button { width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--surface-muted); font-size: 1.35rem; cursor: pointer; }
.ux-dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }

/* Spelers */
.ux-player-toolbar { align-items: flex-end; }
.ux-search-field { flex: 1; max-width: 480px; }
.ux-search-field span { display: block; margin-bottom: .25rem; font-size: .68rem; font-weight: 750; }
.ux-player-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.ux-player-card { position: relative; padding: .8rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.ux-player-card-main { display: flex; gap: .7rem; color: inherit; text-decoration: none; }
.ux-player-photo { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; overflow: hidden; background: var(--grass-soft); color: var(--grass-dark); font-weight: 900; }
.ux-player-photo img { width: 100%; height: 100%; object-fit: cover; }
.ux-player-photo i { position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 7px; background: #fff; color: var(--ink); font-size: .56rem; font-style: normal; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.ux-player-card h2 { margin: .05rem 0; font-size: .95rem; }
.ux-player-card p, .ux-player-card-main div > span { margin: 0; color: var(--muted); font-size: .66rem; }
.ux-player-card-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.ux-inline-toggle label { display: flex; align-items: center; gap: .4rem; font-size: .66rem; font-weight: 700; cursor: pointer; }
.ux-card-menu { position: relative; }
.ux-card-menu > summary { list-style: none; padding: .2rem .45rem; border-radius: 8px; cursor: pointer; font-weight: 900; }
.ux-card-menu > summary::-webkit-details-marker { display: none; }
.ux-card-menu > div { position: absolute; right: 0; bottom: calc(100% + .35rem); z-index: 20; min-width: 180px; padding: .4rem; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow); }
.ux-card-menu a, .ux-card-menu button, .ux-card-menu label { display: block; width: 100%; padding: .45rem .5rem; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: .72rem; text-align: left; text-decoration: none; cursor: pointer; }
.ux-card-menu a:hover, .ux-card-menu button:hover, .ux-card-menu label:hover { background: var(--surface-soft); }
.ux-card-menu input[type=file] { position: absolute; opacity: 0; pointer-events: none; }

/* Teambeheer en instellingen */
.ux-team-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.ux-team-card { padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.ux-team-card-top { display: flex; align-items: center; gap: .75rem; }
.ux-team-logo { display: grid; place-items: center; width: 58px; height: 58px; padding: .3rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.ux-team-logo img { width: 100%; height: 100%; object-fit: contain; }
.ux-team-card h2 { margin: 0; font-size: 1.05rem; }
.ux-team-card p { margin: .08rem 0 0; color: var(--muted); font-size: .7rem; }
.ux-setup-progress { margin: .8rem 0; }
.ux-setup-progress > div { display: flex; justify-content: space-between; font-size: .67rem; }
.ux-setup-progress > span { display: block; height: 6px; margin-top: .3rem; border-radius: 999px; background: var(--surface-muted); overflow: hidden; }
.ux-setup-progress i { display: block; height: 100%; background: var(--grass); }
.ux-team-next { display: block; padding: .7rem; border-radius: 12px; background: var(--surface-soft); text-decoration: none; }
.ux-team-next small, .ux-team-next span { display: block; color: var(--muted); font-size: .64rem; }
.ux-team-next strong { display: block; margin: .1rem 0; font-size: .82rem; }
.ux-team-card-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.ux-form-stack { display: grid; gap: .8rem; }
.ux-form-stack label, .ux-inline-form label { font-size: .72rem; font-weight: 750; }
.ux-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.ux-settings-card { padding: 1.1rem; }
.ux-settings-card-wide { grid-column: 1/-1; }
.ux-settings-head { margin-bottom: .9rem; }
.ux-settings-head > span { color: var(--grass-dark); font-size: .62rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.ux-settings-head h2 { margin: .12rem 0; font-size: 1.12rem; }
.ux-settings-head p { margin: 0; color: var(--muted); font-size: .72rem; }
.ux-trainer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
.ux-trainer-grid article { display: flex; align-items: center; gap: .55rem; padding: .65rem; border: 1px solid var(--line); border-radius: 12px; }
.ux-trainer-grid article > div { flex: 1; min-width: 0; }
.ux-trainer-grid strong, .ux-trainer-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-trainer-grid strong { font-size: .78rem; }
.ux-trainer-grid small { color: var(--muted); font-size: .62rem; }
.ux-icon-button { width: 30px; height: 30px; border: 0; border-radius: 9px; background: var(--surface-muted); cursor: pointer; }
.ux-inline-form { display: flex; align-items: flex-end; gap: .65rem; margin-top: .8rem; }
.ux-inline-form label { flex: 1; }
.ux-readonly-note { padding: .75rem; border-radius: 12px; background: var(--surface-soft); color: var(--muted); font-size: .74rem; }

/* Meer */
.ux-more-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.ux-more-grid > a { display: flex; gap: .8rem; min-height: 105px; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: inherit; text-decoration: none; }
.ux-more-grid > a:hover { border-color: rgba(var(--grass-rgb),.4); background: var(--surface-soft); }
.ux-more-grid > a > span { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; background: var(--grass-soft); color: var(--grass-dark); font-weight: 900; }
.ux-more-grid h2 { margin: 0; font-size: .95rem; }
.ux-more-grid p { margin: .15rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.4; }

/* Statistiekentabs */
.ux-stats-tabs { display: flex; gap: .35rem; margin-bottom: .9rem; padding: .35rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.ux-stats-tabs button { flex: 1; padding: .55rem .7rem; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; }
.ux-stats-tabs button.is-active { background: var(--grass-soft); color: var(--grass-dark); }
[data-stats-view-panel][hidden] { display: none !important; }

/* Wedstrijdstappen */
.ux-event-workflow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .45rem; margin: 1rem 0; padding: .45rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.ux-event-workflow button { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; column-gap: .5rem; padding: .55rem; border: 0; border-radius: 11px; background: transparent; color: var(--text-soft); text-align: left; cursor: pointer; }
.ux-event-workflow button > span { grid-row: 1/3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--surface-muted); font-size: .7rem; font-weight: 900; }
.ux-event-workflow button strong { font-size: .72rem; }
.ux-event-workflow button small { color: var(--muted); font-size: .56rem; }
.ux-event-workflow button.is-active { background: var(--grass-soft); color: var(--grass-dark); }
.ux-event-workflow button.is-active > span { background: var(--grass); color: var(--on-grass); }
[data-event-stage-panel][hidden] { display: none !important; }
.team-event-page[data-event-stage-view="prepare"] .team-finish-only { display: none !important; }
.team-event-page[data-event-stage-view="selection"] .team-finish-only { display: none !important; }
.team-event-page[data-event-stage-view="finish"] .team-preparation-only, .team-event-page[data-event-stage-view="finish"] .team-selection-only { display: none !important; }
.team-event-page[data-event-stage-view="lineup"] .team-event-savebar { display: flex; }
.team-event-details .team-panel-head p, .team-attendance-panel .team-panel-head p, .team-lineup-panel .team-panel-head p { max-width: 62ch; }

/* Tactiekbord als werkmodus */
.ux-tactics-workspace { display: grid; gap: .8rem; }
.ux-tactics-topbar { position: sticky; top: 62px; z-index: 25; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 7px 22px rgba(23,37,28,.08); }
.ux-tactics-topbar > a { color: var(--text-soft); font-size: .72rem; font-weight: 800; text-decoration: none; }
.ux-tactics-topbar small { display: block; color: var(--muted); font-size: .58rem; }
.ux-tactics-topbar h1 { margin: 0; font-size: 1rem; }
.ux-tactics-topbar > div:last-child { display: flex; gap: .4rem; }
.ux-collapsible-library > summary { display: flex; align-items: center; justify-content: space-between; padding: .75rem .9rem; cursor: pointer; list-style: none; }
.ux-collapsible-library > summary::-webkit-details-marker { display: none; }
.ux-collapsible-library > summary small, .ux-collapsible-library > summary strong { display: block; }
.ux-collapsible-library > summary small { color: var(--muted); font-size: .6rem; }
.ux-collapsible-library > summary strong { font-size: .78rem; }
.ux-collapsible-library > summary b { color: var(--grass-dark); font-size: .7rem; }
.ux-collapsible-library[open] > summary { border-bottom: 1px solid var(--line); }
.is-tactics-focus { overflow: hidden; }
.is-tactics-focus .site-head, .is-tactics-focus .mobile-app-nav, .is-tactics-focus .site-foot { display: none !important; }
.is-tactics-focus .wrap { max-width: none; height: 100vh; padding: .4rem; overflow: auto; }
.is-tactics-focus .ux-tactics-topbar { top: 0; }
.ux-tactics-workspace:fullscreen { padding: .5rem; overflow: auto; background: #f4f5f2; }

/* Publieke homepage */
.ux-public-home { display: grid; gap: 2.2rem; }
.ux-public-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; padding: 2rem 0; }
.ux-public-hero h1 { margin: .35rem 0 .75rem; font-family: "Fraunces", Georgia, serif; font-size: clamp(2.5rem,5vw,4.4rem); line-height: .98; }
.ux-public-hero h1 em { color: var(--accent); }
.ux-public-hero p { max-width: 52ch; color: var(--text-soft); }
.ux-public-hero > div:first-child > div { display: flex; gap: .55rem; margin-top: 1.1rem; }
.ux-public-preview { display: grid; gap: .55rem; }
.ux-public-preview article { padding: .95rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.ux-public-preview span { color: var(--grass-dark); font-size: .62rem; font-weight: 850; text-transform: uppercase; }
.ux-public-preview strong { display: block; margin: .15rem 0; }
.ux-public-preview p { margin: 0; font-size: .72rem; }
.ux-public-features { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }
.ux-public-features article { padding: 1.15rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.ux-public-features b { color: var(--accent); }
.ux-public-features h2 { margin: .5rem 0 .2rem; font-size: 1.05rem; }
.ux-public-features p { margin: 0; color: var(--muted); font-size: .74rem; }

/* Clubkleuren: rustige vlakken, geen willekeurige gradients */
.has-team-theme .team-hero, .has-team-theme .team-dashboard-hero, .has-team-theme .team-stats-hero, .has-team-theme .team-event-hero { background: var(--grass); background-image: none !important; }
.has-team-theme .team-panel, .has-team-theme .ux-section-card, .has-team-theme .ux-section-block, .has-team-theme .ux-settings-card { background-image: none !important; }
.has-team-theme .btn-solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.has-team-theme .btn-solid:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
/* Vaste betekeniskleuren en velden worden niet door clubkleuren overschreven */
.team-football-pitch, .team-tactics-pitch, .has-team-theme .team-football-pitch, .has-team-theme .team-tactics-pitch, .has-team-theme .team-tactics-pitch[data-field-mode="half"] { background: repeating-linear-gradient(90deg,#43834e 0,#43834e 12.5%,#4b8d57 12.5%,#4b8d57 25%) !important; }
.notice-ok, .ux-inline-success { background-color: var(--success-soft) !important; color: var(--success) !important; }
.notice-error, .team-event-alert, .ux-alert-dot { --accent: #d77b17; }

@media (max-width: 980px) {
    .site-account-name, .site-team-switcher strong { display: none; }
    .site-primary-nav > a { padding-inline: .55rem; font-size: .8rem; }
    .ux-player-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .ux-settings-grid { grid-template-columns: 1fr; }
    .ux-settings-card-wide { grid-column: auto; }
    .ux-team-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    body.has-app-nav { padding-bottom: calc(var(--app-nav-height) + env(safe-area-inset-bottom)); }
    .site-head { position: sticky; }
    .site-head-in { min-height: 58px; padding: .55rem .8rem; }
    .wordmark-text { font-size: 1rem; }
    .wordmark-logo-image { max-width: 160px; }
    .wordmark-teamline { display: none; }
    .wordmark-copy small { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .site-primary-nav, .site-team-switcher { display: none; }
    .site-account-name { display: none; }
    .site-account-menu > summary { border: 0; padding: .25rem; }
    .site-account-popover { position: fixed; top: 62px; right: .7rem; left: auto; }
    .mobile-app-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: repeat(5,1fr); height: calc(var(--app-nav-height) + env(safe-area-inset-bottom)); padding: .35rem .35rem calc(.35rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 -8px 24px rgba(23,37,28,.08); }
    .mobile-app-nav a { display: grid; place-items: center; align-content: center; gap: .1rem; border-radius: 10px; color: #788079; text-decoration: none; }
    .mobile-app-nav a span { font-size: .95rem; font-weight: 850; line-height: 1; }
    .mobile-app-nav a small { font-size: .56rem; font-weight: 750; }
    .mobile-app-nav a.is-active { background: var(--grass-soft); color: var(--grass-dark); }
    .wrap { width: 100%; padding: .65rem .75rem 1.4rem; }
    .site-foot { display: none; }
    .team-context-nav { display: none; }
    .ux-page { gap: .85rem; }
    .ux-page-head { align-items: flex-start; padding-top: .55rem; }
    .ux-page-head h1 { font-size: 2rem; }
    .ux-page-head p { font-size: .78rem; line-height: 1.45; }
    .ux-page-head > .btn { padding: .5rem .7rem; font-size: .72rem; }
    .ux-focus-card, .ux-dashboard-next { grid-template-columns: 1fr; padding: 1rem; border-radius: 17px; }
    .ux-focus-main h2, .ux-dashboard-next-main h2 { font-size: 1.75rem; }
    .ux-readiness ul { grid-template-columns: 1fr; }
    .ux-today-grid, .ux-kpi-grid-three, .ux-recent-grid, .ux-public-hero, .ux-public-features, .ux-more-grid { grid-template-columns: 1fr; }
    .ux-kpi-grid-three { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; }
    .ux-kpi-grid article { padding: .7rem .55rem; }
    .ux-kpi-grid strong { font-size: 1.2rem; }
    .ux-kpi-grid span, .ux-kpi-grid small { font-size: .56rem; }
    .ux-section-block, .ux-section-card { padding: .85rem; border-radius: 15px; }
    .ux-section-heading { align-items: flex-start; }
    .ux-agenda-row {
        grid-template-columns: 44px minmax(0,1fr) 28px;
        grid-template-rows: auto auto;
        align-items: start;
        column-gap: .55rem;
        row-gap: .35rem;
        min-height: 82px;
    }
    .ux-agenda-row time {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
    }
    .ux-agenda-row .ux-event-kind {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        margin: 0;
        position: relative;
        z-index: 1;
    }
    .ux-agenda-row div {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        min-width: 0;
        padding: 0;
    }
    .ux-agenda-row > b {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
        justify-self: end;
    }
    .ux-agenda-row > .ux-alert-dot {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
        justify-self: end;
    }
    .ux-agenda-row > .ux-alert-dot + b {
        grid-row: 2;
        align-self: end;
    }
    .ux-toolbar { align-items: stretch; }
    .ux-filter-tabs { flex: 1; overflow-x: auto; }
    .ux-filter-tabs a { flex: 1; text-align: center; white-space: nowrap; }
    .ux-toolbar-more > div { position: fixed; right: .75rem; top: auto; bottom: calc(var(--app-nav-height) + 10px); }
    .ux-dialog { width: 100%; max-width: none; max-height: 92vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
    .ux-dialog-card { max-height: 92vh; border-radius: 20px 20px 0 0; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }
    .ux-player-card-grid { grid-template-columns: 1fr; }
    .ux-player-toolbar { align-items: stretch; flex-direction: column; }
    .ux-search-field { max-width: none; }
    .ux-team-card-actions, .ux-dialog-actions, .ux-dashboard-footer-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .ux-settings-grid, .ux-trainer-grid { grid-template-columns: 1fr; }
    .ux-inline-form { align-items: stretch; flex-direction: column; }
    .ux-stats-tabs { position: sticky; top: 58px; z-index: 20; overflow-x: auto; }
    .ux-stats-tabs button { min-width: 94px; }
    .ux-event-workflow { position: sticky; top: 58px; z-index: 24; grid-template-columns: repeat(4, minmax(82px,1fr)); overflow-x: auto; padding: .35rem; }
    .ux-event-workflow button { grid-template-columns: 24px minmax(0,1fr); padding: .42rem; }
    .ux-event-workflow button > span { width: 24px; height: 24px; }
    .ux-event-workflow button small { display: none; }
    .team-event-hero { padding: .85rem !important; }
    .team-event-head-stats { display: grid !important; grid-template-columns: repeat(3,1fr); width: 100%; }
    .team-message-card { grid-template-columns: 1fr !important; }
    .team-message-card pre { max-height: 150px; }
    .team-event-savebar { position: sticky; bottom: calc(var(--app-nav-height) + env(safe-area-inset-bottom)); z-index: 35; border-radius: 14px 14px 0 0; }
    .ux-tactics-topbar { top: 58px; grid-template-columns: auto minmax(0,1fr); }
    .ux-tactics-topbar > div:last-child { grid-column: 1/-1; justify-content: flex-end; }
    .team-tactics-toolbar-panel, .team-tactics-drawing-panel { padding: .7rem !important; }
    .team-tactics-drawing-copy p, .team-tactics-board-panel .team-panel-head p, .team-tactics-selection-panel .team-panel-head p { display: none; }
    .ux-public-hero { padding-top: 1rem; }
    .ux-public-hero h1 { font-size: 2.55rem; }
}

@media (max-width: 430px) {
    .ux-kpi-grid-three { grid-template-columns: 1fr 1fr; }
    .ux-kpi-grid-three article:last-child { grid-column: 1/-1; }
    .ux-readiness, .ux-dashboard-checklist { padding: .8rem; }
    .ux-page-head { display: grid; }
    .ux-page-head > .btn { width: 100%; }
    .ux-team-card-actions, .ux-dialog-actions, .ux-dashboard-footer-actions { grid-template-columns: 1fr; }
    .ux-inspiration-actions { display: grid; }
    .team-two-fields { grid-template-columns: 1fr !important; }
}

/* Aanvullingen voor de nieuwe UX-hubs */
.ux-team-dashboard,
.ux-today-page,
.ux-team-manager-page,
.ux-training-hub,
.ux-exercise-library,
.ux-more-page { width: 100%; }

.ux-season-select { display: flex; align-items: flex-end; }
.ux-season-select label { display: grid; gap: .28rem; color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ux-season-select select { min-width: 160px; }

.ux-dashboard-actions { margin: 0; }
.ux-dashboard-next-empty { grid-template-columns: 1fr; }
.ux-dashboard-next-empty > div { max-width: 620px; }

.ux-hub-tabs { position: sticky; top: 68px; z-index: 18; display: flex; gap: .35rem; width: max-content; max-width: 100%; padding: .35rem; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 7px 20px rgba(23,37,28,.06); scrollbar-width: none; }
.ux-hub-tabs::-webkit-scrollbar { display: none; }
.ux-hub-tabs a { flex: 0 0 auto; padding: .48rem .72rem; border-radius: 10px; color: var(--text-soft); font-size: .72rem; font-weight: 800; text-decoration: none; }
.ux-hub-tabs a:hover,
.ux-hub-tabs a:focus-visible { background: var(--grass-soft); color: var(--grass-dark); }

.ux-library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.ux-library-grid > a { display: grid; align-content: start; min-height: 128px; padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.ux-library-grid > a:hover { transform: translateY(-1px); border-color: var(--grass); box-shadow: 0 9px 22px rgba(23,37,28,.07); }
.ux-library-grid > a > span { width: max-content; padding: .22rem .42rem; border-radius: 999px; background: var(--grass-soft); color: var(--grass-dark); font-size: .56rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.ux-library-grid h3 { margin: .55rem 0 .18rem; font-size: .92rem; }
.ux-library-grid p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.4; }

.ux-exercise-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .65rem; }
.ux-exercise-toolbar .ux-search-field { max-width: 520px; }
.ux-category-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .85rem; }
.ux-category-filters .chip { margin: 0; }
.ux-filter-empty,
.ux-focus-empty { padding: 1rem; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface-soft); color: var(--muted); text-align: center; }

@media (max-width: 900px) {
    .ux-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .ux-season-select { width: 100%; }
    .ux-season-select label,
    .ux-season-select select { width: 100%; }
    .ux-hub-tabs { position: static; width: 100%; }
    .ux-hub-tabs a { flex: 1; text-align: center; }
    .ux-exercise-toolbar { grid-template-columns: 1fr auto; }
    .ux-category-filters { flex-wrap: nowrap; margin-inline: -.75rem; padding: 0 .75rem .2rem; overflow-x: auto; scrollbar-width: none; }
    .ux-category-filters::-webkit-scrollbar { display: none; }
    .ux-category-filters .chip { flex: 0 0 auto; }
}
@media (max-width: 520px) {
    .ux-library-grid { grid-template-columns: 1fr; }
    .ux-library-grid > a { min-height: 108px; }
}

/* Blijvende login */
.auth-remember {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: .9rem 0 .2rem;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .72);
    cursor: pointer;
}
.auth-remember input {
    width: 20px;
    height: 20px;
    margin: .1rem 0 0;
    flex: 0 0 auto;
    accent-color: var(--grass);
}
.auth-remember span,
.auth-remember strong,
.auth-remember small {
    display: block;
}
.auth-remember strong {
    color: var(--ink);
    font-size: .86rem;
    line-height: 1.25;
}
.auth-remember small {
    margin-top: .16rem;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.4;
}

/* Privacy en cookies */
.site-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-foot-links { display: flex; align-items: center; gap: .8rem; }
.site-foot-links a { color: inherit; font-size: .72rem; font-weight: 700; text-decoration: none; }
.site-foot-links a:hover { text-decoration: underline; }
.auth-legal { margin: -.15rem 0 .2rem; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.auth-legal a { color: var(--grass-dark); font-weight: 750; }
.legal-page { display: grid; gap: 1rem; padding-bottom: 2rem; }
.legal-hero { padding: clamp(1.15rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 12px 35px rgba(23,37,28,.06); }
.legal-hero h1 { margin: .25rem 0 .55rem; }
.legal-hero > p { max-width: 760px; }
.legal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; }
.legal-summary article { padding: .8rem; border-radius: 14px; background: var(--grass-soft); }
.legal-summary strong, .legal-summary span { display: block; }
.legal-summary strong { margin-bottom: .18rem; color: var(--grass-dark); font-size: .79rem; }
.legal-summary span { color: #516055; font-size: .68rem; line-height: 1.45; }
.legal-updated { margin: .85rem 0 0; color: var(--muted); font-size: .66rem; }
.legal-jump-nav { display: flex; gap: .45rem; overflow-x: auto; padding: .15rem 0 .35rem; scrollbar-width: none; }
.legal-jump-nav::-webkit-scrollbar { display: none; }
.legal-jump-nav a { flex: 0 0 auto; padding: .52rem .72rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .68rem; font-weight: 800; text-decoration: none; }
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.legal-main { display: grid; gap: .8rem; }
.legal-section, .legal-side-card { padding: clamp(1rem, 2.5vw, 1.4rem); border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(23,37,28,.045); }
.legal-section { scroll-margin-top: 90px; }
.legal-section h2, .legal-side-card h2 { margin: 0 0 .45rem; font-size: 1.25rem; }
.legal-section h3 { margin: 0 0 .25rem; font-size: .88rem; }
.legal-section p, .legal-section li, .legal-side-card p { color: #536057; font-size: .76rem; line-height: 1.62; }
.legal-section a { color: var(--grass-dark); font-weight: 750; }
.legal-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .75rem; }
.legal-cards article { padding: .8rem; border: 1px solid var(--line); border-radius: 13px; background: #fafbf9; }
.legal-cards article p { margin: 0; font-size: .7rem; }
.legal-cards-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.legal-check-list { display: grid; gap: .38rem; margin: .65rem 0 0; padding: 0; list-style: none; }
.legal-check-list li { position: relative; padding-left: 1.25rem; }
.legal-check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--grass); font-weight: 900; }
.legal-table-wrap { overflow-x: auto; margin-top: .75rem; border: 1px solid var(--line); border-radius: 14px; }
.legal-table { width: 100%; min-width: 680px; border-collapse: collapse; background: #fff; }
.legal-table th, .legal-table td { padding: .72rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th { background: #f5f7f3; color: var(--ink); font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; }
.legal-table td { color: #536057; font-size: .7rem; line-height: 1.5; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table code { display: inline-block; padding: .12rem .3rem; border-radius: 5px; background: #eef2ec; color: var(--ink); font-size: .66rem; }
.legal-note { margin-top: .75rem; padding: .8rem; border-left: 4px solid var(--grass); border-radius: 10px; background: var(--grass-soft); }
.legal-note strong { color: var(--grass-dark); font-size: .76rem; }
.legal-note p { margin: .2rem 0 0; }
.legal-side { position: sticky; top: 82px; display: grid; gap: .8rem; }
.legal-side-card .btn { width: 100%; margin-top: .65rem; }
.legal-facts { display: grid; gap: .35rem; margin: .65rem 0 0; }
.legal-facts > div { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.legal-facts > div:last-child { border-bottom: 0; }
.legal-facts dt { color: var(--muted); font-size: .67rem; }
.legal-facts dd { margin: 0; color: var(--ink); font-size: .67rem; font-weight: 800; text-align: right; }
@media (max-width: 900px) {
    .legal-layout { grid-template-columns: 1fr; }
    .legal-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
    .site-foot { justify-content: center; text-align: center; }
    .legal-summary, .legal-cards, .legal-cards-two, .legal-side { grid-template-columns: 1fr; }
    .legal-hero, .legal-section, .legal-side-card { border-radius: 16px; }
    .legal-table-wrap { border: 0; overflow: visible; }
    .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; min-width: 0; width: 100%; }
    .legal-table thead { display: none; }
    .legal-table tr { margin-bottom: .55rem; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
    .legal-table td { padding: .2rem 0; border: 0; }
    .legal-table td:first-child { margin-bottom: .3rem; color: var(--ink); font-weight: 800; }
}

/* Admin: teams en accountbeheer */
.admin-teams-panel { margin-top: 1rem; padding: 1.15rem; scroll-margin-top: 90px; }
.admin-team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.admin-team-card { display: grid; gap: .75rem; padding: .9rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(23,37,28,.045); }
.admin-team-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: center; }
.admin-team-card > header strong,
.admin-team-card > header small { display: block; }
.admin-team-card > header strong { color: var(--ink); font-size: .9rem; }
.admin-team-card > header small { margin-top: .1rem; color: var(--muted); font-size: .67rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-team-logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--grass-soft); color: var(--grass-dark); font-size: 1.25rem; overflow: hidden; }
.admin-team-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.admin-team-card dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin: 0; }
.admin-team-card dl div { padding: .5rem; border-radius: 10px; background: #f6f8f5; text-align: center; }
.admin-team-card dt { color: var(--muted); font-size: .57rem; font-weight: 800; text-transform: uppercase; }
.admin-team-card dd { margin: .1rem 0 0; color: var(--ink); font-size: .82rem; font-weight: 850; }
.admin-team-card > footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.admin-team-card > footer small { color: var(--muted); font-size: .62rem; }
.admin-user-actions { flex-wrap: wrap; }
.admin-user-actions .btn[disabled] { opacity: .48; cursor: not-allowed; }

.admin-team-detail-page { display: grid; gap: 1rem; padding-bottom: 2rem; }
.admin-team-detail-head { align-items: flex-end; }
.admin-team-detail-head .text-button { display: inline-block; margin-bottom: .45rem; }
.admin-team-detail-actions { display: flex; gap: .5rem; }
.admin-team-summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem; }
.admin-team-summary-grid article { padding: .8rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.admin-team-summary-grid span,
.admin-team-summary-grid strong,
.admin-team-summary-grid small { display: block; }
.admin-team-summary-grid span { color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.admin-team-summary-grid strong { margin-top: .18rem; color: var(--ink); font-size: 1.25rem; }
.admin-team-summary-grid small { margin-top: .12rem; color: #637066; font-size: .62rem; line-height: 1.35; }
.admin-team-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.admin-team-detail-main,
.admin-team-detail-side { display: grid; gap: .8rem; }
.admin-team-detail-side { position: sticky; top: 82px; }
.admin-team-info-panel { padding: 1rem; }
.admin-team-brand-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: center; }
.admin-team-large-logo { display: grid; place-items: center; width: 92px; height: 92px; border: 1px solid var(--line); border-radius: 20px; background: #f7f9f6; font-size: 2.2rem; overflow: hidden; }
.admin-team-large-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.admin-team-data-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: 0; }
.admin-team-data-list > div { padding: .6rem; border-radius: 11px; background: #f6f8f5; }
.admin-team-data-list dt { color: var(--muted); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.admin-team-data-list dd { margin: .12rem 0 0; color: var(--ink); font-size: .72rem; font-weight: 750; overflow-wrap: anywhere; }
.admin-team-colours { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .75rem; }
.admin-team-colours span { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: #59655c; font-size: .65rem; font-weight: 750; }
.admin-team-colours i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.admin-team-player-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.admin-team-player-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: start; padding: .7rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.admin-team-player-copy strong,
.admin-team-player-copy small,
.admin-team-player-copy span { display: block; }
.admin-team-player-copy > strong { color: var(--ink); font-size: .8rem; }
.admin-team-player-copy small { color: var(--muted); font-size: .63rem; }
.admin-team-player-copy span { margin-top: .25rem; color: #526057; font-size: .65rem; font-weight: 700; }
.admin-team-player-copy p { margin: .45rem 0 0; padding: .45rem; border-radius: 9px; background: #f7f9f6; color: #536057; font-size: .65rem; line-height: 1.5; }
.admin-team-event-list { display: grid; gap: .45rem; }
.admin-team-event-list article { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .65rem; align-items: start; padding: .65rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.admin-team-event-date { display: grid; place-items: center; padding: .35rem; border-radius: 10px; background: var(--grass-soft); color: var(--grass-dark); }
.admin-team-event-date strong,
.admin-team-event-date small { display: block; }
.admin-team-event-date strong { font-size: 1rem; }
.admin-team-event-date small { font-size: .55rem; font-weight: 850; }
.admin-team-event-list article > div:last-child strong,
.admin-team-event-list article > div:last-child small,
.admin-team-event-list article > div:last-child span { display: block; }
.admin-team-event-list article > div:last-child strong { color: var(--ink); font-size: .78rem; }
.admin-team-event-list article > div:last-child small { color: var(--muted); font-size: .63rem; }
.admin-team-event-list article > div:last-child span { margin-top: .18rem; color: #56635a; font-size: .62rem; }
.admin-team-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.admin-team-two-columns h3 { margin: 0 0 .45rem; font-size: .85rem; }
.admin-team-simple-list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.admin-team-simple-list li { display: flex; justify-content: space-between; gap: .7rem; padding: .55rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.admin-team-simple-list strong { color: var(--ink); font-size: .68rem; }
.admin-team-simple-list span { color: var(--muted); font-size: .62rem; text-align: right; }
.admin-team-trainer-list { display: grid; gap: .4rem; margin-top: .6rem; }
.admin-team-trainer-list article { padding: .55rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.admin-team-trainer-list strong,
.admin-team-trainer-list small { display: block; }
.admin-team-trainer-list strong { font-size: .72rem; }
.admin-team-trainer-list small { color: var(--muted); font-size: .61rem; }
.admin-transfer-owner-panel form { display: grid; gap: .65rem; margin-top: .65rem; }
.admin-transfer-owner-panel label { display: grid; gap: .3rem; color: var(--ink); font-size: .67rem; font-weight: 800; }
.admin-team-json-details summary { cursor: pointer; color: var(--ink); font-size: .78rem; font-weight: 850; }
.admin-team-json-details p { color: var(--muted); font-size: .67rem; }
.admin-team-json-details pre { max-height: 620px; overflow: auto; padding: .8rem; border-radius: 12px; background: #19221c; color: #e8f1e9; font: 600 .62rem/1.55 monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
    .admin-team-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .admin-team-detail-layout { grid-template-columns: 1fr; }
    .admin-team-detail-side { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .admin-team-grid,
    .admin-team-player-grid,
    .admin-team-two-columns,
    .admin-team-detail-side { grid-template-columns: 1fr; }
    .admin-team-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-team-card > footer,
    .admin-team-detail-head { align-items: stretch; flex-direction: column; }
    .admin-team-card > footer .btn,
    .admin-team-detail-actions .btn { width: 100%; }
    .admin-team-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-team-brand-row { grid-template-columns: 1fr; }
    .admin-team-large-logo { width: 76px; height: 76px; }
    .admin-team-data-list { grid-template-columns: 1fr; }
}


/* PWA-installatie */
[data-pwa-install-control][hidden],
[data-pwa-install-banner][hidden],
[data-pwa-install-modal][hidden] { display: none !important; }

.pwa-install-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(57, 104, 67, .2);
    border-radius: 18px;
    background: #f7faf6;
    box-shadow: 0 10px 28px rgba(29, 55, 35, .07);
}
.pwa-install-banner > img {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    box-shadow: 0 7px 18px rgba(29, 55, 35, .16);
}
.pwa-install-banner-copy h2 { margin: .12rem 0 .18rem; font-size: 1.05rem; }
.pwa-install-banner-copy p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.pwa-install-banner-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; max-width: 265px; }
.pwa-install-banner-actions .text-button { padding: .35rem .2rem; font-size: .65rem; }
.pwa-install-never { color: var(--muted); }

.site-account-install {
    width: 100%;
    padding: .58rem .65rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.site-account-install:hover,
.site-account-install:focus-visible { background: var(--grass-soft); color: var(--grass-dark); outline: none; }

.ux-more-grid .ux-more-install {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ux-more-grid .ux-more-install:hover,
.ux-more-grid .ux-more-install:focus-visible { border-color: var(--grass); box-shadow: 0 8px 24px rgba(29, 55, 35, .08); outline: none; }
.ux-more-grid .ux-more-install > span { color: var(--grass-dark); font-size: 1.1rem; font-weight: 900; }
.ux-more-grid .ux-more-install h2 { margin: 0; font-size: .85rem; }
.ux-more-grid .ux-more-install p { margin: .18rem 0 0; color: var(--muted); font-size: .67rem; line-height: 1.45; }

.pwa-modal-open { overflow: hidden; }
.pwa-install-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(16, 25, 18, .62);
    backdrop-filter: blur(5px);
}
.pwa-install-dialog {
    position: relative;
    width: min(100%, 430px);
    padding: 1.35rem;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.pwa-install-dialog > img { display: block; width: 76px; height: 76px; margin-bottom: .75rem; border-radius: 19px; box-shadow: 0 8px 22px rgba(29, 55, 35, .16); }
.pwa-install-dialog h2 { margin: .15rem 2rem .65rem 0; font-size: 1.25rem; }
.pwa-install-dialog ol { display: grid; gap: .55rem; margin: .8rem 0; padding-left: 1.25rem; color: var(--ink); font-size: .78rem; line-height: 1.5; }
.pwa-install-dialog p { margin: 0 0 1rem; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.pwa-install-dialog .btn { width: 100%; }
.pwa-install-dialog-close {
    position: absolute;
    top: .8rem;
    right: .8rem;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #eef3ed;
    color: var(--ink);
    font-size: 1.25rem;
    cursor: pointer;
}

@media (max-width: 720px) {
    .pwa-install-banner { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .pwa-install-banner > img { width: 54px; height: 54px; border-radius: 14px; }
    .pwa-install-banner-actions { grid-column: 1 / -1; width: 100%; max-width: none; justify-content: flex-start; }
    .pwa-install-banner-actions .btn { flex: 1 1 100%; width: 100%; }
    .pwa-install-dialog { padding: 1.15rem; border-radius: 18px; }
}

/* ---- Pushmeldingen --------------------------------------------- */
.push-more-control[data-push-state="enabled"] > span,
.push-more-control[data-push-state="enabled"] h2 { color: var(--grass-dark); }
.push-more-control[data-push-state="enabled"] { border-color: rgba(var(--grass-rgb), .38); background: var(--grass-soft); }
.push-more-control:disabled,
.push-account-control:disabled { cursor: not-allowed; opacity: .62; }
[data-push-status].is-ok { color: var(--grass-dark) !important; }
[data-push-status].is-error { color: var(--danger) !important; }

.admin-push-panel { scroll-margin-top: 88px; }
.admin-push-stats { display: flex; gap: .55rem; flex-wrap: wrap; }
.admin-push-stats span { min-width: 96px; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); color: var(--muted); font-size: .65rem; text-align: center; }
.admin-push-stats strong { display: block; margin-bottom: .08rem; color: var(--ink); font-size: 1.15rem; }
.admin-push-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; align-items: start; }
.admin-push-form { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.admin-push-form label { display: grid; gap: .3rem; }
.admin-push-form label > span { color: var(--ink); font-size: .7rem; font-weight: 800; }
.admin-push-form label > small { color: var(--muted); font-size: .62rem; }
.admin-push-form textarea { resize: vertical; min-height: 105px; }
.admin-push-history { min-width: 0; }
.admin-push-history-head { display: flex; align-items: end; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.admin-push-history-head h3 { margin: 0; font-size: .95rem; }
.admin-push-history-head small { color: var(--muted); font-size: .62rem; }
.admin-push-history-list { display: grid; gap: .55rem; max-height: 610px; overflow: auto; padding-right: .2rem; }
.admin-push-history-list article { display: grid; gap: .55rem; padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.admin-push-history-list article strong { font-size: .78rem; }
.admin-push-history-list article p { margin: .15rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.admin-push-history-list article > small { color: var(--muted); font-size: .58rem; }
.admin-push-history-list dl { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: 0; }
.admin-push-history-list dl div { padding: .45rem .55rem; border-radius: 10px; background: var(--surface-soft); }
.admin-push-history-list dt { color: var(--muted); font-size: .55rem; }
.admin-push-history-list dd { margin: .08rem 0 0; font-size: .64rem; font-weight: 750; }

@media (max-width: 820px) {
    .admin-push-layout { grid-template-columns: 1fr; }
    .admin-push-history-list { max-height: none; }
    .admin-push-history-head { align-items: start; flex-direction: column; }
}

/* ---- Automatische pushmeldingen ------------------------------ */
.admin-auto-push-panel { display: grid; gap: 1rem; }
.admin-auto-push-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.admin-auto-push-intro article { padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.admin-auto-push-intro strong, .admin-auto-push-intro p { display: block; }
.admin-auto-push-intro p { margin: .25rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.admin-auto-push-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 1rem; align-items: start; }
.admin-auto-push-form, .admin-auto-push-rules, .admin-auto-push-cron, .admin-auto-push-runs { padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.admin-auto-push-form { display: grid; gap: .75rem; }
.admin-auto-push-form label { display: grid; gap: .3rem; }
.admin-auto-push-form label > span { font-size: .7rem; font-weight: 800; }
.admin-auto-push-form label small { color: var(--muted); font-size: .63rem; line-height: 1.45; }
.admin-auto-push-form code, .admin-auto-push-cron code { overflow-wrap: anywhere; }
.admin-auto-push-form-head { display: flex; justify-content: space-between; gap: .75rem; align-items: start; }
.admin-auto-push-form-head h3 { margin: 0; }
.admin-auto-push-form-head small { display: block; margin-top: .2rem; color: var(--muted); }
.admin-auto-push-two, .admin-auto-push-schedule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.admin-auto-push-enabled { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--grass-soft); cursor: pointer; }
.admin-auto-push-enabled input { margin-top: .18rem; }
.admin-auto-push-enabled strong, .admin-auto-push-enabled small { display: block; }
.admin-auto-push-rule-list { display: grid; gap: .65rem; }
.admin-auto-push-rule { padding: .8rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.admin-auto-push-rule.is-disabled { opacity: .65; }
.admin-auto-push-rule header, .admin-auto-push-rule footer { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.admin-auto-push-rule h4, .admin-auto-push-rule p { margin: 0; }
.admin-auto-push-rule p { margin-top: .45rem; color: var(--muted); font-size: .7rem; }
.admin-auto-push-rule dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: .65rem 0; }
.admin-auto-push-rule dl div { padding: .45rem; border-radius: 9px; background: #fff; }
.admin-auto-push-rule dt { color: var(--muted); font-size: .56rem; }
.admin-auto-push-rule dd { margin: .1rem 0 0; font-size: .64rem; font-weight: 750; }
.admin-auto-push-rule > small { display: block; padding: .6rem; border-left: 3px solid var(--accent); background: #fff; line-height: 1.45; }
.admin-auto-push-rule footer { margin-top: .7rem; }
.admin-auto-push-status { display: inline-block; margin-bottom: .22rem; color: var(--grass-dark); font-size: .56rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.text-danger { color: var(--danger) !important; }
.admin-auto-push-cron { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem; align-items: center; }
.admin-auto-push-cron h3, .admin-auto-push-cron p { margin: 0; }
.admin-auto-push-cron p { margin-top: .3rem; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.admin-auto-push-cron label { display: grid; gap: .3rem; }
.admin-auto-push-cron label span { font-size: .66rem; font-weight: 800; }
.admin-auto-push-cron label small { color: var(--muted); font-size: .6rem; line-height: 1.4; }
.admin-auto-push-cron > code { grid-column: 1 / -1; display: block; padding: .65rem; border-radius: 10px; background: #172019; color: #fff; font-size: .62rem; white-space: normal; overflow-wrap: anywhere; }
.admin-auto-push-run-list { display: grid; gap: .45rem; }
.admin-auto-push-run-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .7rem; align-items: center; padding: .6rem; border-bottom: 1px solid var(--line); }
.admin-auto-push-run-list article:last-child { border-bottom: 0; }
.admin-auto-push-run-list strong, .admin-auto-push-run-list small { display: block; }
.admin-auto-push-run-list small, .admin-auto-push-run-list time { color: var(--muted); font-size: .6rem; }
.admin-auto-push-run-list .is-ok { color: var(--success); font-weight: 800; }
.admin-auto-push-run-list .is-error { color: var(--danger); font-weight: 800; }
@media (max-width: 900px) {
    .admin-auto-push-layout, .admin-auto-push-cron { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .admin-auto-push-intro, .admin-auto-push-two, .admin-auto-push-schedule { grid-template-columns: 1fr; }
    .admin-auto-push-rule dl { grid-template-columns: 1fr; }
    .admin-auto-push-run-list article { grid-template-columns: 1fr auto; }
    .admin-auto-push-run-list time { grid-column: 1 / -1; }
}

/* ---- Locatie, reistijd en planning na activiteit ---------------- */
.team-location-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(23, 37, 28, .05);
}
.team-location-card h2 { margin: .1rem 0 .2rem; font-size: 1rem; }
.team-location-card p, .team-location-card small { display: block; margin: 0; color: var(--muted); }
.team-location-card small { margin-top: .2rem; font-size: .65rem; }
.team-location-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--grass-soft); font-size: 1.25rem; }
.team-travel-estimate { display: flex; flex-wrap: wrap; gap: .35rem .8rem; align-items: center; margin: .2rem 0 .9rem; padding: .7rem .8rem; border-radius: 13px; background: var(--grass-soft); font-size: .72rem; }
.team-travel-estimate strong { color: var(--grass-dark); }
.team-travel-estimate span { color: var(--muted); }
.team-travel-estimate a { color: var(--grass-dark); font-weight: 750; }
.ux-event-location, .ux-focus-location { display: block; margin-top: .24rem; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.ux-focus-location { margin: -.25rem 0 .8rem; }
.admin-auto-push-schedule { display: grid; gap: .7rem; }
.admin-auto-push-mode { max-width: 100%; }
.admin-auto-push-before { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.admin-auto-push-after { display: grid; grid-template-columns: minmax(160px, .45fr) minmax(0, 1fr); gap: .7rem; align-items: end; }
.admin-auto-push-after p { margin: 0 0 .55rem; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.admin-auto-push-before[hidden], .admin-auto-push-after[hidden] { display: none !important; }

@media (max-width: 720px) {
    .team-location-card { grid-template-columns: auto minmax(0, 1fr); }
    .team-location-card .btn { grid-column: 1 / -1; width: 100%; }
    .admin-auto-push-before, .admin-auto-push-after { grid-template-columns: 1fr; }
    .admin-auto-push-after p { margin: 0; }
}

/* ---- WhatsApp-bericht beheren -------------------------------- */
.admin-whatsapp-panel { scroll-margin-top: 90px; }
.admin-whatsapp-updated { align-self: flex-start; color: var(--muted); font-size: .66rem; }
.admin-whatsapp-help { margin: .85rem 0 1rem; padding: .85rem; border: 1px solid var(--line); border-radius: 16px; background: var(--grass-soft); }
.admin-whatsapp-help > strong { display: block; font-size: .82rem; }
.admin-whatsapp-help > p { margin: .25rem 0 .75rem; color: var(--muted); font-size: .69rem; line-height: 1.55; }
.admin-whatsapp-tokens { display: flex; flex-wrap: wrap; gap: .38rem; }
.admin-whatsapp-tokens button { appearance: none; padding: .38rem .5rem; border: 1px solid rgba(var(--grass-rgb), .2); border-radius: 999px; background: #fff; color: var(--grass-dark); cursor: pointer; }
.admin-whatsapp-tokens button:hover { border-color: var(--grass); transform: translateY(-1px); }
.admin-whatsapp-tokens code { font-size: .61rem; }
.admin-whatsapp-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 1rem; align-items: start; }
.admin-whatsapp-form { display: grid; gap: .85rem; }
.admin-whatsapp-form label { display: grid; gap: .32rem; }
.admin-whatsapp-form label > span { font-size: .72rem; font-weight: 800; }
.admin-whatsapp-form label > small { color: var(--muted); font-size: .62rem; line-height: 1.45; }
.admin-whatsapp-textarea { min-height: 220px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; line-height: 1.55; }
.admin-whatsapp-form label:nth-of-type(2) .admin-whatsapp-textarea { min-height: 160px; }
.admin-whatsapp-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.admin-whatsapp-previews { display: grid; gap: .8rem; position: sticky; top: 86px; }
.admin-whatsapp-previews article { padding: .9rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(23,37,28,.06); }
.admin-whatsapp-previews h3 { margin: .15rem 0 .55rem; font-size: .9rem; }
.admin-whatsapp-previews pre { min-height: 150px; margin: 0; padding: .8rem; border-radius: 12px; background: #f4f7f3; color: var(--ink); font-family: "Instrument Sans", sans-serif; font-size: .7rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-whatsapp-placeholder-help { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.admin-whatsapp-placeholder-help summary { cursor: pointer; font-size: .72rem; font-weight: 800; }
.admin-whatsapp-placeholder-help dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .8rem; margin: .75rem 0 0; }
.admin-whatsapp-placeholder-help dl div { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: .5rem; align-items: baseline; padding-bottom: .4rem; border-bottom: 1px dashed var(--line); }
.admin-whatsapp-placeholder-help dt, .admin-whatsapp-placeholder-help dd { margin: 0; font-size: .63rem; }
.admin-whatsapp-placeholder-help dd { color: var(--muted); }

@media (max-width: 860px) {
    .admin-whatsapp-layout { grid-template-columns: 1fr; }
    .admin-whatsapp-previews { position: static; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .admin-whatsapp-previews { grid-template-columns: 1fr; }
    .admin-whatsapp-placeholder-help dl { grid-template-columns: 1fr; }
    .admin-whatsapp-placeholder-help dl div { grid-template-columns: 1fr; gap: .15rem; }
    .admin-whatsapp-actions .btn { width: 100%; }
}

/* ---- Slimme opstelling en positiebeheer --------------------- */
.ux-page-head-actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; justify-content: flex-end; }
.ux-dialog-wide { width: min(96vw, 980px); }
.team-position-manager { display: grid; gap: .55rem; }
.team-position-manager-row {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(190px, 1fr) minmax(190px, 1fr);
    gap: .65rem;
    align-items: end;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}
.team-position-manager-row > div { align-self: center; min-width: 0; }
.team-position-manager-row > div strong,
.team-position-manager-row > div small { display: block; }
.team-position-manager-row > div strong { font-size: .82rem; }
.team-position-manager-row > div small { margin-top: .1rem; color: var(--muted); font-size: .62rem; }
.team-position-manager-row label { min-width: 0; font-size: .67rem; font-weight: 750; }
.team-position-manager-row select { margin-top: .25rem; }
.team-lineup-smart-help { margin: -.2rem 0 .7rem; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.team-lineup-smart-status {
    margin: 0 0 .8rem;
    padding: .65rem .75rem;
    border: 1px solid rgba(var(--grass-rgb), .25);
    border-radius: 12px;
    background: var(--grass-soft);
    color: var(--grass-dark);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.45;
}
.team-lineup-smart-status.is-warning { border-color: rgba(181, 112, 22, .28); background: var(--warning-soft); color: #8b540e; }
.team-lineup-smart-status.is-success { border-color: rgba(var(--grass-rgb), .28); }

@media (max-width: 720px) {
    .ux-page-head-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .ux-page-head-actions .btn { width: 100%; }
    .team-position-manager-row { grid-template-columns: 1fr; align-items: stretch; }
    .team-position-manager-row > div { padding-bottom: .15rem; border-bottom: 1px solid var(--line); }
}

/* ---- AI-oefeningen in de adminomgeving ---------------------- */
.admin-ai-exercises-panel { scroll-margin-top: 84px; }
.admin-ai-status { display: grid; justify-items: end; gap: .28rem; }
.admin-ai-status > span { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.admin-ai-status > span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.admin-ai-status .is-ready { color: #2d6a3d; background: #e5f3e8; }
.admin-ai-status .is-missing { color: #9a421f; background: #fff0e8; }
.admin-ai-status small { color: var(--muted); font-size: .65rem; }
.admin-ai-setup { display: grid; gap: .35rem; margin-bottom: 1rem; }
.admin-ai-setup p, .admin-ai-setup small { margin: 0; }
.admin-ai-setup code { word-break: break-word; }
.admin-ai-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .75fr); gap: 1rem; align-items: start; }
.admin-ai-generator { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.admin-ai-generator label, .admin-ai-edit-form label { display: grid; gap: .32rem; color: var(--ink); font-size: .73rem; font-weight: 750; }
.admin-ai-generator label > span, .admin-ai-edit-form label > span { font-weight: 800; }
.admin-ai-generator > small { color: var(--muted); line-height: 1.45; }
.admin-ai-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.admin-ai-wide { grid-column: 1 / -1; }
.admin-ai-input-suffix { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4rem; }
.admin-ai-input-suffix small { color: var(--muted); }
.admin-ai-explanation { padding: 1rem; border-radius: 18px; background: var(--grass-soft); border: 1px solid rgba(var(--grass-rgb), .12); }
.admin-ai-explanation h3 { margin: .25rem 0 .65rem; }
.admin-ai-explanation ol { display: grid; gap: .6rem; margin: 0; padding-left: 1.2rem; }
.admin-ai-explanation p { margin: .85rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.admin-ai-concepts-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin: 1.35rem 0 .75rem; }
.admin-ai-concepts-head h3, .admin-ai-concepts-head p { margin: 0; }
.admin-ai-concepts-head p { margin-top: .2rem; color: var(--muted); font-size: .7rem; }
.admin-ai-concept-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.admin-ai-concept-card { display: grid; gap: .65rem; padding: .9rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.admin-ai-concept-card.is-draft { border-style: dashed; }
.admin-ai-concept-card header { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.admin-ai-concept-card header span { color: var(--grass-dark); font-size: .65rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.admin-ai-concept-card header strong { padding: .25rem .45rem; border-radius: 999px; background: #f1f3ef; color: var(--muted); font-size: .6rem; }
.admin-ai-concept-card.is-published header strong { background: #e5f3e8; color: #2d6a3d; }
.admin-ai-concept-card h4, .admin-ai-concept-card p { margin: 0; }
.admin-ai-concept-card h4 { font-size: 1rem; line-height: 1.2; }
.admin-ai-concept-card p { color: var(--muted); font-size: .72rem; line-height: 1.5; }
.admin-ai-concept-card ul { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.admin-ai-concept-card li { padding: .28rem .45rem; border-radius: 999px; background: #f4f6f2; color: var(--muted); font-size: .62rem; }
.admin-ai-concept-card footer { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding-top: .2rem; }
.admin-ai-concept-card footer form { margin: 0; }

/* ---- AI-oefening controleren -------------------------------- */
.admin-ai-edit-page { max-width: var(--wrap); margin: 0 auto; padding: 1rem 1.4rem 5rem; }
.admin-ai-edit-head { align-items: flex-start; }
.admin-ai-edit-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.admin-ai-edit-form { display: grid; gap: 1rem; }
.admin-ai-edit-form .team-panel { display: grid; gap: .8rem; }
.admin-ai-variation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.admin-ai-save-bar { position: sticky; bottom: 74px; z-index: 18; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 12px 36px rgba(23,37,28,.12); backdrop-filter: blur(12px); }
.admin-ai-save-bar span { color: var(--muted); font-size: .68rem; }

/* ---- Openbare AI-oefeningen --------------------------------- */
.recipe-ai-exercise { max-width: 1080px; }
.ai-exercise-draft-label { display: inline-flex; margin-top: .55rem; padding: .35rem .6rem; border-radius: 999px; background: #fff0e8; color: #9a421f; font-size: .65rem; font-weight: 800; }
.ai-exercise-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; margin: 1rem 0; }
.ai-exercise-facts > span { display: grid; gap: .15rem; padding: .7rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ai-exercise-facts small { color: var(--muted); font-size: .59rem; text-transform: uppercase; letter-spacing: .05em; }
.ai-exercise-facts strong { font-size: .78rem; }
.ai-exercise-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .65fr); gap: 1rem; align-items: start; }
.ai-exercise-main { display: grid; gap: .8rem; }
.ai-exercise-section, .ai-exercise-side section { padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.ai-exercise-section h2, .ai-exercise-side h3 { margin: .2rem 0 .55rem; }
.ai-exercise-section p { margin: 0; line-height: 1.65; }
.ai-exercise-section ol, .ai-exercise-section ul, .ai-exercise-side ul { display: grid; gap: .5rem; margin: 0; padding-left: 1.15rem; line-height: 1.55; }
.ai-coaching-section { border-color: rgba(var(--grass-rgb), .22); background: linear-gradient(135deg, var(--grass-soft), #fff 70%); }
.ai-exercise-side { display: grid; gap: .8rem; position: sticky; top: 88px; }
.ai-exercise-visual { overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, #f7faf6, #edf5ea); padding: .85rem; }
.ai-exercise-visual img { display:block; width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: #f7faf6; border-radius: 20px; }
.ai-exercise-variations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.ai-exercise-variations section { padding: 1rem; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.ai-exercise-variations span { color: var(--grass-dark); font-size: .68rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.ai-exercise-variations p { margin: .45rem 0 0; line-height: 1.6; }

@media (max-width: 840px) {
    .admin-ai-layout, .ai-exercise-layout { grid-template-columns: 1fr; }
    .admin-ai-explanation { order: -1; }
    .admin-ai-concept-grid { grid-template-columns: 1fr; }
    .ai-exercise-side { position: static; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
    .ai-exercise-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .admin-ai-status { justify-items: start; }
    .admin-ai-form-grid, .admin-ai-variation-grid, .ai-exercise-variations { grid-template-columns: 1fr; }
    .admin-ai-wide { grid-column: auto; }
    .admin-ai-edit-page { padding: .8rem .8rem 5.5rem; }
    .admin-ai-edit-actions { width: 100%; }
    .admin-ai-edit-actions .btn { flex: 1; }
    .admin-ai-save-bar { bottom: 76px; align-items: stretch; flex-direction: column; }
    .ai-exercise-side { grid-template-columns: 1fr; }
    .ai-exercise-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Handmatige AI-prompt en JSON-import --------------------- */
.admin-ai-workflow {
    display: grid;
    gap: 1rem;
}
.admin-ai-step {
    display: grid;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}
.admin-ai-step > header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}
.admin-ai-step > header > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--grass);
    color: var(--on-grass);
    font-size: .82rem;
    font-weight: 900;
}
.admin-ai-step > header h3,
.admin-ai-step > header p { margin: 0; }
.admin-ai-step > header p {
    margin-top: .22rem;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.5;
}
.admin-ai-prompt-box,
.admin-ai-import-form { display: grid; gap: .75rem; }
.admin-ai-prompt-output {
    min-height: 420px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .7rem;
    line-height: 1.55;
    white-space: pre;
}
.admin-ai-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.admin-ai-copy-status {
    min-height: 1.2em;
    margin: 0;
    color: #2d6a3d;
    font-size: .68rem;
}
.admin-ai-copy-status.is-error { color: var(--danger); }
.admin-ai-upload-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: end;
}
.admin-ai-json-upload {
    display: grid;
    gap: .35rem;
    padding: .75rem;
    border: 1.5px dashed var(--line);
    border-radius: 14px;
    background: #fafbf9;
    font-size: .72rem;
    font-weight: 750;
}
.admin-ai-json-upload small,
.admin-ai-field-help {
    color: var(--muted);
    font-size: .67rem;
    line-height: 1.5;
}
.admin-ai-json-help {
    padding: .75rem;
    border-radius: 14px;
    background: #f5f7f3;
}
.admin-ai-json-help summary { cursor: pointer; font-size: .72rem; font-weight: 850; }
.admin-ai-json-help p { margin: .55rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.admin-ai-json-help code { word-break: break-word; }
.admin-ai-seo-note {
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-left: 4px solid var(--accent);
    border-radius: 0 14px 14px 0;
    background: var(--accent-soft);
}
.admin-ai-seo-note strong,
.admin-ai-seo-note p { display: block; margin: 0; }
.admin-ai-seo-note p { margin-top: .3rem; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.admin-ai-concept-card.is-rejected {
    border-style: dashed;
    opacity: .76;
    background: #fbf7f5;
}
.admin-ai-concept-card.is-rejected header strong {
    color: #9a421f;
    background: #fff0e8;
}
.admin-ai-seo-edit { border-color: rgba(var(--grass-rgb), .24); }
.admin-ai-field-help { margin: 0; }
.admin-ai-edit-form label small { color: var(--muted); font-size: .63rem; font-weight: 500; line-height: 1.45; }

@media (max-width: 720px) {
    .admin-ai-upload-row { grid-template-columns: 1fr; }
    .admin-ai-upload-row .btn { width: 100%; }
    .admin-ai-prompt-output { min-height: 330px; }
}


/* AI-oefeningen met tactisch bord */
.admin-ai-concept-preview {
    margin: .7rem 0 .9rem;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(57, 104, 67, .16);
    background: #f4f8f3;
}
.admin-ai-concept-preview,
.admin-ai-board-preview {
    aspect-ratio: 9 / 16;
    display: grid;
    place-items: center;
    padding: .75rem;
    background: linear-gradient(180deg, #f7faf6, #edf5ea);
}
.admin-ai-concept-preview img,
.admin-ai-board-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 18px;
}
.admin-ai-board-grid {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.admin-ai-board-preview-card {
    display: grid;
    gap: .55rem;
}
.admin-ai-board-preview-card strong {
    font-size: .95rem;
}
.admin-ai-board-preview {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(57, 104, 67, .16);
    background: #f4f8f3;
}
.admin-ai-board-editor { display: grid; gap: .45rem; }
.ai-exercise-board-figure {
    margin: 0;
    display: grid;
    gap: .55rem;
}
.ai-exercise-board-figure figcaption {
    margin: 0;
    font-size: .88rem;
    color: var(--muted);
}
@media (max-width: 900px) {
    .admin-ai-board-grid {
        grid-template-columns: 1fr;
    }
}


/* Filters voor AI-concepten */
.admin-ai-status-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
}
.admin-ai-status-filters a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .75rem;
    border: 1px solid rgba(57, 104, 67, .18);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
}
.admin-ai-status-filters a:hover,
.admin-ai-status-filters a.is-active {
    border-color: #396843;
    background: #e8f1e6;
    color: #23472d;
}
.admin-ai-status-filters strong {
    display: inline-grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(57, 104, 67, .12);
    font-size: .78rem;
}
@media (max-width: 700px) {
    .admin-ai-concepts-head {
        align-items: stretch;
    }
    .admin-ai-status-filters {
        width: 100%;
    }
}


/* AI-oefening controleren als openbare pagina */
.admin-ai-review-page {
    display: grid;
    gap: 1rem;
    padding-bottom: 7rem;
}
.admin-ai-review-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(57, 104, 67, .16);
    border-radius: 18px;
    background: #f7faf6;
}
.admin-ai-review-topbar > div {
    display: grid;
    gap: .1rem;
}
.admin-ai-review-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    background: #eef3ec;
    color: #315e3a;
}
.admin-ai-review-status.is-published { background: #dff4e5; color: #236235; }
.admin-ai-review-status.is-rejected { background: #fde7e7; color: #9a2f2f; }
.admin-ai-page-preview {
    margin: 0 auto;
    width: min(100%, 1120px);
    box-shadow: 0 18px 50px rgba(34, 69, 40, .08);
}
.admin-ai-review-actions {
    position: sticky;
    bottom: 1rem;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: .9rem 1rem;
    border: 1px solid rgba(57, 104, 67, .20);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 46px rgba(22, 53, 29, .18);
    backdrop-filter: blur(12px);
}
.admin-ai-review-actions > div:first-child {
    display: grid;
    gap: .15rem;
}
.admin-ai-review-actions > div:first-child span {
    font-size: .86rem;
    color: var(--muted);
}
.admin-ai-review-buttons {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.admin-ai-review-buttons form { margin: 0; }
.admin-ai-review-buttons .btn[disabled] {
    opacity: .6;
    cursor: default;
}
@media (max-width: 760px) {
    .admin-ai-review-topbar {
        grid-template-columns: 1fr auto;
    }
    .admin-ai-review-topbar > a {
        grid-column: 1 / -1;
        justify-self: start;
    }
    .admin-ai-review-actions {
        position: static;
        display: grid;
        padding: .9rem;
    }
    .admin-ai-review-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .admin-ai-review-buttons form,
    .admin-ai-review-buttons .btn {
        width: 100%;
    }
    .admin-ai-review-buttons > .btn:last-child {
        grid-column: 1 / -1;
    }
}

.card-ai-exercise .card-media,
.training-card-ai .training-card-preview,
.training-exercise-row-ai .training-exercise-media {
    background: linear-gradient(180deg, #f7faf6, #edf5ea);
}
.card-ai-exercise .card-media,
.training-card-ai .training-card-preview {
    aspect-ratio: 9 / 16;
}
.card-ai-exercise .card-media img,
.training-card-ai .training-card-preview img,
.training-exercise-row-ai .training-exercise-media img {
    object-fit: contain;
    background: #f7faf6;
}
.training-exercise-row-ai .training-exercise-media {
    padding: .35rem;
}
.training-exercise-row-ai .training-exercise-media img {
    border-radius: 14px;
}

.admin-ai-board-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, .9fr);
    gap: 1.25rem;
    align-items: start;
}
.admin-ai-board-stage,
.admin-ai-board-inspector-card,
.admin-ai-board-json-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(20, 40, 25, .05);
}
.admin-ai-board-stage {
    padding: 1rem;
}
.admin-ai-board-toolbar,
.admin-ai-board-top-settings,
.admin-ai-board-json-actions,
.admin-ai-board-controls-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
.admin-ai-board-top-settings { margin: .9rem 0 1rem; }
.admin-ai-board-top-settings label,
.admin-ai-board-controls-grid label { display: grid; gap: .35rem; }
.admin-ai-board-top-settings label { flex: 1 1 170px; }
.admin-ai-board-canvas-wrap {
    background: linear-gradient(180deg, #f7faf6, #edf4eb);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 1rem;
}
.admin-ai-board-canvas {
    position: relative;
    width: 100%;
    min-height: 420px;
    aspect-ratio: 1 / 1;
}
.admin-ai-board-svg,
.admin-ai-board-surface,
.admin-ai-board-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.admin-ai-board-field {
    border-radius: 26px;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,.85);
    background: repeating-linear-gradient(90deg, #43834e 0, #43834e 12.5%, #4b8d57 12.5%, #4b8d57 25%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.admin-ai-board-field--quarter::before,
.admin-ai-board-field--quarter::after,
.admin-ai-board-field--half::before,
.admin-ai-board-field--full::before,
.admin-ai-board-field--full::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.admin-ai-board-field--quarter::before {
    left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,.5);
}
.admin-ai-board-field--quarter::after {
    top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); background: rgba(255,255,255,.5);
}
.admin-ai-board-field--half::before {
    left: 29%; right: 29%; top: 0; height: 27%; border: 3px solid rgba(255,255,255,.85); border-top: 0;
}
.admin-ai-board-field--full::before {
    left: 0; right: 0; top: 50%; height: 2px; background: rgba(255,255,255,.85); transform: translateY(-50%);
}
.admin-ai-board-field--full::after {
    left: 50%; top: 50%; width: 20%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 3px solid rgba(255,255,255,.85); border-radius: 50%;
}
.admin-ai-board-object,
.admin-ai-board-area {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: grab;
}
.admin-ai-board-object.is-selected,
.admin-ai-board-area.is-selected {
    filter: drop-shadow(0 0 0.5rem rgba(232, 73, 133, .45));
}
.admin-ai-board-object.is-players {
    width: 42px; height: 42px; border-radius: 50%; background: #2f76d2; color: #fff; border: 3px solid #fff; font-weight: 800;
}
.admin-ai-board-object.is-players.is-red { background: #d9534f; }
.admin-ai-board-object.is-players.is-neutral { background: #475569; }
.admin-ai-board-object.is-players.is-keeper { background: #7c3aed; }
.admin-ai-board-object.is-players span { display: grid; place-items: center; width: 100%; height: 100%; }
.admin-ai-board-object.is-cones {
    width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 30px solid #f59e0b;
}
.admin-ai-board-object.is-cones.is-yellow { border-bottom-color: #facc15; }
.admin-ai-board-object.is-cones.is-blue { border-bottom-color: #2f76d2; }
.admin-ai-board-object.is-cones.is-red { border-bottom-color: #d9534f; }
.admin-ai-board-object.is-cones.is-green { border-bottom-color: #16a34a; }
.admin-ai-board-object.is-cones.is-white { border-bottom-color: #ffffff; filter: drop-shadow(0 0 .15rem rgba(0,0,0,.2)); }
.admin-ai-board-object-label { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); background: rgba(22,53,29,.85); color: #fff; padding: 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.admin-ai-board-object.is-balls {
    width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #111827; border: 2px solid #111827; display: grid; place-items: center; font-size: 14px;
}
.admin-ai-board-object.is-goals {
    width: 54px; height: 18px; border: 3px solid #fff; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.admin-ai-board-area {
    transform: none;
    border-radius: 14px;
    border: 2px dashed rgba(255,255,255,.92);
    background: rgba(47, 118, 210, .18);
    min-width: 20px;
    min-height: 20px;
    display: block;
}
.admin-ai-board-area span {
    position: absolute;
    top: 6px; left: 8px;
    font-size: 11px; font-weight: 700; color: #16351d;
    background: rgba(255,255,255,.82); border-radius: 999px; padding: 2px 6px;
}
.admin-ai-board-svg { z-index: 1; overflow: visible; }
.admin-ai-board-arrow {
    fill: none;
    stroke-linecap: round;
    cursor: pointer;
}
.admin-ai-board-arrow.is-selected { filter: drop-shadow(0 0 4px rgba(255,255,255,.55)); }
.admin-ai-board-arrow-label {
    fill: #fff;
    font-size: 4px;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(22,53,29,.85);
    stroke-width: .9px;
}
.admin-ai-board-arrow-handle {
    fill: #fff;
    stroke: #e84985;
    stroke-width: .7px;
    cursor: move;
}
.admin-ai-board-inspector {
    display: grid;
    gap: 1rem;
}
.admin-ai-board-inspector-card,
.admin-ai-board-json-box {
    padding: 1rem;
}
.admin-ai-board-object-list {
    display: grid;
    gap: .55rem;
}
.admin-ai-board-object-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #f8faf8;
    padding: .75rem .85rem;
    cursor: pointer;
    text-align: left;
}
.admin-ai-board-object-row.is-selected {
    border-color: rgba(232,73,133,.45);
    background: rgba(232,73,133,.08);
}
.admin-ai-board-object-row span { color: var(--muted); font-size: .88rem; }
.admin-ai-board-object-row strong { font-size: .92rem; }
.admin-ai-board-controls-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.admin-ai-board-json-box summary {
    cursor: pointer;
    font-weight: 700;
    margin-bottom: .75rem;
}
.admin-ai-board-json-actions { margin-top: .75rem; }
.admin-ai-board-preview-card small { display:block; color: var(--muted); margin-top: .5rem; }
@media (max-width: 980px) {
    .admin-ai-board-workspace { grid-template-columns: 1fr; }
    .admin-ai-board-controls-grid { grid-template-columns: 1fr; }
}


/* Algemene terugknop naar de bovenliggende pagina */
.page-parent-navigation {
    display: flex;
    align-items: center;
    margin: .85rem 0 .25rem;
}
.page-parent-navigation a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 38px;
    padding: .48rem .78rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    color: var(--text);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(20,40,25,.05);
}
.page-parent-navigation a:hover {
    border-color: rgba(var(--grass-rgb), .35);
    background: var(--grass-soft);
    color: var(--grass-dark);
}
.page-parent-navigation a span:first-child {
    font-size: 1.05rem;
    line-height: 1;
}
.ux-section-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}
.ux-section-heading-actions > a:not(.btn) {
    color: var(--grass-dark);
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
}
@media (max-width: 720px) {
    .page-parent-navigation {
        margin-top: .45rem;
    }
    .page-parent-navigation a {
        min-height: 34px;
        padding: .4rem .65rem;
        font-size: .78rem;
    }
    .ux-section-heading-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.admin-exercise-create-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
}
.admin-exercise-create-actions small {
    flex-basis: 100%;
    text-align: right;
}
.admin-ai-save-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
}
@media (max-width: 720px) {
    .admin-exercise-create-actions,
    .admin-ai-save-actions {
        width: 100%;
        justify-content: stretch;
    }
    .admin-exercise-create-actions .btn,
    .admin-ai-save-actions .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
    .admin-exercise-create-actions small { text-align: left; }
}


/* Systeemmails en wachtwoordherstel */
.auth-password-help { margin: -.65rem 0 .55rem; text-align: right; font-size: .82rem; }
.auth-password-help a { color: var(--grass-dark); font-weight: 700; text-decoration: none; }
.auth-password-help a:hover { text-decoration: underline; }
.mail-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.mail-status-grid > div { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); min-width: 0; }
.mail-status-grid small, .mail-status-grid strong { display: block; }
.mail-status-grid small { margin-bottom: .3rem; color: var(--muted); font-size: .72rem; }
.mail-status-grid strong { overflow-wrap: anywhere; }
@media (max-width: 760px) { .mail-status-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Dashboard UX-update 1 — snellere acties en mobiel weekoverzicht
   ============================================================ */
.ux-dashboard-head { align-items: flex-end; }
.ux-dashboard-selectors { display: flex; align-items: flex-end; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; }
.ux-team-select { display: flex; align-items: flex-end; }
.ux-team-select label { display: grid; gap: .28rem; color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ux-team-select select { min-width: 180px; }
.ux-dashboard-next-main .ux-focus-location { display: block; margin: -.45rem 0 .85rem; color: var(--text-soft); font-size: .72rem; }
.ux-dashboard-next-actions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.ux-dashboard-next-actions .btn { min-height: 42px; }
.ux-dashboard-next .ux-progress-track { margin: .7rem 0 .25rem; background: rgba(var(--grass-rgb),.16); }

.ux-dashboard-quick { padding: 1rem 1.15rem 1.15rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 5px 20px rgba(23,37,28,.045); }
.ux-dashboard-quick .ux-section-heading { margin-bottom: .7rem; }
.ux-dashboard-quick-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .55rem; }
.ux-dashboard-quick-grid > a { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: .55rem; min-height: 68px; padding: .65rem; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.ux-dashboard-quick-grid > a:hover { transform: translateY(-1px); border-color: rgba(var(--grass-rgb),.42); background: #fff; }
.ux-dashboard-quick-grid > a > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--grass-soft); color: var(--grass-dark); font-size: 1rem; font-weight: 900; }
.ux-dashboard-quick-grid strong { display: block; font-size: .78rem; line-height: 1.2; }
.ux-dashboard-quick-grid small { display: block; margin-top: .15rem; color: var(--muted); font-size: .61rem; line-height: 1.35; }

.ux-dashboard-agenda-row { align-items: center; }
.ux-event-readiness { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-top: .38rem; }
.ux-event-readiness i { display: inline-flex; align-items: center; min-height: 22px; padding: .18rem .42rem; border-radius: 999px; font-size: .56rem; font-style: normal; font-weight: 800; line-height: 1.2; }
.ux-event-readiness i.is-ready { background: var(--success-soft); color: var(--success); }
.ux-event-readiness i.is-open { background: var(--warning-soft); color: #98520c; }
.ux-dashboard-list-more { display: block; margin-top: .7rem; color: var(--grass-dark); font-size: .72rem; font-weight: 800; text-align: center; text-decoration: none; }
.ux-dashboard-season-summary { display: grid; gap: .7rem; }
.ux-dashboard-season-summary .ux-section-heading { margin-bottom: 0; padding: 0 .1rem; }

@media (max-width: 980px) {
    .ux-dashboard-quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
    .ux-dashboard-head { gap: .7rem; }
    .ux-dashboard-selectors { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
    .ux-dashboard-selectors > form,
    .ux-dashboard-selectors label,
    .ux-dashboard-selectors select { width: 100%; min-width: 0; }
    .ux-dashboard-selectors > form:only-child { grid-column: 1 / -1; }
    .ux-dashboard-next-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .ux-dashboard-next-actions .btn:first-child { grid-column: 1 / -1; }
    .ux-dashboard-next-actions .btn { width: 100%; padding-inline: .55rem; }
    .ux-dashboard-quick { margin-inline: -.05rem; padding: .85rem; border-radius: 15px; }
    .ux-dashboard-quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
    .ux-dashboard-quick-grid > a { grid-template-columns: 34px minmax(0,1fr); min-height: 64px; padding: .55rem; }
    .ux-dashboard-quick-grid > a > span { width: 34px; height: 34px; }
    .ux-dashboard-agenda-row { min-height: 100px; }
    .ux-event-readiness { margin-top: .32rem; }
    .ux-dashboard-season-summary .ux-section-heading { align-items: center; }
}

@media (max-width: 430px) {
    .ux-dashboard-selectors { grid-template-columns: 1fr; }
    .ux-dashboard-quick-grid { grid-template-columns: 1fr; }
    .ux-dashboard-quick-grid > a { min-height: 60px; }
    .ux-dashboard-next-actions { grid-template-columns: 1fr; }
    .ux-dashboard-next-actions .btn:first-child { grid-column: auto; }
    .ux-event-readiness { align-items: flex-start; }
}

/* ============================================================
   Mobiele formulierbreedte: voorkom horizontaal scrollen
   Datum- en tijdvelden krijgen in mobiele browsers soms een
   eigen minimale breedte. Houd alle formuliervelden binnen hun
   beschikbare kolom zonder de native picker uit te schakelen.
   ============================================================ */
form,
fieldset,
label,
.form-group,
.paste-row,
.team-two-fields,
.team-three-fields,
.team-form-grid,
.team-inline-add,
.team-event-details {
    min-width: 0;
    max-width: 100%;
}

input,
select,
textarea,
.paste-input {
    min-width: 0;
    max-width: 100%;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: hidden;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value,
input[type="week"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
}

@media (max-width: 760px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }

    form > *,
    fieldset > *,
    .team-two-fields > *,
    .team-three-fields > *,
    .team-form-grid > *,
    .team-inline-add > * {
        min-width: 0;
        max-width: 100%;
    }

    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   Mobiele formulierbreedte v2
   Native datum- en tijdvelden hebben op sommige mobiele browsers
   een intrinsieke minimumbreedte. Begrens daarom niet alleen het
   inputveld, maar ook de gridtrack, het label, de dialog en de
   interne WebKit-onderdelen van het veld.
   ============================================================ */
.team-two-fields,
.team-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.team-three-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.team-two-fields > *,
.team-three-fields > *,
.team-form-grid > *,
.ux-dialog-card > *,
.ux-dialog-card label {
    min-width: 0;
    max-width: 100%;
}

.ux-dialog,
.ux-dialog-card {
    min-width: 0;
    max-width: min(100%, 100vw);
}

.ux-dialog-card {
    width: 100%;
    overflow-x: hidden;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: hidden;
}

input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit,
input[type="week"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="month"]::-webkit-datetime-edit-fields-wrapper,
input[type="week"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value,
input[type="week"]::-webkit-date-and-time-value {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

@media (max-width: 760px) {
    .team-two-fields,
    .team-three-fields,
    .team-form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ux-dialog {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .ux-dialog-card label {
        width: 100%;
        overflow: hidden;
    }

    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   UX-update 2: mobiele formulieren en activiteit bewerken
   ============================================================ */
.team-event-return-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .45rem;
}
.team-event-return-nav .team-back-link { margin-top: 0; }
.team-back-link-secondary { color: var(--grass-dark); }

.ux-form-error-summary {
    padding: .8rem .9rem;
    border: 1px solid rgba(184, 50, 50, .28);
    border-radius: 13px;
    background: rgba(184, 50, 50, .07);
    color: #8e2929;
}
.ux-form-error-summary[hidden] { display: none !important; }
.ux-form-error-summary strong { display: block; font-size: .8rem; }
.ux-form-error-summary ul { margin: .35rem 0 0; padding-left: 1.1rem; font-size: .72rem; }
.ux-form-error-summary li + li { margin-top: .18rem; }
.paste-input.is-invalid,
.team-stat-input.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: #b83232 !important;
    box-shadow: 0 0 0 3px rgba(184, 50, 50, .1) !important;
}
.ux-field-error {
    display: block;
    margin-top: .28rem;
    color: #a72c2c;
    font-size: .68rem;
    font-weight: 750;
    line-height: 1.35;
}

.team-event-savebar[data-save-state="saving"] { border-top-color: rgba(154, 98, 0, .3); }
.team-event-savebar[data-save-state="saved"] { border-top-color: rgba(var(--grass-rgb), .35); }
.team-event-savebar[data-save-state="error"],
.team-event-savebar[data-save-state="offline"],
.team-event-savebar[data-save-state="conflict"] { border-top-color: rgba(184, 50, 50, .35); }
.team-event-save-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
}
.team-event-save-actions [aria-busy="true"] { cursor: progress; opacity: .78; }

@media (max-width: 760px) {
    .team-event-page { padding-bottom: .5rem; }
    .team-event-return-nav {
        position: relative;
        margin: .35rem 0 .25rem;
    }
    .team-event-return-nav .team-back-link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: .45rem .15rem;
        font-size: .75rem;
    }
    .team-event-return-nav .team-back-link-secondary { padding-left: .55rem; }

    .team-event-savebar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center !important;
        gap: .65rem !important;
        margin: 0 -.75rem -1rem !important;
        padding: .62rem .72rem calc(.62rem + env(safe-area-inset-bottom)) !important;
        border: 1px solid var(--line);
        border-bottom: 0;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -12px 28px rgba(23, 37, 28, .13) !important;
        backdrop-filter: blur(12px);
    }
    .team-event-savebar > .team-event-save-status {
        display: block !important;
        min-width: 0;
    }
    .team-event-save-status strong {
        overflow: hidden;
        color: var(--ink);
        font-size: .7rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .team-event-save-status span { display: none !important; }
    .team-event-savebar > .team-event-save-actions {
        display: flex !important;
        width: auto;
        min-width: 0;
    }
    .team-event-save-actions .btn { width: auto !important; min-height: 44px; }
    .team-event-save-actions .btn-ghost { display: none; }
    .team-event-save-actions .btn-solid { min-width: 126px; padding-inline: .85rem; }

    .ux-dialog-card[data-ux-dialog-form],
    .ux-dialog-card:has([data-form-error-summary]) {
        padding-bottom: 0 !important;
    }
    .ux-dialog-actions {
        position: sticky;
        z-index: 8;
        bottom: 0;
        margin: .2rem -1.2rem 0;
        padding: .75rem 1.2rem calc(.75rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -9px 22px rgba(23, 37, 28, .08);
        backdrop-filter: blur(10px);
    }
    .ux-dialog-actions .btn { min-height: 46px; }
    .ux-form-error-summary { scroll-margin-top: 80px; }
    .paste-input,
    .team-stat-input,
    .ux-dialog-card input,
    .ux-dialog-card select,
    .ux-dialog-card textarea { min-height: 44px; }
}

@media (max-width: 430px) {
    .team-event-savebar { grid-template-columns: minmax(0, 1fr) 118px; }
    .team-event-save-actions .btn-solid { width: 118px !important; min-width: 118px; padding-inline: .55rem; }
    .team-event-return-nav { gap: .35rem; }
    .team-event-return-nav .team-back-link { font-size: .7rem; }
}
.team-event-form > .team-event-savebar {
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(23, 37, 28, .06);
}
@media (max-width: 760px) {
    .team-event-form > .team-event-savebar {
        border-radius: 14px 14px 0 0;
    }
}

/* ============================================================
   Teamupdate: wedstrijdtaken, spelersbeheer, schema en stats v3
   ============================================================ */

.team-match-completion-card {
    margin: 0 0 1.1rem;
    padding: 1.1rem;
    border: 1px solid rgba(var(--accent-rgb), .28);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .08), #fff 72%);
    box-shadow: var(--shadow);
}
.team-match-completion-card.is-complete {
    border-color: rgba(var(--grass-rgb), .3);
    background: linear-gradient(135deg, rgba(var(--grass-rgb), .09), #fff 72%);
}
.team-match-completion-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.team-match-completion-head h2 { margin:.08rem 0 .15rem; font-size:1.25rem; line-height:1.2; }
.team-match-completion-head p { margin:0; color:var(--muted); font-size:.92rem; }
.team-match-completion-score { display:grid; place-items:center; min-width:3.4rem; min-height:3.4rem; border-radius:999px; background:var(--card); border:1px solid var(--line); font-weight:850; }
.team-match-completion-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.team-match-completion-grid a { display:flex; align-items:center; gap:.65rem; min-width:0; padding:.72rem; border:1px solid var(--line); border-radius:13px; background:#fff; text-decoration:none; }
.team-match-completion-grid a > span { display:grid; place-items:center; flex:0 0 1.75rem; width:1.75rem; height:1.75rem; border-radius:999px; font-weight:900; }
.team-match-completion-grid a.is-done > span { background:rgba(var(--grass-rgb),.14); color:var(--grass-dark); }
.team-match-completion-grid a.is-open > span { background:var(--accent-soft); color:var(--accent-dark); }
.team-match-completion-grid a div { min-width:0; display:grid; }
.team-match-completion-grid strong { font-size:.88rem; line-height:1.2; }
.team-match-completion-grid small { overflow:hidden; color:var(--muted); font-size:.74rem; text-overflow:ellipsis; white-space:nowrap; }

.ux-dashboard-incomplete-matches { border-color:rgba(var(--accent-rgb),.25); }
.ux-incomplete-match-list { display:grid; gap:.55rem; }
.ux-incomplete-match-list > a { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:.75rem; padding:.7rem; border:1px solid var(--line); border-radius:13px; background:#fff; text-decoration:none; }
.ux-incomplete-match-list time { display:grid; place-items:center; width:3rem; line-height:1; }
.ux-incomplete-match-list time strong { font-size:1.25rem; }
.ux-incomplete-match-list time small { margin-top:.25rem; color:var(--muted); font-size:.67rem; }
.ux-incomplete-match-list div { min-width:0; }
.ux-incomplete-match-list div strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ux-incomplete-match-list p { margin:.15rem 0 0; color:var(--muted); font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ux-incomplete-match-list > a > span { padding:.25rem .5rem; border-radius:999px; background:var(--accent-soft); color:var(--accent-dark); font-size:.75rem; font-weight:800; white-space:nowrap; }

.ux-agenda-row.has-open-tasks { border-color:rgba(var(--accent-rgb),.26); }
.ux-agenda-task-badge { display:inline-flex; width:max-content; margin-top:.35rem; padding:.15rem .45rem; border-radius:999px; background:var(--accent-soft); color:var(--accent-dark); font-size:.72rem; font-weight:800; }
.ux-alert-dot { min-width:1.65rem; padding:0 .35rem; border-radius:999px; font-style:normal; }

/* Spelersbeheer v2 */
.team-players-page-v2 .ux-page-head-actions { flex-wrap:wrap; }
.ux-player-view-tabs { display:flex; gap:.35rem; width:max-content; max-width:100%; margin:0 0 1rem; padding:.3rem; border:1px solid var(--line); border-radius:14px; background:#fff; overflow:auto; }
.ux-player-view-tabs a { display:flex; align-items:center; gap:.45rem; padding:.55rem .75rem; border-radius:10px; text-decoration:none; color:var(--muted); font-size:.86rem; font-weight:780; white-space:nowrap; }
.ux-player-view-tabs a.is-active { background:var(--ink); color:#fff; }
.ux-player-view-tabs b { display:grid; place-items:center; min-width:1.35rem; height:1.35rem; padding:0 .3rem; border-radius:999px; background:rgba(255,255,255,.14); font-size:.7rem; }
.ux-player-toolbar-v2 { align-items:end; }
.ux-player-toolbar-summary { display:flex; flex-wrap:wrap; gap:.45rem; }
.ux-player-toolbar-summary span { padding:.52rem .7rem; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--muted); font-size:.78rem; }
.ux-player-toolbar-summary strong { color:var(--ink); }
.ux-player-card-grid-v2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ux-player-card-v2 { display:grid; gap:.7rem; min-width:0; }
.ux-player-card-v2.is-archived { opacity:.78; }
.ux-player-card-copy { min-width:0; }
.ux-player-duty-badges { display:flex; flex-wrap:wrap; gap:.32rem; }
.ux-player-duty-badges span { padding:.18rem .45rem; border-radius:999px; font-size:.68rem; font-weight:800; }
.ux-player-duty-badges .is-on { background:rgba(var(--grass-rgb),.12); color:var(--grass-dark); }
.ux-player-duty-badges .is-off { background:#eef0ec; color:var(--muted); }
.ux-player-mini-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; margin:0; }
.ux-player-mini-stats div { min-width:0; padding:.5rem; border-radius:10px; background:var(--grass-soft); }
.ux-player-mini-stats dt { color:var(--muted); font-size:.65rem; line-height:1.2; }
.ux-player-mini-stats dd { margin:.12rem 0 0; font-weight:850; }
.ux-player-card-actions-v2 { justify-content:space-between; }
.ux-duty-preferences { margin:0; padding:.85rem; border:1px solid var(--line); border-radius:13px; }
.ux-duty-preferences legend { padding:0 .35rem; font-weight:850; }
.ux-duty-preferences > label { display:flex; align-items:center; gap:.55rem; }
.ux-duty-preferences > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; margin-top:.65rem; }
.ux-duty-preferences > div label { display:flex; align-items:center; gap:.4rem; padding:.5rem; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:.82rem; }
.ux-duty-preferences > div.is-disabled { opacity:.45; }

/* Rijd-, was- en vlagschema v2 */
.team-duty-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; margin:0 0 1rem; }
.team-duty-kpi-grid article { min-width:0; padding:.9rem; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 5px 16px rgba(23,37,28,.05); }
.team-duty-kpi-grid span,.team-duty-kpi-grid small { display:block; color:var(--muted); font-size:.75rem; }
.team-duty-kpi-grid strong { display:block; margin:.15rem 0; font-size:1.65rem; line-height:1; }
.team-duty-balance-list { display:grid; gap:.48rem; }
.team-duty-balance-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.75rem; padding:.65rem; border:1px solid var(--line); border-radius:12px; background:#fff; }
.team-duty-balance-row.is-disabled { opacity:.55; }
.team-duty-balance-player { display:flex; align-items:center; gap:.6rem; min-width:0; }
.team-duty-balance-player > span:last-child { min-width:0; display:grid; }
.team-duty-balance-player strong,.team-duty-balance-player small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team-duty-balance-player small { color:var(--muted); font-size:.72rem; }
.team-duty-balance-row dl { display:grid; grid-template-columns:repeat(4,3.7rem); gap:.3rem; margin:0; }
.team-duty-balance-row dl div { padding:.35rem; border-radius:9px; background:var(--grass-soft); text-align:center; }
.team-duty-balance-row dl .is-total { background:var(--ink); color:#fff; }
.team-duty-balance-row dt { font-size:.62rem; }
.team-duty-balance-row dd { margin:.1rem 0 0; font-weight:850; }
.team-duty-match-card.has-open-duty { border-color:rgba(var(--accent-rgb),.28); }
.team-duty-match-copy em { display:inline-flex; margin-top:.28rem; color:var(--accent-dark); font-size:.72rem; font-style:normal; font-weight:800; }
.team-duty-player-list-v2 { gap:.55rem; }
.team-duty-player-list-v2 article { padding:.55rem; border:1px solid var(--line); border-radius:12px; background:#fff; }
.team-duty-player-list-v2 article.is-disabled { opacity:.58; }
.team-duty-player-master { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.55rem; }
.team-duty-player-master > span:nth-child(2) { min-width:0; display:grid; }
.team-duty-role-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.3rem; margin-top:.5rem; }
.team-duty-role-options label { display:flex; justify-content:center; align-items:center; gap:.3rem; padding:.35rem; border-radius:8px; background:var(--grass-soft); font-size:.7rem; }

/* Statistieken v3 */
.team-stats-hero-actions { display:flex; align-items:end; gap:.55rem; flex-wrap:wrap; }
.team-stats-cards-v3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.team-stats-cards-v3 article { min-height:8rem; }
.team-form-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.55rem; }
.team-form-strip a { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.35rem .5rem; min-width:0; padding:.65rem; border:1px solid var(--line); border-radius:12px; background:#fff; text-decoration:none; }
.team-form-strip b { grid-row:span 2; display:grid; place-items:center; width:2rem; height:2rem; border-radius:999px; font-size:.8rem; }
.team-form-strip .is-w b { background:rgba(var(--grass-rgb),.14); color:var(--grass-dark); }
.team-form-strip .is-g b { background:#eceeea; color:var(--ink); }
.team-form-strip .is-v b { background:var(--accent-soft); color:var(--accent-dark); }
.team-form-strip span { font-weight:850; }
.team-form-strip small { min-width:0; overflow:hidden; color:var(--muted); font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.team-stats-overview-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:.8rem; }
.team-result-bar { display:flex; width:100%; height:.72rem; overflow:hidden; border-radius:999px; background:#eceeea; }
.team-result-bar i { display:block; height:100%; }
.team-result-bar .is-win { background:var(--grass); }
.team-result-bar .is-draw { background:#aeb6ac; }
.team-result-bar .is-loss { background:var(--accent); }
.team-result-legend { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; margin:.8rem 0; }
.team-result-legend div { padding:.55rem; border-radius:10px; background:var(--grass-soft); }
.team-result-legend dt { color:var(--muted); font-size:.7rem; }
.team-result-legend dd { display:flex; align-items:baseline; justify-content:space-between; gap:.3rem; margin:.1rem 0 0; font-size:1.2rem; font-weight:850; }
.team-result-legend small { color:var(--muted); font-size:.65rem; }
.team-home-away-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
.team-home-away-grid article { padding:.65rem; border:1px solid var(--line); border-radius:11px; }
.team-home-away-grid span,.team-home-away-grid small { display:block; color:var(--muted); font-size:.7rem; }
.team-home-away-grid strong { display:block; margin:.1rem 0; }
.team-monthly-bars { display:flex; align-items:stretch; gap:.45rem; min-height:13rem; overflow-x:auto; padding:.4rem 0 .2rem; }
.team-monthly-bars article { display:grid; grid-template-rows:minmax(8rem,1fr) auto auto; flex:1 0 4rem; min-width:4rem; text-align:center; }
.team-monthly-bars article > div { position:relative; display:flex; align-items:end; justify-content:center; min-height:8rem; border-bottom:1px solid var(--line); }
.team-monthly-bars i { width:1.45rem; min-height:.25rem; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--grass),var(--grass-dark)); }
.team-monthly-bars strong { position:absolute; top:.15rem; font-size:.68rem; }
.team-monthly-bars span { margin-top:.35rem; font-size:.7rem; font-weight:800; white-space:nowrap; }
.team-monthly-bars small { color:var(--muted); font-size:.62rem; }
.team-highlight-grid-v3 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.team-player-stat-metrics-v3 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.team-player-stat-metrics-v3 dd small { display:block; color:var(--muted); font-size:.62rem; font-weight:600; }
.team-match-stat-list { display:grid; gap:.5rem; }
.team-match-stat-list > a { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(9rem,.35fr) auto; align-items:center; gap:.75rem; padding:.7rem; border:1px solid var(--line); border-radius:13px; background:#fff; text-decoration:none; }
.team-match-stat-list time { display:grid; place-items:center; width:3.1rem; line-height:1; }
.team-match-stat-list time strong { font-size:1.25rem; }
.team-match-stat-list time small { margin-top:.25rem; color:var(--muted); font-size:.67rem; }
.team-match-stat-main { min-width:0; display:grid; }
.team-match-stat-main > strong,.team-match-stat-main > small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team-match-stat-main > small { color:var(--muted); font-size:.78rem; }
.team-match-completion-mini { display:grid; gap:.25rem; }
.team-match-completion-mini strong { font-size:.76rem; }
.team-match-completion-mini small { color:var(--muted); font-size:.68rem; }

@media (max-width: 820px) {
    .team-match-completion-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ux-player-card-grid-v2 { grid-template-columns:1fr; }
    .team-duty-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .team-stats-cards-v3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .team-stats-overview-grid { grid-template-columns:1fr; }
    .team-highlight-grid-v3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .team-match-stat-list > a { grid-template-columns:auto minmax(0,1fr) auto; }
    .team-match-completion-mini { grid-column:2 / -1; }
}

@media (max-width: 600px) {
    .team-match-completion-card { padding:.8rem; border-radius:15px; }
    .team-match-completion-head { align-items:center; }
    .team-match-completion-head h2 { font-size:1.05rem; }
    .team-match-completion-score { min-width:2.9rem; min-height:2.9rem; font-size:.82rem; }
    .team-match-completion-grid { grid-template-columns:1fr; }
    .team-match-completion-grid a { padding:.62rem; }
    .ux-incomplete-match-list > a { grid-template-columns:auto minmax(0,1fr) auto; }
    .ux-incomplete-match-list > a > span { grid-column:2; width:max-content; }
    .ux-incomplete-match-list > a > b { grid-row:1 / 3; grid-column:3; }
    .ux-player-toolbar-v2 { align-items:stretch; }
    .ux-player-toolbar-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ux-player-card-actions-v2 { position:static; display:flex; }
    .ux-player-mini-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .ux-player-mini-stats div { padding:.42rem; }
    .ux-duty-preferences > div { grid-template-columns:1fr; }
    .team-duty-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .team-duty-kpi-grid article { padding:.7rem; }
    .team-duty-kpi-grid strong { font-size:1.35rem; }
    .team-duty-balance-row { grid-template-columns:1fr; }
    .team-duty-balance-row dl { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .team-duty-role-options { grid-template-columns:1fr; }
    .team-duty-role-options label { justify-content:flex-start; }
    .team-stats-hero-actions { align-items:stretch; }
    .team-stats-hero-actions .team-season-picker,.team-stats-hero-actions .btn { width:100%; }
    .team-stats-cards-v3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .team-stats-cards-v3 article { min-height:6.8rem; padding:.72rem; }
    .team-stats-cards-v3 strong { font-size:1.45rem; }
    .team-form-strip { display:flex; overflow-x:auto; padding-bottom:.2rem; }
    .team-form-strip a { flex:0 0 9.4rem; }
    .team-result-legend { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .team-highlight-grid-v3 { grid-template-columns:1fr; }
    .team-player-stat-metrics-v3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .team-match-stat-list > a { grid-template-columns:auto minmax(0,1fr) auto; }
    .team-match-completion-mini { grid-column:1 / -1; padding-left:3.85rem; }
}

@media (max-width: 380px) {
    .team-stats-cards-v3,.team-duty-kpi-grid { grid-template-columns:1fr; }
    .ux-player-mini-stats { grid-template-columns:1fr; }
}


/* ============================================================
   Oefening-editor — AI-optimalisatie en optionele TikTok-bron
   ============================================================ */
.admin-ai-edit-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .65rem; }
.admin-ai-optimize-trigger { box-shadow: 0 8px 18px rgba(57, 104, 67, .16); }
.admin-ai-source-link { margin: .75rem 0 0; }
.admin-exercise-ai-dialog[hidden] { display: none !important; }
.admin-exercise-ai-dialog { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 1rem; }
.admin-exercise-ai-backdrop { position: absolute; inset: 0; background: rgba(15, 31, 18, .62); backdrop-filter: blur(3px); }
.admin-exercise-ai-modal { position: relative; width: min(980px, 100%); max-height: min(90vh, 900px); overflow: auto; background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 28px 80px rgba(10, 28, 15, .28); padding: 1.2rem; }
.admin-exercise-ai-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.admin-exercise-ai-modal-head h2 { margin: .15rem 0 .35rem; }
.admin-exercise-ai-modal-head p { margin: 0; color: var(--muted); max-width: 720px; }
.admin-exercise-ai-close { border: 0; background: var(--grass-soft); color: var(--text); width: 40px; height: 40px; border-radius: 50%; font-size: 1.55rem; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.admin-exercise-ai-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.admin-exercise-ai-steps > section { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.admin-exercise-ai-step-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .75rem; }
.admin-exercise-ai-step-head > span { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--grass-dark); color: #fff; font-weight: 800; }
.admin-exercise-ai-step-head strong, .admin-exercise-ai-step-head small { display: block; }
.admin-exercise-ai-step-head small { color: var(--muted); margin-top: .15rem; }
.admin-exercise-ai-prompt { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.45; }
.admin-exercise-ai-result-status, .admin-ai-copy-status { min-height: 1.25rem; margin: .55rem 0 0; font-size: .82rem; color: var(--muted); }
.admin-exercise-ai-result-status.is-error, .admin-ai-copy-status.is-error { color: #b42318; }
.admin-exercise-ai-result-status.is-ok, .admin-ai-copy-status.is-ok { color: var(--grass-dark); }
body.has-admin-exercise-ai-dialog { overflow: hidden; }
@media (max-width: 800px) {
  .admin-ai-edit-actions { width: 100%; justify-content: stretch; }
  .admin-ai-edit-actions .btn { flex: 1 1 100%; justify-content: center; }
  .admin-exercise-ai-dialog { padding: .5rem; align-items: end; }
  .admin-exercise-ai-modal { max-height: 94vh; border-radius: 22px 22px 12px 12px; padding: .9rem; }
  .admin-exercise-ai-steps { grid-template-columns: 1fr; }
  .admin-exercise-ai-modal-head { position: sticky; top: -.9rem; z-index: 2; background: var(--paper, #fff); padding-top: .8rem; }
}


/* Oefeningen-update 2: tactisch bord als eerste, kaarten zonder overlap */
.ai-exercise-board-primary {
    width: min(100%, 760px);
    margin: 0 auto 1.15rem;
    padding: .7rem;
}
.ai-exercise-board-primary img {
    width: 100%;
    max-height: min(72vh, 820px);
}
.ai-exercise-board-primary figcaption { text-align: center; }
.ai-exercise-side:empty { display: none; }
.ai-exercise-layout:has(.ai-exercise-side:empty) { grid-template-columns: 1fr; }
.card-ai-exercise .card-stamp { display: none; }

/* Volledig veld: laat ook in de editor de twee 16-metergebieden zien. */
.admin-ai-board-field-marking {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    border: 3px solid rgba(255,255,255,.85);
}
.admin-ai-board-field-marking.is-penalty-top { left: 29%; right: 29%; top: 0; height: 15%; border-top: 0; }
.admin-ai-board-field-marking.is-penalty-bottom { left: 29%; right: 29%; bottom: 0; height: 15%; border-bottom: 0; }
@media (max-width: 620px) {
    .ai-exercise-board-primary { padding: .45rem; border-radius: 18px; }
    .ai-exercise-board-primary img { border-radius: 14px; max-height: none; }
}

.card-category-label {
    display: inline-flex;
    margin: 0 0 .45rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: var(--grass-soft);
    color: var(--grass-dark);
    font-size: .62rem;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Oefeningenbibliotheek update 3: filters, favorieten en persoonlijke oefenstof */
.exercise-filter-panel {
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(23,37,28,.05);
}
.exercise-filter-main {
    display: grid;
    grid-template-columns: minmax(240px,2fr) repeat(4,minmax(130px,1fr));
    gap: .65rem;
    align-items: end;
}
.exercise-filter-main > label { display: grid; gap: .3rem; min-width: 0; color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.exercise-filter-search { min-width: 0; }
.exercise-filter-lower { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.exercise-age-filter { margin: 0; padding: 0; border: 0; }
.exercise-age-filter legend { margin: 0 0 .35rem; color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.exercise-age-filter > div { display: flex; gap: .35rem; flex-wrap: wrap; }
.exercise-age-filter label,
.exercise-favorite-filter { cursor: pointer; }
.exercise-age-filter input,
.exercise-favorite-filter input { position: absolute; opacity: 0; pointer-events: none; }
.exercise-age-filter label span,
.exercise-favorite-filter span {
    display: inline-flex; align-items: center; min-height: 36px; padding: .4rem .7rem;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft);
    color: var(--text-soft); font-size: .7rem; font-weight: 800; line-height: 1;
}
.exercise-age-filter input:checked + span,
.exercise-favorite-filter input:checked + span { border-color: var(--grass); background: var(--grass-soft); color: var(--grass-dark); }
.exercise-filter-reset { margin-left: auto; }
.exercise-active-filters { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.exercise-active-filters button { border: 0; border-radius: 999px; padding: .35rem .6rem; background: #edf3ea; color: var(--grass-dark); font: inherit; font-size: .65rem; font-weight: 800; cursor: pointer; }
.exercise-active-filters button span { margin-left: .2rem; }
.exercise-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: .45rem 0 .8rem; }
.exercise-results-head strong { font-size: .9rem; }
.exercise-results-head span { color: var(--muted); font-size: .68rem; }
.exercise-library-grid .card[hidden] { display: none !important; }
.exercise-filter-empty { margin-top: 1rem; }

.exercise-recent-section { margin: 0 0 1rem; }
.exercise-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 0 0 .65rem; }
.exercise-section-head h2 { margin: .1rem 0; font-size: 1.15rem; }
.exercise-section-head p { margin: 0; color: var(--muted); font-size: .72rem; }
.exercise-section-head > a { color: var(--grass-dark); font-size: .72rem; font-weight: 800; }
.exercise-recent-strip { display: flex; gap: .6rem; overflow-x: auto; padding: .1rem .05rem .35rem; scrollbar-width: thin; }
.exercise-recent-card { flex: 0 0 225px; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: .6rem; align-items: center; padding: .5rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: inherit; text-decoration: none; }
.exercise-recent-card > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; background: var(--grass-soft); }
.exercise-recent-card img { width: 100%; height: 100%; object-fit: cover; }
.exercise-recent-card strong, .exercise-recent-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exercise-recent-card strong { font-size: .74rem; }
.exercise-recent-card small { margin-top: .15rem; color: var(--muted); font-size: .62rem; }

.card { display: flex; flex-direction: column; min-width: 0; }
.card-link { flex: 1 1 auto; }
.card-video-indicator { position: absolute; right: .65rem; top: .65rem; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: rgba(18,28,21,.82); color: #fff; font-size: .68rem; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.card-exercise-meta { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin-top: .55rem; color: var(--muted); font-size: .62rem; font-weight: 700; }
.card-exercise-meta span { position: relative; }
.card-exercise-meta span + span::before { content: "·"; margin-right: .5rem; color: #a3ada5; }
.card-level-label, .card-usage-label { display: block; margin-top: .4rem; color: var(--muted); font-size: .6rem; }
.card-usage-label { color: var(--grass-dark); font-weight: 750; }
.card-quick-actions { display: flex; align-items: center; gap: .45rem; padding: .6rem .75rem .75rem; border-top: 1px solid var(--line); background: rgba(249,250,247,.78); }
.card-favorite-form { margin: 0; }
.card-icon-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #9ba39d; font-size: 1rem; cursor: pointer; }
.card-icon-button.is-active { border-color: #dfb35d; background: #fff7dc; color: #b17800; }
.card-training-button { flex: 1; display: inline-flex; justify-content: center; align-items: center; min-height: 36px; padding: .4rem .6rem; border-radius: 10px; background: var(--grass-soft); color: var(--grass-dark); font-size: .68rem; font-weight: 850; text-decoration: none; }

.exercise-board-image-wrap { position: relative; }
.exercise-board-fullscreen-trigger { position: absolute; right: .65rem; bottom: .65rem; z-index: 4; padding: .42rem .65rem; border: 1px solid rgba(255,255,255,.55); border-radius: 9px; background: rgba(18,28,21,.78); color: #fff; font: inherit; font-size: .65rem; font-weight: 800; cursor: pointer; backdrop-filter: blur(5px); }
.exercise-board-fullscreen { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); background: rgba(8,15,10,.95); }
.exercise-board-fullscreen img { display: block; max-width: 96vw; max-height: 94vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; }
.exercise-board-fullscreen button { position: fixed; top: max(.7rem,env(safe-area-inset-top)); right: max(.7rem,env(safe-area-inset-right)); z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 999px; background: #fff; color: #162119; font-size: 1.5rem; cursor: pointer; }

.exercise-personal-panel, .exercise-similar-section { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.exercise-feedback-form { display: grid; gap: .75rem; padding: .9rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.exercise-feedback-form fieldset { margin: 0; padding: 0; border: 0; }
.exercise-feedback-form legend, .exercise-feedback-form > label > span { display: block; margin-bottom: .4rem; font-size: .7rem; font-weight: 800; }
.exercise-rating-options { display: flex; flex-wrap: wrap; gap: .45rem; }
.exercise-rating-options label { cursor: pointer; }
.exercise-rating-options input { position: absolute; opacity: 0; pointer-events: none; }
.exercise-rating-options span { display: inline-flex; align-items: center; min-height: 38px; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: .7rem; font-weight: 750; }
.exercise-rating-options input:checked + span { border-color: var(--grass); background: var(--grass-soft); color: var(--grass-dark); }
.exercise-inline-saved { color: var(--grass-dark); font-size: .68rem; font-weight: 800; }
.exercise-similar-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }

.admin-ai-age-select { margin: 0; padding: .65rem; border: 1px solid var(--line); border-radius: 13px; min-width: 0; }
.admin-ai-age-select legend { padding: 0 .25rem; font-size: .7rem; font-weight: 800; }
.admin-ai-age-select legend small { color: var(--muted); font-weight: 600; }
.admin-ai-check-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.admin-ai-check-option { cursor: pointer; }
.admin-ai-check-option input { position: absolute; opacity: 0; pointer-events: none; }
.admin-ai-check-option span { display: inline-flex; min-height: 38px; align-items: center; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: .7rem; font-weight: 800; }
.admin-ai-check-option input:checked + span { border-color: var(--grass); background: var(--grass-soft); color: var(--grass-dark); }
.admin-ai-variant-menu { position: relative; }
.admin-ai-variant-menu > summary { list-style: none; cursor: pointer; }
.admin-ai-variant-menu > summary::-webkit-details-marker { display: none; }
.admin-ai-variant-menu > div { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 30; min-width: 190px; padding: .35rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.admin-ai-variant-menu a { display: block; padding: .5rem .6rem; border-radius: 8px; color: inherit; font-size: .7rem; font-weight: 750; text-decoration: none; }
.admin-ai-variant-menu a:hover { background: var(--surface-soft); }

@media (max-width: 1100px) {
    .exercise-filter-main { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .exercise-filter-search { grid-column: span 2; }
}
@media (max-width: 760px) {
    .exercise-filter-panel { padding: .75rem; }
    .exercise-filter-main { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .exercise-filter-search { grid-column: 1 / -1; }
    .exercise-filter-lower { align-items: flex-start; }
    .exercise-filter-reset { margin-left: 0; }
    .exercise-results-head { align-items: flex-start; flex-direction: column; gap: .15rem; }
    .exercise-similar-grid { grid-template-columns: 1fr; }
    .exercise-section-head { align-items: flex-start; }
    .exercise-board-fullscreen-trigger { right: .45rem; bottom: .45rem; }
}
@media (max-width: 460px) {
    .exercise-filter-main { grid-template-columns: 1fr; }
    .exercise-filter-search { grid-column: auto; }
    .exercise-age-filter { width: 100%; }
    .exercise-age-filter > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
    .exercise-age-filter label span { justify-content: center; padding-inline: .35rem; }
    .card-quick-actions { padding: .55rem .65rem .65rem; }
    .exercise-rating-options { display: grid; grid-template-columns: 1fr; }
    .exercise-rating-options span { width: 100%; justify-content: center; }
    .admin-ai-check-grid { display: grid; grid-template-columns: 1fr; }
}


/* Tactiekbord hotfix: appearance controls en fasebediening mogen nooit overlappen. */
.team-tactics-toolbar-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: end;
}
.team-tactics-title-field,
.team-tactics-field-controls {
    grid-column: 1 / -1;
    min-width: 0;
}
.team-tactics-field-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100%;
}
.team-tactics-frame-controls,
.team-tactics-play-controls {
    min-width: 0;
    align-self: end;
}
.team-tactics-frame-controls > *,
.team-tactics-play-controls > * {
    min-width: 0;
}
@media (max-width: 820px) {
    .team-tactics-toolbar-panel {
        grid-template-columns: 1fr !important;
    }
    .team-tactics-title-field,
    .team-tactics-field-controls,
    .team-tactics-frame-controls,
    .team-tactics-play-controls {
        grid-column: 1;
        width: 100%;
    }
    .team-tactics-field-controls {
        grid-template-columns: 1fr !important;
    }
    .team-tactics-frame-controls,
    .team-tactics-play-controls {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .team-tactics-frame-controls label,
    .team-tactics-play-controls label {
        grid-column: 1 / -1;
    }
}

/* ========================================================================== 
   Corveerooster
   ========================================================================== */
.team-chore-page { display: grid; gap: 1rem; }
.team-chore-current {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1.35rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(135deg, var(--grass-soft), #fff);
    box-shadow: 0 10px 26px rgba(23,37,28,.06);
}
.team-chore-current.is-empty { background: #fff; border-style: dashed; }
.team-chore-current-copy h2 { margin: .18rem 0 .35rem; }
.team-chore-current-copy p { margin: 0; color: var(--muted); }
.team-chore-current-players { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; }
.team-chore-person {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: .6rem;
    min-width: 180px;
    padding: .65rem .8rem;
    border: 1px solid rgba(var(--grass-rgb),.18);
    border-radius: 14px;
    background: rgba(255,255,255,.88);
}
.team-chore-person > span:last-child { min-width: 0; }
.team-chore-person small, .team-chore-person strong { display: block; }
.team-chore-person small { color: var(--grass-dark); font-size: .58rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.team-chore-person strong { margin-top: .08rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-chore-kpis { margin: 0; }
.team-chore-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(290px,.65fr); gap: 1rem; align-items: start; }
.team-chore-generator-form { display: grid; gap: .85rem; }
.team-chore-generator-fields { align-items: end; }
.team-chore-replace {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: .6rem !important;
    min-height: 48px;
    padding: .55rem .65rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8faf7;
    cursor: pointer;
}
.team-chore-replace input { width: 18px; height: 18px; }
.team-chore-replace strong, .team-chore-replace small { display: block; }
.team-chore-replace strong { font-size: .68rem; }
.team-chore-replace small { margin-top: .12rem; color: var(--muted); font-size: .58rem; font-weight: 650; }
.team-chore-generator-summary { margin-top: 0; }
.team-chore-week-list { display: grid; gap: .65rem; }
.team-chore-week {
    display: grid;
    grid-template-columns: 64px minmax(0,1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
}
.team-chore-week.is-current { border-color: var(--grass); box-shadow: inset 4px 0 0 var(--grass); }
.team-chore-week-date {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 64px;
    padding: .4rem;
    border-radius: 12px;
    background: var(--grass-soft);
    color: var(--grass-dark);
    text-align: center;
}
.team-chore-week-date strong { font-size: .9rem; }
.team-chore-week-date span { margin-top: .1rem; font-size: .62rem; font-weight: 800; }
.team-chore-week-date small { color: var(--muted); font-size: .52rem; }
.team-chore-week-main { min-width: 0; }
.team-chore-week-head { display: flex; align-items: center; justify-content: space-between; gap: .55rem; }
.team-chore-week-head > div { min-width: 0; }
.team-chore-week-head strong, .team-chore-week-head small { display: block; }
.team-chore-week-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-chore-week-head small { margin-top: .12rem; color: var(--muted); font-size: .6rem; }
.team-chore-week-people { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem; }
.team-chore-person-mini {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    padding: .28rem .48rem;
    border-radius: 999px;
    background: #f4f7f2;
}
.team-chore-person-mini strong { max-width: 150px; overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.team-chore-edit { position: relative; }
.team-chore-edit > summary {
    list-style: none;
    padding: .45rem .6rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-size: .64rem;
    font-weight: 800;
    cursor: pointer;
}
.team-chore-edit > summary::-webkit-details-marker { display: none; }
.team-chore-edit[open] { grid-column: 1 / -1; }
.team-chore-edit[open] > summary { width: max-content; margin-left: auto; }
.team-chore-edit form { display: grid; gap: .65rem; margin-top: .65rem; padding: .75rem; border-top: 1px solid var(--line); }
.team-chore-selects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.team-chore-selects label, .team-chore-manual-form label { display: grid; gap: .3rem; color: var(--ink); font-size: .66rem; font-weight: 800; }
.team-chore-edit-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .55rem; }
.team-chore-past { margin-top: .85rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.team-chore-past > summary { color: var(--grass-dark); font-size: .68rem; font-weight: 850; cursor: pointer; }
.team-chore-past-list { display: grid; gap: .35rem; margin-top: .65rem; }
.team-chore-past-list > div { display: flex; justify-content: space-between; gap: .75rem; padding: .48rem .55rem; border-radius: 9px; background: #f7f9f5; font-size: .63rem; }
.team-chore-past-list span { color: var(--muted); }
.team-chore-manual-form { display: grid; gap: .65rem; margin-top: .75rem; }
.team-chore-count-list { display: grid; gap: .38rem; margin-top: .75rem; }
.team-chore-count-list > div { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .5rem; padding: .45rem .5rem; border-radius: 10px; background: #f7f9f5; }
.team-chore-count-list strong { min-width: 0; overflow: hidden; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.team-chore-count-list em { min-width: 32px; padding: .2rem .4rem; border-radius: 999px; background: var(--grass-soft); color: var(--grass-dark); font-size: .62rem; font-style: normal; font-weight: 900; text-align: center; }
.team-chore-share pre { max-height: 290px; overflow: auto; margin: .7rem 0; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; background: #f7f9f5; color: #465149; font: 600 .66rem/1.55 "Instrument Sans", sans-serif; white-space: pre-wrap; }
.team-chore-share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.team-chore-share-actions .btn { width: 100%; }

@media (max-width: 980px) {
    .team-chore-layout { grid-template-columns: 1fr; }
    .team-chore-current { grid-template-columns: 1fr; }
    .team-chore-current-players { justify-content: flex-start; }
}

@media (max-width: 680px) {
    .team-chore-current { padding: .9rem; border-radius: 16px; }
    .team-chore-current-players { display: grid; grid-template-columns: 1fr 1fr; }
    .team-chore-person { min-width: 0; padding: .55rem; }
    .team-chore-week { grid-template-columns: 52px minmax(0,1fr); padding: .6rem; }
    .team-chore-week-date { min-height: 58px; }
    .team-chore-edit { grid-column: 1 / -1; }
    .team-chore-edit > summary { width: 100%; text-align: center; }
    .team-chore-edit[open] > summary { width: 100%; margin-left: 0; }
    .team-chore-selects { grid-template-columns: 1fr; }
    .team-chore-edit-actions { display: grid; grid-template-columns: 1fr; }
    .team-chore-edit-actions .btn, .team-chore-edit-actions .text-button { width: 100%; text-align: center; }
    .team-chore-past-list > div { display: grid; gap: .15rem; }
}

/* ================================================================
   Spelersomgeving
   ================================================================ */
.player-portal-invite-card {
    display: grid;
    gap: .7rem;
    margin: .8rem 0 1rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(145deg, #f7faf5, #fff);
}
.player-portal-invite-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.player-portal-invite-head > div { min-width: 0; }
.player-portal-invite-head small, .player-portal-invite-head strong { display: block; }
.player-portal-invite-head small { color: var(--muted); font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.player-portal-invite-head strong { margin-top: .1rem; font-size: .8rem; }
.player-portal-invite-card > p { margin: 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }
.player-portal-invite-form { display: grid; gap: .55rem; }
.player-portal-invite-form label { display: grid; gap: .28rem; color: var(--ink); font-size: .65rem; font-weight: 800; }
.player-portal-state { display: inline-flex; flex: 0 0 auto; padding: .24rem .45rem; border-radius: 999px; background: #edf0ec; color: #687168; font-size: .55rem; font-weight: 850; }
.player-portal-state.is-active { background: #e1f2df; color: #276c3a; }
.player-portal-state.is-pending { background: #fff2d5; color: #7b5b11; }
.player-portal-email { display: block; color: var(--muted); font-size: .58rem; line-height: 1.4; }

.player-portal-page { display: grid; gap: 1.15rem; }
.player-portal-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.15rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--grass-dark), var(--grass));
    color: var(--on-grass);
    box-shadow: 0 12px 30px rgba(23,37,28,.11);
}
.player-portal-hero .team-player-photo-profile { margin: 0; }
.player-portal-hero-copy { min-width: 0; }
.player-portal-hero-copy .ux-eyebrow { color: rgba(255,255,255,.78); }
.player-portal-hero-copy h1 { margin: .12rem 0 .25rem; color: #fff; }
.player-portal-hero-copy p { margin: 0; color: rgba(255,255,255,.82); }
.player-portal-hero .team-season-picker label { color: rgba(255,255,255,.88); }

.player-next-card {
    display: grid;
    grid-template-columns: 76px minmax(0,1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(23,37,28,.06);
}
.player-next-card.is-empty { grid-template-columns: 1fr; }
.player-next-date { display: grid; place-items: center; min-height: 72px; border-radius: 14px; background: var(--grass-soft); color: var(--grass-dark); }
.player-next-date strong { font-size: 1.45rem; line-height: 1; }
.player-next-date span { margin-top: .16rem; font-size: .62rem; font-weight: 900; }
.player-next-copy { min-width: 0; }
.player-next-copy h2 { margin: .25rem 0 .25rem; }
.player-next-copy p { margin: 0; color: var(--muted); }
.player-next-copy small { display: block; margin-top: .25rem; color: var(--muted); }
.player-own-status { display: grid; justify-items: end; gap: .3rem; }
.player-own-status > small { color: var(--muted); font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.player-status { display: inline-flex; padding: .35rem .6rem; border-radius: 999px; background: #eef1ed; color: #687168; font-size: .64rem; font-weight: 900; white-space: nowrap; }
.player-status.is-present { background: #e1f2df; color: #276c3a; }
.player-status.is-absent { background: #ffe7e3; color: #9a362e; }
.player-status.is-injured { background: #fff0dc; color: #8b561d; }
.player-status.is-vacation { background: #e8f0fb; color: #315b8c; }
.player-status.is-unknown { background: #eef1ed; color: #687168; }

.player-portal-section { padding: 1rem 0 0; scroll-margin-top: 100px; }
.player-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7rem; }
.player-stat-grid article { display: grid; gap: .18rem; min-height: 105px; padding: .8rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.player-stat-grid span { color: var(--muted); font-size: .62rem; font-weight: 800; }
.player-stat-grid strong { color: var(--ink); font-family: Fraunces, serif; font-size: 1.55rem; line-height: 1.05; }
.player-stat-grid small { color: var(--muted); font-size: .57rem; }

.player-event-list { display: grid; gap: .65rem; }
.player-event-card {
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.player-event-card > time { display: grid; place-items: center; min-height: 58px; border-radius: 11px; background: #f2f6f0; color: var(--grass-dark); }
.player-event-card > time strong { font-size: 1.05rem; line-height: 1; }
.player-event-card > time small { margin-top: .12rem; font-size: .52rem; font-weight: 850; }
.player-event-main { min-width: 0; }
.player-event-main h3 { margin: .2rem 0 .15rem; font-size: .86rem; }
.player-event-main p, .player-event-main small { display: block; margin: 0; color: var(--muted); font-size: .61rem; line-height: 1.45; }
.player-route-link { display: inline-flex; margin-top: .28rem; font-size: .6rem; }

.player-recent-list { display: grid; gap: .45rem; }
.player-recent-list article { display: grid; grid-template-columns: 88px minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.player-recent-list time { color: var(--muted); font-size: .61rem; font-weight: 800; }
.player-recent-list div { min-width: 0; }
.player-recent-list div strong, .player-recent-list div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-recent-list div strong { font-size: .72rem; }
.player-recent-list div small { margin-top: .08rem; color: var(--muted); font-size: .57rem; }
.player-recent-list > article > span { font-size: .65rem; font-weight: 900; white-space: nowrap; }

@media (max-width: 900px) {
    .player-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .player-portal-hero { grid-template-columns: auto minmax(0,1fr); }
    .player-portal-hero .team-season-picker { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    .mobile-app-nav.is-player-nav { grid-template-columns: repeat(4,1fr); }
    .player-portal-hero { grid-template-columns: 58px minmax(0,1fr); padding: .85rem; border-radius: 17px; }
    .player-portal-hero .team-player-photo-profile { width: 58px; height: 58px; }
    .player-portal-hero-copy h1 { font-size: 1.45rem; }
    .player-next-card { grid-template-columns: 54px minmax(0,1fr); gap: .7rem; padding: .75rem; }
    .player-next-date { min-height: 56px; }
    .player-next-date strong { font-size: 1.05rem; }
    .player-next-card .player-own-status { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: .55rem; border-top: 1px solid var(--line); }
    .player-stat-grid { gap: .5rem; }
    .player-stat-grid article { min-height: 90px; padding: .65rem; }
    .player-event-card { grid-template-columns: 48px minmax(0,1fr); gap: .6rem; padding: .6rem; }
    .player-event-card > time { min-height: 50px; }
    .player-event-card .player-own-status { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: .5rem; border-top: 1px solid var(--line); }
    .player-recent-list article { grid-template-columns: 70px minmax(0,1fr) auto; gap: .45rem; padding: .55rem; }
    .player-portal-invite-head { align-items: flex-start; }
}

/* Spelersomgeving v2: persoonlijke taken, corvee en eigen aanwezigheid */
.player-next-card.is-chore-week,
.player-event-card.is-chore-week {
    border-color: #e0b552;
    background: linear-gradient(135deg, #fffaf0 0%, #ffffff 58%);
    box-shadow: 0 9px 24px rgba(130,92,15,.08);
}
.player-event-card.has-player-duty { border-left: 4px solid var(--grass); }
.player-event-card { scroll-margin-top: 100px; }
.player-event-badges { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.player-task-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: .2rem .45rem;
    border-radius: 999px;
    background: var(--grass-soft);
    color: var(--grass-dark);
    font-size: .54rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
.player-task-badge.is-chore { background: #fff0bf; color: #76570e; }

.player-next-attendance { grid-column: 2 / -1; padding-top: .65rem; border-top: 1px solid var(--line); }
.player-event-attendance { grid-column: 2 / -1; padding-top: .5rem; border-top: 1px solid #edf0ea; }
.player-attendance-form { display: flex; align-items: end; justify-content: flex-end; gap: .45rem; }
.player-attendance-form label { display: grid; gap: .22rem; min-width: 170px; color: var(--muted); font-size: .56rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.player-attendance-form .paste-input { min-height: 36px; padding: .42rem .55rem; font-size: .66rem; }
.player-attendance-form .btn { min-height: 36px; }

.player-tasks-section { padding-top: .35rem; }
.player-task-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.player-chore-card,
.player-duty-card {
    min-width: 0;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(23,37,28,.045);
}
.player-chore-card { border-color: #ead28d; background: linear-gradient(145deg,#fff8df,#fff); }
.player-chore-card.is-current { box-shadow: inset 0 0 0 1px #e2b442, 0 8px 20px rgba(118,87,14,.08); }
.player-task-card-head { display: flex; gap: .55rem; align-items: center; margin-bottom: .6rem; }
.player-task-card-head > div { min-width: 0; }
.player-task-card-head small { display: block; color: var(--muted); font-size: .55rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.player-task-card-head h3 { margin: .08rem 0 0; font-size: .95rem; }
.player-task-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; background: var(--grass-soft); color: var(--grass-dark); font-size: 1rem; font-weight: 900; }
.player-chore-card .player-task-icon { background: #ffe9a5; color: #76570e; }
.player-chore-card > strong { display: block; font-size: .8rem; }
.player-chore-card > p { margin: .25rem 0 .65rem; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.player-task-muted { color: var(--muted); font-size: .6rem; }
.player-chore-activities { display: grid; gap: .35rem; margin-top: .55rem; }
.player-chore-activities > small { color: #76570e; font-size: .55rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.player-chore-activities a { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: .45rem; align-items: center; padding: .42rem .5rem; border: 1px solid #eadcae; border-radius: 10px; background: rgba(255,255,255,.76); color: inherit; text-decoration: none; }
.player-chore-activities a:hover { background: #fff; }
.player-chore-activities b { color: #76570e; font-size: .6rem; }
.player-chore-activities span { min-width: 0; overflow: hidden; font-size: .62rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }

.player-duty-list { display: grid; gap: .35rem; }
.player-duty-list a { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: .5rem; align-items: center; padding: .48rem; border: 1px solid #e7ebe4; border-radius: 10px; color: inherit; text-decoration: none; }
.player-duty-list a:hover { border-color: #b8c7b5; background: #f9fbf8; }
.player-duty-list time { color: var(--grass-dark); font-size: .6rem; font-weight: 900; }
.player-duty-list span { min-width: 0; }
.player-duty-list strong,.player-duty-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-duty-list strong { font-size: .66rem; }
.player-duty-list small { margin-top: .1rem; color: var(--grass-dark); font-size: .58rem; font-weight: 850; }
.player-no-tasks { display: grid; gap: .18rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 14px; background: #f8faf7; }
.player-no-tasks strong { font-size: .75rem; }
.player-no-tasks span { color: var(--muted); font-size: .62rem; }

.player-push-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #cbdcc8;
    border-radius: 17px;
    background: linear-gradient(135deg,#edf6ea,#fff);
}
.player-push-card h2 { margin: .12rem 0 .22rem; font-size: 1.05rem; }
.player-push-card p { margin: 0; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.player-push-card [data-push-status] { display: block; margin-top: .35rem; color: var(--muted); font-size: .58rem; }
.player-push-card [data-push-status].is-ok { color: #276c3a; }
.player-push-card [data-push-status].is-error { color: #9a362e; }

@media (max-width: 900px) {
    .player-task-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .player-next-attendance,
    .player-event-attendance { grid-column: 1 / -1; }
    .player-attendance-form { display: grid; grid-template-columns: minmax(0,1fr) auto; width: 100%; }
    .player-attendance-form label { min-width: 0; }
    .player-attendance-form .btn { align-self: end; }
    .player-push-card { grid-template-columns: 1fr; gap: .65rem; }
    .player-push-card .btn { width: 100%; }
    .player-chore-activities a { grid-template-columns: 58px minmax(0,1fr); }
}
.player-later-chores { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .65rem; padding-top: .55rem; border-top: 1px solid #eadcae; }
.player-later-chores > small { width: 100%; color: #76570e; font-size: .53rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.player-later-chores > span { display: inline-flex; padding: .25rem .42rem; border-radius: 999px; background: rgba(255,255,255,.85); color: #76570e; font-size: .55rem; font-weight: 800; }