:root {
    --bg: #eef3f6;
    --surface: #ffffff;
    --ink: #173447;
    --muted: #657b88;
    --line: #d6e0e6;
    --navy: #102b3f;
    --blue: #176a9a;
    --green: #0d8a61;
    --radius: 15px;
    --shadow: 0 10px 28px rgba(16, 43, 63, .10);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    padding-bottom: 118px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background: radial-gradient(circle at top right, rgba(23, 106, 154, .09), transparent 32rem), var(--bg);
}
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 16px clamp(14px, 2.4vw, 30px);
    color: #fff;
    background: var(--navy);
    box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.logo {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    border-radius: 21px;
    background: #fff;
}
.brand h1 { margin: 2px 0 5px; font-size: clamp(1.4rem, 2.8vw, 2.2rem); line-height: 1.05; }
.brand p { margin: 0; color: #c9d9e3; }
.eyebrow {
    margin: 0 0 5px !important;
    color: #5c8ca8;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .13em;
}
.topbar .eyebrow { color: #81b4cf; }
.week-round { display: inline-block; margin-left: 7px; color: #fff; font-weight: 900; }

.header-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(105px, 1fr));
    gap: 8px;
}
.info-tile {
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    background: rgba(255, 255, 255, .08);
}
.info-tile span { display: block; margin-bottom: 3px; color: #aac2d0; font-size: .7rem; }
.info-tile strong { display: block; font-size: .98rem; }
.header-info .button { grid-column: span 3; }
.station-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(115px, .65fr);
    gap: 8px;
    padding-top: 1px;
}
.station-controls label { min-width: 0; }
.station-controls label > span {
    display: block;
    margin: 0 0 4px 2px;
    color: #aac2d0;
    font-size: .68rem;
    font-weight: 800;
}
.station-controls input,
.station-controls select {
    min-height: 39px;
    padding: 8px 10px;
    border-color: rgba(255, 255, 255, .28);
    font-weight: 850;
}
.station-view {
    grid-column: 1 / -1;
    padding: 3px 4px 0;
    color: #78d8ae;
    font-size: .9rem;
    font-weight: 900;
    text-align: center;
    letter-spacing: .025em;
}

.layout {
    width: min(1500px, calc(100% - 26px));
    margin: 16px auto 30px;
    display: grid;
    gap: 13px;
}
.control-card, .list-card, .admin-panel, .turn-card, .public-join-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.compact-card, .public-join-card { padding: 14px 16px; }
h2 { margin: 0; font-size: 1.12rem; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.compact-title-row { margin-bottom: 9px; }
.keyboard-hint { color: var(--muted); font-size: .76rem; }

.quick-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
input[type="text"], input[type="password"], input[type="number"], input[type="time"], select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #afc0cb;
    border-radius: 10px;
    outline: none;
    color: var(--ink);
    background: #fff;
}
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 106, 154, .13); }
#callInput:focus { background: #fff0d6; }
#callInput, #publicCallInput {
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.clear-call-button {
    width: 42px;
    min-height: 39px;
    padding: 0;
    border: 1px solid #afc0cb;
    border-radius: 10px;
    background: #edf1f4;
    color: #455c69;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}
.clear-call-button:hover,
.clear-call-button:focus-visible {
    border-color: var(--blue);
    background: #e3edf2;
    outline: none;
}
.clear-call-button:active { transform: translateY(1px); }

.typed-call-choices {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
    padding: 9px;
    border: 1px solid #c5d6df;
    border-radius: 10px;
    background: #f5fafc;
}
.typed-call-choice {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid rgba(23, 52, 71, .24);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    text-align: left;
}
.typed-call-choice:hover,
.typed-call-choice:focus-visible {
    border-color: var(--green);
    background: #edf8f2;
    outline: none;
}
.typed-call-choice strong { display: inline-block; min-width: 82px; }
.typed-call-choice span { color: var(--muted); font-size: .82rem; }

.button {
    min-height: 39px;
    padding: 8px 13px;
    border: 0;
    border-radius: 10px;
    font-weight: 800;
    transition: .12s;
}
.button:hover { filter: brightness(1.05); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.primary { color: #fff; background: var(--blue); }
.success { color: #fff; background: var(--green); }
.secondary { color: #163b52; background: #dce9f0; }
.ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); }
.warning { color: #805000; background: #fff0d6; }
.danger { color: #8e1f1f; background: #ffe1e1; }
.ghost-dark { color: #455c69; background: #edf1f4; }
.button.small { min-height: 32px; padding: 6px 9px; font-size: .76rem; }
.button.full { width: 100%; }

.turn-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 13px; }
.turn-card { min-height: 158px; padding: 14px 18px; position: relative; overflow: hidden; }
.turn-card::after {
    content: "";
    position: absolute;
    right: -72px;
    bottom: -94px;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    background: rgba(23, 106, 154, .07);
}
.current-card { border-top: 6px solid var(--green); }
.next-card { border-top: 6px solid var(--blue); }
.big-call {
    margin: 7px 0 3px;
    font-size: clamp(1.8rem, 5vw, 3.9rem);
    font-weight: 900;
    letter-spacing: .035em;
    line-height: 1;
    word-break: break-word;
}
.big-call.prestart-title {
    max-width: 100%;
    margin-top: 16px;
    color: #234d67;
    font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif;
    font-size: clamp(1.45rem, 3.3vw, 2.55rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.12;
}
.turn-time {
    margin-top: 8px;
    color: var(--green);
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    font-variant-numeric: tabular-nums;
    font-weight: 850;
}
.turn-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; position: relative; z-index: 2; }
.badges { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; }
.badge {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    color: #385466;
    background: #e7eef3;
    font-size: .68rem;
    font-weight: 850;
}
.badge.echo { color: #5e39a8; background: #e6dcff; }
.badge.away { color: #922d2d; background: #ffe0e0; }
.badge.listen { color: #7c5700; background: #fff0cd; }
.leader-label { color: #096143; background: #d8f2e8; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }

.mode-badge { padding: 6px 9px; border-radius: 999px; font-size: .72rem; font-weight: 900; white-space: nowrap; }
.mode-badge.viewer { color: #4e5f69; background: #e6edf1; }
.mode-badge.leader { color: #0d6848; background: #d9f4e9; }

.public-join-card { border-left: 5px solid var(--blue); }
.public-join-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto auto;
    align-items: center;
    gap: 8px;
}
.status-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f6f9fb;
    font-size: .84rem;
    font-weight: 750;
    white-space: nowrap;
}
.status-choice input { width: 18px; height: 18px; accent-color: var(--blue); }
.public-known-info {
    grid-column: 1 / -1;
    padding: 8px 10px;
    border-radius: 9px;
    color: #12553f;
    background: #e6f5ef;
    font-size: .82rem;
    font-weight: 750;
}
.public-details {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
    border: 1px dashed #aac0cc;
    border-radius: 10px;
    background: #f8fbfc;
}
.public-details p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .79rem; }
.public-note { margin: 8px 0 0; color: var(--muted); font-size: .73rem; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
table { width: 100%; min-width: 1180px; border-collapse: collapse; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th {
    color: #48606f;
    background: #edf4f7;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr.current { background: #e4f6ee; box-shadow: inset 4px 0 var(--green); }
tbody tr.next { background: #ebf5fb; box-shadow: inset 4px 0 var(--blue); }
tbody tr.inactive { opacity: .64; }
.leader-row { box-shadow: inset 4px 0 #0d8a61; }
.call-cell { min-width: 145px; }
.name-cell { min-width: 130px; }
.qth-cell { min-width: 135px; }
.identity-input { min-width: 110px; padding: 6px 8px !important; border-radius: 8px !important; font-size: .82rem; }
.call-input { min-width: 120px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.call-static { font-size: .96rem; font-weight: 900; }
.inline-badges { margin-top: 4px; }
.center { text-align: center; }
.right { text-align: right; }
.time-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.status-check { width: 19px; height: 19px; accent-color: var(--blue); }
.action-stack { display: flex; justify-content: flex-end; gap: 5px; }
.empty { padding: 24px; color: var(--muted); text-align: center; }

.admin-panel {
    display: grid;
    grid-template-columns: minmax(165px, 220px) minmax(185px, 250px) 1fr;
    align-items: end;
    gap: 12px;
}
.admin-panel label { display: block; margin-bottom: 5px; font-size: .78rem; font-weight: 800; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.admin-panel .keyboard-hint { grid-column: 1 / -1; margin: 0; }
.start-now {
    color: #a51f1f;
    border: 3px solid #d52d2d;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(213, 45, 45, .11);
    font-size: .94rem;
}
.start-now:hover { background: #fff1f1; }

.session-footer {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 9px max(14px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    color: #fff;
    background: #0b2232;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .18);
}
.time-row { display: flex; justify-content: center; align-items: baseline; gap: 8px; font-size: .78rem; }
.time-row strong { font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.progress-track { max-width: 1200px; height: 11px; margin: 7px auto 0; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .15); }
.progress-bar { width: 0; height: 100%; border-radius: inherit; background: #36b77f; transition: width .5s linear, background .2s; }
.progress-bar.warning { background: #edae43; }
.progress-bar.overtime { background: #e35252; }

.go-top {
    position: fixed;
    z-index: 30;
    right: 18px;
    bottom: 112px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--blue);
    box-shadow: 0 8px 24px rgba(16, 43, 63, .28);
    font-size: 1.45rem;
    font-weight: 900;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: .18s;
}
.go-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

.modal {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(5, 20, 30, .62);
    backdrop-filter: blur(4px);
}
.modal-card {
    position: relative;
    width: min(430px, 100%);
    padding: 24px;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .35);
}
.modal-card h2 { margin-bottom: 17px; }
.modal-card label { display: block; margin: 10px 0 5px; font-weight: 800; }
.remember-row { display: flex !important; align-items: center; gap: 8px; font-weight: 600 !important; }
.remember-row input { width: 18px; height: 18px; }
.modal-close { position: absolute; top: 8px; right: 11px; border: 0; color: #526773; background: transparent; font-size: 1.9rem; }
.leader-modal-card { width: min(620px, 100%); max-height: 90vh; overflow: auto; }
.leader-profile-list { display: grid; gap: 7px; margin: 14px 0; }
.leader-profile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
.leader-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: #f4f8fa;
    text-align: left;
}
.leader-select:hover { border-color: var(--blue); background: #edf7fc; }
.leader-select strong { font-size: 1rem; }
.leader-select span { color: var(--muted); }
.profile-edit, .profile-delete { padding: 7px 9px; border: 0; border-radius: 9px; font-weight: 800; }
.profile-edit { color: #163b52; background: #dce9f0; }
.profile-delete { color: #8e1f1f; background: #ffe1e1; }
.profile-editor { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.profile-editor label { display: block; margin: 8px 0 4px; font-weight: 800; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

.toast {
    position: fixed;
    z-index: 100;
    top: 13px;
    left: 50%;
    padding: 10px 14px;
    border-radius: 10px;
    color: #fff;
    background: #173447;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -20px);
    transition: .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #9c2d2d; }

@media (max-width: 1050px) {
    .topbar { align-items: stretch; flex-wrap: wrap; }
    .brand { flex: 1 1 480px; }
    .header-info { flex: 1 1 370px; min-width: 370px; }
    .public-join-form { grid-template-columns: minmax(180px, 1fr) auto auto; }
    .public-join-form .button { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    body { padding-bottom: 142px; }
    .topbar { flex-direction: column; padding: 13px; }
    .logo { width: 100px; height: 100px; flex-basis: 100px; border-radius: 17px; }
    .header-info { width: 100%; min-width: 0; grid-template-columns: repeat(3, 1fr); }
    .layout { width: min(100% - 16px, 1500px); margin-top: 9px; gap: 9px; }
    .section-title-row { align-items: flex-start; flex-direction: column; }
    .compact-card, .public-join-card { padding: 12px; }
    .turn-grid, .quick-add, .admin-panel, .public-join-form, .public-details { grid-template-columns: 1fr; }
    .public-join-form .button, .public-details p { grid-column: 1; }
    .admin-panel .keyboard-hint { grid-column: 1; }
    .big-call { font-size: clamp(1.7rem, 10vw, 3rem); }
    .button { min-height: 42px; }
    .go-top { right: 12px; bottom: 136px; }
}

@media (max-width: 460px) {
    .brand { align-items: flex-start; }
    .logo { width: 76px; height: 76px; flex-basis: 76px; }
    .brand h1 { font-size: 1.22rem; }
    .brand p { font-size: .78rem; }
    .week-round { display: block; margin: 3px 0 0; }
    .header-info { grid-template-columns: 1fr 1fr; }
    .header-info .info-tile:first-child { grid-column: 1 / -1; }
    .header-info .button { grid-column: span 2; }
    .station-controls, .station-view { grid-column: 1 / -1; }
    .station-controls { grid-template-columns: minmax(0, 1.25fr) minmax(105px, .75fr); }
    .turn-card { min-height: 142px; padding: 12px 13px; }
    .turn-actions .button { flex: 1 1 100%; }
    .time-row { flex-wrap: wrap; row-gap: 2px; }
    .leader-profile { grid-template-columns: 1fr 1fr; }
    .leader-select { grid-column: 1 / -1; }
    .profile-edit, .profile-delete { min-height: 39px; }
}

/* Versie 4: vaste dinsdagronde, compacte statusweergave en rondeleiderselectie. */
#quickAddCard { scroll-margin-top: 8px; }
.fixed-day {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 7px;
    border-radius: 999px;
    color: #fff;
    background: var(--blue);
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

#currentBadges { display: none; }
.big-call.prestart-title {
    font-size: clamp(1.25rem, 2.7vw, 2.15rem);
    line-height: 1.18;
}
.last-leader-call {
    margin: 9px 0 0;
    color: #b32222;
    font-size: clamp(1.35rem, 3vw, 2.25rem);
    font-weight: 900;
    letter-spacing: .045em;
}

.public-join-form input:disabled,
.public-join-form button:disabled,
.public-join-form .status-choice:has(input:disabled) {
    cursor: not-allowed;
    filter: grayscale(.35);
}
.public-join-form input:disabled { background: #edf1f3; }

th, td { padding-top: 5px; padding-bottom: 5px; }
tbody tr { height: 40px; }
.identity-input { height: 30px; padding-top: 4px !important; padding-bottom: 4px !important; }
.call-static { display: inline-block; line-height: 30px; }
.leader-call { color: #c51f2c !important; font-weight: 950 !important; }
.inline-badges { display: none !important; }

.add-leader-button { width: 100%; margin-top: 4px; }
.profile-editor.hidden { display: none !important; }


/* Versie 5: bezoekers, compactere beurtkaarten en verbeterde mobiele weergave. */
.turn-identity {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
}
.turn-name {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-size: clamp(.82rem, 1.35vw, 1.12rem);
    font-weight: 750;
    line-height: 1.2;
    word-break: break-word;
}
.turn-name:not(:empty)::before { content: "— "; }
.big-call.prestart-title {
    margin-top: 9px;
    font-size: clamp(1.12rem, 2.3vw, 1.85rem);
    line-height: 1.16;
}
.turn-card .muted { margin: 6px 0 0; font-size: .82rem; line-height: 1.3; }

.visitor-row {
    max-width: 1200px;
    margin: 6px auto 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .72);
    font-size: .68rem;
    line-height: 1.1;
}
.visitor-stat strong { color: #fff; font-variant-numeric: tabular-nums; }
.total-visitors { text-align: right; }
.footer-credit {
    color: rgba(255, 255, 255, .48);
    font-size: .66rem;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .brand { flex-basis: auto; }
    .header-info { flex-basis: auto; min-width: 0; }
    .turn-grid { gap: 8px; }
    .turn-card::after { width: 130px; height: 130px; right: -58px; bottom: -76px; }
    .turn-time { margin-top: 5px; }
    .turn-actions { margin-top: 8px; }
    .table-wrap { margin-inline: -3px; -webkit-overflow-scrolling: touch; }
    table { min-width: 1050px; }
    th, td { padding-left: 6px; padding-right: 6px; }
    .call-cell { min-width: 124px; }
    .name-cell { min-width: 116px; }
    .qth-cell { min-width: 120px; }
    .session-footer { padding-top: 7px; }
    .visitor-row { gap: 6px; font-size: .64rem; }
}

@media (max-width: 460px) {
    .topbar { gap: 10px; }
    .header-info { gap: 6px; }
    .info-tile { padding: 7px 8px; }
    .turn-identity { gap: 2px 7px; }
    .turn-name { flex: 1 1 auto; font-size: .8rem; }
    .big-call.prestart-title { font-size: 1.08rem; }
    .turn-card .muted { font-size: .76rem; }
    .admin-actions .button { flex: 1 1 100%; }
    .visitor-row {
        grid-template-columns: 1fr 1fr;
        row-gap: 4px;
    }
    .footer-credit { grid-column: 1 / -1; grid-row: 2; }
    .total-visitors { text-align: right; }
}

/* Voorkom dat de brede tabel op smalle schermen de volledige pagina verbreedt. */
.layout,
.layout > *,
.turn-grid,
.turn-grid > *,
.list-card,
.table-wrap {
    min-width: 0;
}
.table-wrap {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 460px) {
    body { padding-bottom: 128px; }
    .go-top { bottom: 120px; }
    .visitor-row {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        row-gap: 0;
        font-size: .58rem;
    }
    .footer-credit {
        grid-column: auto;
        grid-row: auto;
        font-size: .58rem;
    }
}


/* Versie 6: stabiele rondeleider-editor, START/STOP en rondetijdwaarschuwingen. */
.start-now {
    min-width: 108px;
    color: #fff;
    border: 3px solid #b31924;
    background: #c92531;
    letter-spacing: .07em;
}
.start-now:hover { background: #b61e29; }
.start-now.stop-now {
    color: #fff;
    border-color: #7f1019;
    background: #941821;
    box-shadow: 0 0 0 3px rgba(148, 24, 33, .13);
}
.start-now.stop-now:hover { background: #7f1019; }

.time-warning-modal { z-index: 160; padding: 16px; }
.time-warning-card {
    width: min(560px, 100%);
    padding: clamp(22px, 5vw, 38px);
    border: 4px solid #e0a129;
    border-radius: 20px;
    background: #fffaf0;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .42);
    text-align: center;
}
.time-warning-modal[data-level="100"] .time-warning-card {
    border-color: #b51f2b;
    background: #fff2f2;
}
.time-warning-card h2 {
    margin: 8px auto 22px;
    max-width: 470px;
    color: #714800;
    font-size: clamp(1.45rem, 4vw, 2.2rem);
    line-height: 1.18;
}
.time-warning-modal[data-level="100"] .time-warning-card h2 { color: #971b24; }
.time-warning-close {
    width: 100%;
    min-height: 62px;
    color: #fff;
    background: #b77909;
    font-size: 1.08rem;
}
.time-warning-modal[data-level="100"] .time-warning-close { background: #a51f29; }
.time-warning-hint { margin: 10px 0 0; color: var(--muted); font-size: .75rem; }

@media (max-width: 460px) {
    .time-warning-modal { padding: 10px; }
    .time-warning-card { padding: 22px 15px 16px; border-radius: 16px; }
    .time-warning-close { min-height: 58px; }
}

/* Versie 7: annuleren in rondeleiderkeuze. */
.cancel-leader-button { width: 100%; margin-top: 7px; }
.profile-actions .button { flex: 1 1 180px; }


/* Versie 8: rustige voorbeeldtekst in snelle call-invoer. */
#callInput::placeholder {
    color: #b8c5cc;
    opacity: 1;
    font-weight: 500;
    letter-spacing: .015em;
}


/* Versie 9: blijvende frequentie- en modeweergave onder de rondeleiderlogin. */
@media (max-width: 360px) {
    .station-controls { grid-template-columns: 1fr; }
}


/* Versie 11: gedeelde loginweergave en spraakgestuurde call-invoer. */
.voice-call-modal { z-index: 175; }
.voice-call-card {
    width: min(560px, 100%);
    padding: clamp(22px, 5vw, 34px);
    text-align: center;
}
.voice-call-card h2 { margin: 4px 0 17px; }
.voice-call-value {
    min-height: 76px;
    padding: 12px 15px !important;
    color: var(--navy) !important;
    border: 3px solid #80afc8 !important;
    background: #f6fbfd !important;
    font-size: clamp(1.8rem, 7vw, 3.25rem) !important;
    font-weight: 950 !important;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}
.voice-call-value::placeholder {
    color: #b5c5cd;
    font-size: clamp(.9rem, 3vw, 1.15rem);
    font-weight: 700;
    letter-spacing: .025em;
}
.voice-call-status {
    min-height: 2.6em;
    margin: 13px 0;
    color: var(--green);
    font-weight: 850;
}
.voice-call-status.error { color: #9c2d2d; }
.voice-call-choices {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
}
.voice-call-choice {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(23, 52, 71, .24);
    border-radius: 10px;
    background: #f7fafb;
    color: #173447;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.voice-call-choice:hover,
.voice-call-choice:focus-visible {
    border-color: #1d8055;
    background: #edf8f2;
    outline: none;
}
.voice-call-choice strong { display: inline-block; min-width: 82px; }
.voice-call-choice span { color: var(--muted); font-size: .83rem; }
.voice-call-actions { display: flex; gap: 8px; }
.voice-call-actions .button { flex: 1 1 0; }
.voice-call-hint { margin: 13px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }

@media (max-width: 460px) {
    .voice-call-card { padding: 20px 13px 16px; }
    .voice-call-actions { flex-direction: column; }
}
/* Kader rond de ClubCall van de rondeleider, alleen op grotere schermen */
@media (min-width: 761px) {
    #participantRows .leader-row .call-static.leader-call {
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
        height: 30px;
        padding: 4px 8px;
        box-sizing: border-box;

        border: 1px solid #afc0cb;
        border-radius: 8px;
        background: #ffffff;

        color: #c51f2c !important;
        font-weight: 950 !important;
        line-height: normal;
    }
}