/* Volley Stars — compacte wedstrijdklok voor zaalcoördinatie. */
.switch-hall-clock {
    --shc-navy: var(--vs-navy, #27285B);
    --shc-navy-dark: var(--vs-navy-dark, #1B1C42);
    --shc-navy-soft: var(--vs-navy-soft, #ECEDF4);
    --shc-orange: var(--vs-orange, #EC6724);
    --shc-orange-dark: var(--vs-orange-dark, #D1541A);
    --shc-orange-soft: var(--vs-orange-soft, #FDF0E8);
    --shc-text: var(--text, #1E2038);
    --shc-muted: var(--muted, #5A6078);
    --shc-subtle: var(--subtle, #7B8197);
    --shc-border: var(--border, rgba(39, 40, 91, .13));
    --shc-radius: var(--r-lg, 12px);
    width: 100%; min-width: 0; color: var(--shc-text); font: inherit;
}
.switch-hall-clock *, .switch-hall-clock *::before, .switch-hall-clock *::after { box-sizing: border-box; }
.shc-heading, .shc-heading-tools, .shc-active-top, .shc-list-heading, .shc-controls { display: flex; align-items: center; }
.shc-heading { justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.shc-heading-tools { justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.shc-kicker { margin: 0 0 1px; color: var(--shc-orange-dark); font-size: .66rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.shc-title { margin: 0; color: var(--shc-navy); font-size: 1rem; line-height: 1.15; }
.shc-picker-toggle { min-height: 32px; padding: 5px 9px; color: var(--shc-orange-dark); font-size: .7rem; }
.shc-picker { margin: 0 0 8px; padding: 8px; border: 1px solid var(--shc-border); border-radius: var(--shc-radius); background: var(--shc-navy-soft); }
.shc-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--shc-navy); font-size: .75rem; }
.shc-picker-close { padding: 2px 0; border: 0; color: var(--shc-orange-dark); background: transparent; font: inherit; font-size: .7rem; font-weight: 700; }
.shc-picker-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 5px; }
.shc-picker-option { display: grid; grid-template-columns: auto 1fr; gap: 1px 7px; width: 100%; min-height: 0; padding: 7px 8px; border: 1px solid var(--shc-border); border-radius: 8px; color: var(--shc-navy); background: var(--surface, #fff); text-align: left; font: inherit; }
.shc-picker-option:hover, .shc-picker-option[aria-selected="true"] { border-color: var(--shc-orange); background: var(--shc-orange-soft); }
.shc-picker-set { font-size: .73rem; font-weight: 800; }
.shc-picker-range { color: var(--shc-muted); font-size: .71rem; font-variant-numeric: tabular-nums; }
.shc-picker-state { grid-column: 1 / -1; color: var(--shc-subtle); font-size: .63rem; }
.shc-active { position: relative; padding: 12px; border: 1px solid var(--shc-border); border-left: 4px solid var(--shc-orange); border-radius: var(--shc-radius); background: var(--surface, #fff); box-shadow: var(--shadow-card, 0 3px 10px rgba(39, 40, 91, .06)); text-align: center; }
.shc-active-top { justify-content: space-between; gap: 10px; padding-right: 30px; color: var(--shc-muted); font-size: .75rem; font-weight: 700; }
.shc-phase { color: var(--shc-orange-dark); }
.shc-set-time { color: var(--shc-subtle); font-variant-numeric: tabular-nums; }
.shc-countdown { margin: 3px 0 0; color: var(--shc-navy); font-size: clamp(3.5rem, 16vw, 6rem); font-weight: 800; letter-spacing: -.045em; line-height: .95; font-variant-numeric: tabular-nums; }
.shc-controls { justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.shc-button { min-height: 34px; padding: 6px 10px; border: 1px solid var(--shc-border); border-radius: 999px; color: var(--shc-navy); background: var(--surface, #fff); font: inherit; font-size: .72rem; font-weight: 700; transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease; }
.shc-button:hover { border-color: var(--shc-orange); background: var(--shc-orange-soft); }
.shc-button:active { transform: scale(.97); }
.shc-button:disabled { cursor: default; opacity: .42; }
.shc-button.shc-primary { border-color: var(--shc-orange); color: #fff; background: var(--shc-orange); }
.shc-button.shc-primary:hover { border-color: var(--shc-orange-dark); background: var(--shc-orange-dark); }
.shc-button.shc-start { min-width: 7.5rem; padding-right: 20px; padding-left: 20px; }
.shc-button.shc-pause { min-width: 42px; font-size: .9rem; letter-spacing: -.1em; }
.shc-button.shc-danger { color: #a12626; }
.shc-sound-toggle { position: absolute; z-index: 1; top: 6px; right: 6px; display: grid; width: 28px; min-height: 28px; padding: 5px; place-items: center; border: 0; background: transparent; }
.shc-sound-toggle svg { display: block; width: 18px; height: 18px; fill: var(--shc-navy); }
.shc-sound-toggle .shc-sound-waves, .shc-sound-toggle .shc-sound-slash { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.shc-lists { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 10px; }
.shc-list { min-width: 0; overflow: hidden; border: 1px solid var(--shc-border); border-radius: var(--shc-radius); background: var(--surface, #fff); }
.shc-list-heading { justify-content: space-between; gap: 10px; min-height: 34px; padding: 7px 10px; color: #fff; background: var(--shc-navy); }
.shc-list-heading h3 { margin: 0; color: inherit; font-size: .73rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.shc-list-heading > span { color: rgba(255,255,255,.8); font-size: .68rem; font-weight: 700; }
.shc-list-heading .shc-list-set { margin-right: auto; color: #fff; }
.shc-list-heading .shc-list-set:empty { display: none; }
.shc-list ol { margin: 0; padding: 2px 10px; list-style: none; }
.shc-filter { display: flex; align-items: center; gap: 6px; padding: 7px 10px; color: var(--shc-muted); font-size: .66rem; font-weight: 700; }
.shc-filter input { width: 15px; height: 15px; margin: 0; accent-color: var(--shc-orange); }
.shc-item { min-width: 0; padding: 6px 0; border-top: 1px solid var(--shc-border); }
.shc-item:first-child { border-top: 0; }
.shc-item-active { margin: 0 -4px; padding-right: 4px; padding-left: 4px; border-radius: 7px; background: var(--shc-orange-soft); }
.shc-item-played { color: var(--shc-muted); }
.shc-match-row { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 2px 0; }
.shc-match-row + .shc-match-row { border-top: 1px dotted var(--shc-border); }
.shc-item-open { display: grid; flex: 1 1 auto; grid-template-columns: 43px minmax(0, 1fr); gap: 8px; width: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; color: var(--shc-text); background: transparent; text-align: left; font: inherit; }
.shc-item-open:hover .shc-team-name { color: var(--shc-orange-dark); }
.shc-match-time { display: flex; align-self: stretch; flex-direction: column; justify-content: center; gap: 1px; border-right: 1px solid var(--shc-border); color: var(--shc-navy); font-variant-numeric: tabular-nums; }
.shc-match-time strong { font-size: .76rem; font-weight: 700; }
.shc-match-time small { color: var(--shc-muted); font-size: .58rem; font-weight: 700; }
.shc-match-body { display: block; min-width: 0; }
.shc-team-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 70px 28px; align-items: start; gap: 4px; min-width: 0; min-height: 25px; padding: 2px 0; }
.shc-team-row + .shc-team-row { margin-top: -1px; }
.shc-team-logo { display: grid; width: 20px; height: 18px; place-items: center; overflow: hidden; }
.shc-team-logo .club-logo { display: grid; width: 20px !important; height: 18px !important; min-width: 20px; margin: 0 !important; padding: 0 !important; place-items: center; overflow: hidden; background: transparent !important; }
.shc-team-logo .club-logo img { display: block; width: 20px !important; max-width: 20px !important; height: 18px !important; max-height: 18px !important; object-fit: contain; }
.shc-team-logo .club-logo-fallback { display: grid; width: 16px; height: 16px; place-items: center; overflow: hidden; }
.shc-team-name { min-width: 0; overflow-wrap: anywhere; color: var(--shc-navy-dark); font-size: .74rem; font-weight: 600; line-height: 1.18; white-space: normal; }
.shc-team-place { width: 70px; overflow-wrap: anywhere; color: var(--shc-muted); font-size: .62rem; font-weight: 600; line-height: 1.18; }
.shc-team-row + .shc-team-row .shc-team-place { color: var(--shc-navy); }
.shc-team-score { min-width: 16px; color: var(--shc-navy); font-size: .72rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.shc-team-score small { display: block; color: var(--shc-muted); font-size: .54rem; font-weight: 600; line-height: 1; }
.shc-receipt, .shc-receipt-spacer { flex: 0 0 42px; min-width: 42px; }
.shc-receipt { display: inline-grid; min-height: 30px; cursor: pointer; place-items: center; color: var(--shc-muted); font-size: .58rem; font-weight: 700; }
.shc-receipt input { width: 16px; height: 16px; margin: 0; accent-color: var(--shc-orange); }
.shc-receipt span { margin-top: -2px; }
.shc-empty { padding: 8px 0; color: var(--shc-subtle); font-size: .7rem; }
@media (max-width: 390px) {
    .shc-heading { align-items: flex-start; }
    .shc-title { font-size: .92rem; }
    .shc-active { padding: 10px 8px; }
    .shc-countdown { font-size: 3.6rem; }
    .shc-button { min-height: 32px; padding: 5px 8px; font-size: .68rem; }
    .shc-button.shc-start { min-width: 6.5rem; padding-right: 16px; padding-left: 16px; }
    .shc-list ol { padding-right: 7px; padding-left: 7px; }
    .shc-item-open { grid-template-columns: 39px minmax(0, 1fr); gap: 5px; }
    .shc-team-row { grid-template-columns: 19px minmax(0, 1fr) 64px 28px; gap: 3px; }
    .shc-team-logo, .shc-team-logo .club-logo { width: 17px !important; min-width: 17px; }
    .shc-team-logo .club-logo img { width: 17px !important; max-width: 17px !important; }
    .shc-team-name { font-size: .69rem; }
    .shc-team-place { width: 64px; font-size: .57rem; }
    .shc-receipt, .shc-receipt-spacer { flex-basis: 36px; min-width: 36px; }
}
@media (prefers-reduced-motion: reduce) { .shc-button { transition: none; } }

@media screen and (min-width: 760px) {
  .shc-list-heading h3 { font-size: 14px; }
  .shc-team-name { font-size: 14px; }
  .shc-button { min-height: 40px; font-size: 13px; }
}

.shc-controls { display: grid; grid-template-columns: minmax(90px,1.3fr) 40px minmax(60px,1fr) minmax(60px,1fr); }
.shc-controls .shc-button { min-width: 0; padding-inline: 6px; }
.shc-controls .shc-start { padding-inline: 7px; }
@media screen and (min-width: 760px) {
  .shc-team-row { grid-template-columns: 22px minmax(0,340px) minmax(85px,1fr) 32px; }
  .shc-team-place { width: auto; }
}

.shc-pause img { display: block; width: 30px; height: 30px; object-fit: contain; margin: auto; }

/* Compact zaalwerkblad: dezelfde kolommen in alle drie wedstrijdlijsten. */
@media screen and (min-width: 760px) {
  .switch-hall-clock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "heading heading" "picker picker" "clock current" "next played"; gap: 12px 16px; align-items: start; }
  .shc-heading { grid-area: heading; margin: 0; }
  .shc-picker { grid-area: picker; margin: 0; }
  .shc-active { grid-area: clock; padding: 18px 14px; }
  .shc-lists { display: contents; }
  .shc-list[data-shc-list="current"] { grid-area: current; }
  .shc-list[data-shc-list="next"] { grid-area: next; }
  .shc-list[data-shc-list="played"] { grid-area: played; }
  .shc-countdown { margin: 16px 0; font-size: clamp(72px, 8vw, 88px); }
  .shc-title { font-size: 17px; }
  .shc-item { padding-block: 4px; }
  .shc-list ol { padding-inline: 8px; }
  .shc-item-open { grid-template-columns: 40px minmax(0, 1fr); gap: 6px; }
  .shc-team-row { grid-template-columns: 20px minmax(0, 1fr) 78px 28px; gap: 4px; }
  .shc-team-name { font-size: 13px; line-height: 1.25; }
  .shc-team-place { width: auto; font-size: 11px; }
  .shc-receipt, .shc-receipt-spacer { flex-basis: 32px; min-width: 32px; }
  .shc-filter { font-size: 11px; }
}

/* Zoemer testen en dempen samen bij de klok, zonder extra bedieningsrij. */
.shc-audio-tools { position: absolute; top: 5px; right: 5px; display: flex; align-items: center; gap: 3px; }
.shc-audio-tools .shc-button { position: static; display: grid; place-items: center; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 5px; border: 0; border-radius: 8px; background: transparent; color: var(--shc-navy); }
.shc-audio-tools .shc-buzzer-test { padding: 0; }
.shc-buzzer-test img, .shc-reset img { display: block; width: 38px; height: 38px; object-fit: contain; }
.shc-heading-tools .shc-reset { display: grid; place-items: center; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; padding: 2px; }
.shc-audio-tools .shc-sound-toggle svg { width: 25px; height: 25px; }
.shc-audio-tools .shc-button:hover:not(:disabled), .shc-audio-tools .shc-button:focus-visible { background: var(--shc-orange-soft); }
.shc-active-top { padding-right: 84px; min-height: 42px; }

/* Mat scorebord: zachter blauw en gebroken wit, met één kleuraccent. */
.shc-active { padding: 9px; border-left-width: 1px; }
.shc-scoreboard { position: relative; padding: 12px 12px 16px; border: 1px solid #626887; border-radius: 10px; background: #3B4168; color: #F2F1ED; }
.shc-scoreboard .shc-active-top { align-items: flex-start; flex-direction: column; justify-content: flex-start; gap: 4px; text-align: left; color: #F2F1ED; font-size: 14px; font-weight: 600; line-height: 1.35; }
.shc-set-reference { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .35em; }
.shc-scoreboard .shc-set-time { color: inherit; font: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shc-set-time:not(:empty)::before { content: '· '; }
.shc-scoreboard .shc-phase { color: #FFE0BD; }
.shc-scoreboard .shc-countdown { margin: 18px 0 20px; color: #F2F1ED; font-size: clamp(80px, 22vw, 112px); font-weight: 700; letter-spacing: -.025em; }
.shc-controls { grid-template-columns: minmax(72px,1fr) 52px repeat(2,minmax(50px,60px)); align-items: center; gap: 6px; max-width: 360px; margin: 12px auto 0; }
.shc-controls .shc-button { min-height: 44px; font-size: 13px; }
.shc-controls .shc-button.shc-pause { width: 52px; height: 52px; min-height: 52px; padding: 0; border-color: transparent; background: transparent; box-shadow: none; }
.shc-controls .shc-pause img { width: 52px; height: 52px; }
.shc-controls .shc-pause:active:not(:disabled), .shc-controls .shc-pause:focus-visible { border-color: var(--shc-orange); }
.shc-controls [data-shc-action="adjust:30"] { color: #16733D; }
.shc-controls [data-shc-action="adjust:-30"] { color: #B32929; }
.shc-heading-tools .shc-picker-toggle { min-height: 44px; font-size: 13px; }
.shc-scoreboard .shc-audio-tools .shc-button { color: #E4E4EB; }
.shc-scoreboard .shc-sound-toggle svg { fill: #E4E4EB; }
.shc-scoreboard .shc-audio-tools .shc-button:hover:not(:disabled), .shc-scoreboard .shc-audio-tools .shc-button:focus-visible { background: #515779; }
.shc-scoreboard .shc-button:disabled { opacity: .45; }
.shc-progress { height: 4px; overflow: hidden; border-radius: 3px; background: #646987; }
.shc-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; transform-origin: left center; background: #FFAF68; }
.shc-scoreboard[data-phase="changeover"] .shc-progress span { background: #6AD5CB; }
.shc-scoreboard[data-phase="changeover"] .shc-phase { color: #A0E7E0; }
.shc-scoreboard.shc-final-seconds .shc-countdown { color: #FFC087; }
@media screen and (min-width: 760px) {
  .shc-active { padding: 10px; }
  .shc-scoreboard { padding: 16px 16px 20px; }
  .shc-scoreboard .shc-active-top { font-size: 16px; }
  .shc-scoreboard .shc-countdown { margin-block: 22px 24px; font-size: clamp(104px, 10vw, 132px); }
  .shc-controls .shc-button, .shc-heading-tools .shc-picker-toggle { min-height: 48px; font-size: 14px; }
}