:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#173328;background:#f4f7f5}*{box-sizing:border-box}body{margin:0}header{background:#164734;color:white;padding:22px max(16px,calc((100vw - 1300px)/2));}h1{margin:0;font-size:1.6rem}header p{margin:5px 0 0;color:#d5f0de}main{max-width:1340px;margin:auto;padding:16px}.hint{color:#50665a;font-size:.94rem}.table-wrap{overflow-x:auto;background:white;border:1px solid #dce7df;border-radius:12px;box-shadow:0 2px 9px #153d2510}table{border-collapse:separate;border-spacing:0;width:100%;min-width:850px}caption{text-align:left;font-size:1.15rem;font-weight:700;padding:16px}th,td{padding:8px;border-top:1px solid #e4ebe5;text-align:center}thead th{background:#edf3ef;white-space:nowrap}.extra-training {color: red;}thead small{display:block;font-weight:400;color:#5c7065}th.name{position:sticky;left:0;z-index:2;text-align:left;min-width:125px;background:#f4f7f5;box-shadow:2px 0 3px #0000000b}thead th.name{z-index:3}tbody tr:nth-child(even) th.name{background:#eaf0eb}.choices{display:flex;gap:3px;justify-content:center}.choice{font:inherit;font-size:.77rem;min-height:39px;min-width:41px;padding:6px 5px;border:1px solid #dce4df;border-radius:7px;background:#f6f8f6;color:#46594c;cursor:pointer}.choice[aria-pressed=true]{font-weight:800;border-width:2px}.choice.yes[aria-pressed=true]{background:#d5f4df;color:#12612f;border-color:#268b4d}.choice.no[aria-pressed=true]{background:#fce1e1;color:#a12828;border-color:#cc4b4b}.choice.maybe[aria-pressed=true]{background:#fff0c5;color:#81550b;border-color:#bd861e}.choice:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #276bb3;outline-offset:2px}tfoot td,tfoot th{background:#e0f2e6;font-weight:700}#message{min-height:1.3em;color:#17623a}#message.error{color:#a12828}.panel{max-width:780px;margin:20px auto;background:white;padding:22px;border-radius:12px;border:1px solid #dce7df}.formrow{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;align-items:center}input,select{font:inherit;padding:10px;border:1px solid #bccfc2;border-radius:7px;max-width:100%}button.action{background:#164734;color:white;border:0;border-radius:7px;padding:11px 16px;cursor:pointer}button.secondary{background:#e6eee8;color:#164734}ul{padding-left:20px}li{margin:8px 0}li button{margin-left:8px}a{color:#145b37}/* Mobilvisning */
@media (max-width: 650px) {
    main {
        padding: 10px;
    }

    .choice {
        min-width: 39px;
    }

    th, td {
        padding: 6px 4px;
    }
}

/* Deltagere: faste kolonner */
#players > li {
    display: grid;
    grid-template-columns: 130px 90px 110px;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 6px;
}

#players > li > .player-label {
    grid-column: 1;
    overflow-wrap: anywhere;
}

#players > li > button:nth-of-type(1) {
    grid-column: 2;
    width: 90px;
    margin-left: 0;
}

#players > li > button:nth-of-type(2) {
    grid-column: 3;
    width: 110px;
    margin-left: 0;
}

/* Datoer: faste kolonner */
#sessions > li {
    display: grid;
    grid-template-columns: 160px 100px 80px 65px;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 6px;
}

#sessions > li > .session-label {
    grid-column: 1;
    white-space: nowrap;
}

#sessions > li > .session-extra {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

#sessions > li > .session-extra input {
    margin: 0;
}

#sessions > li > button:nth-of-type(1) {
    grid-column: 3;
    width: 80px;
    margin-left: 0;
}

#sessions > li > button:nth-of-type(2) {
    grid-column: 4;
    width: 65px;
    margin-left: 0;
}

/* Små skærme: behold kolonnerne og tillad vandret rulning */
@media (max-width: 650px) {
    #players,
    #sessions {
        overflow-x: auto;
    }

    #players > li,
    #sessions > li {
        width: max-content;
    }
    /* Kommentar og Gem på samme linje */
#sessions > li {
    grid-template-columns: 160px 100px 80px 65px minmax(0, 1fr);
}

#sessions .session-comment {
    grid-column: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: nowrap;
}

#sessions .session-comment-input {
    width: 190px;
    min-width: 0;
    max-width: 190px;
}

#sessions .session-comment-save {
    flex: 0 0 auto;
    margin-left: 0;
    white-space: nowrap;
}

/* Sørg for, at skjulte knapper faktisk er skjult */
#sessions .session-comment-save[hidden] {
    display: none !important;
}
}