/* =============================================================================
   GKMB Persönliche Scorekarte – Live-Runde

   Mobile first: gespielt wird auf dem Handy, mit einer Hand und oft in der
   Sonne. Die Tasten sind groß, der Kontrast hoch, die Zahlen stehen im
   Vordergrund.

   Baut auf den Standards des gkmb_template auf: Farben als rgb(var(--c-*)),
   Schriftgrößen --f-size-*, Radius --b-radius-s. Die Buttons benutzen die
   Standardklasse .font__button, hier kommen nur die Varianten dazu.

   Projektspezifische Anpassungen gehören in
   gkmb_template/Resources/Public/Css/Extensions/personalscore.css. Diese Datei
   wird über den Asset Collector NACH dem Projekt-CSS geladen, Projektregeln
   müssen deshalb spezifischer sein, z. B.
   .gkmb_pscoreRound .gkmb_pscoreRoundCard.
   ========================================================================== */

.gkmb_pscoreRound {
  --round-primary: var(--c-primary, 0, 102, 51);
  --round-surface: rgb(var(--c-neutral-lightest, 245, 245, 245));
  --round-muted: rgb(var(--c-neutral-lighter, 230, 230, 230));
  --round-line: rgb(var(--c-neutral-light, 215, 215, 215));
  --round-text-muted: rgb(var(--c-neutral, 110, 110, 110));
  --round-radius: calc(var(--b-radius-s, 4px) * 3);
  --round-gap: var(--g-gap-s, 0.75rem);

  display: flex;
  flex-direction: column;
  gap: var(--round-gap);
  margin-inline: auto;
  max-width: 40rem;
}

.gkmb_pscoreRound [hidden] {
  display: none !important;
}

.gkmb_pscoreRound button {
  cursor: pointer;
  font: inherit;
}

.gkmb_pscoreRound button:focus-visible,
.gkmb_pscoreRound input:focus-visible,
.gkmb_pscoreRound select:focus-visible {
  outline: 3px solid rgba(var(--round-primary), 0.45);
  outline-offset: 2px;
}

.gkmb_pscoreRoundSetup,
.gkmb_pscoreRoundDone {
  display: flex;
  flex-direction: column;
  gap: var(--round-gap);
}

/* Karten und Felder
   ========================================================================== */

.gkmb_pscoreRoundCard {
  background-color: #fff;
  border: 1px solid var(--round-line);
  border-radius: var(--round-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.gkmb_pscoreRoundField {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.gkmb_pscoreRoundLabel,
.gkmb_pscoreRoundKicker {
  color: var(--round-text-muted);
  font-size: var(--f-size-s-1, 0.875rem);
  font-weight: var(--f-weight-sb, 600);
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

.gkmb_pscoreRoundIntro,
.gkmb_pscoreRoundHint,
.gkmb_pscoreRoundNotice {
  margin: 0;
}

.gkmb_pscoreRoundHint {
  color: var(--round-text-muted);
  font-size: var(--f-size-s-1, 0.875rem);
}

.gkmb_pscoreRoundHint:empty {
  display: none;
}

.gkmb_pscoreRoundNotice,
.gkmb_pscoreRoundPreset {
  background-color: var(--round-surface);
  border-left: 4px solid rgb(var(--round-primary));
  border-radius: var(--round-radius);
  margin: 0;
  padding: 0.75rem 1rem;
}

.gkmb_pscoreRoundInput,
.gkmb_pscoreRoundSelect {
  background-color: #fff;
  border: 1px solid var(--round-line);
  border-radius: calc(var(--round-radius) * 0.66);
  box-sizing: border-box;
  color: inherit;
  font: inherit;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  width: 100%;
}

.gkmb_pscoreRoundInput:focus,
.gkmb_pscoreRoundSelect:focus {
  border-color: rgb(var(--round-primary));
}

.gkmb_pscoreRoundInputShort {
  max-width: 8rem;
}

/* Umschalter: Segmente und Chips
   ========================================================================== */

.gkmb_pscoreRoundSegment {
  background-color: var(--round-muted);
  border-radius: 999px;
  display: flex;
  gap: 2px;
  padding: 3px;
}

.gkmb_pscoreRoundSegment button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: inherit;
  flex: 1 1 0;
  font-size: var(--f-size-s-1, 0.875rem);
  min-height: 2.5rem;
  padding: 0.35rem 0.5rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.gkmb_pscoreRoundSegment button[aria-pressed="true"] {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  color: rgb(var(--round-primary));
  font-weight: var(--f-weight-sb, 600);
}

.gkmb_pscoreRoundChips,
.gkmb_pscoreRoundTees {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.gkmb_pscoreRoundChip,
.gkmb_pscoreRoundTee {
  align-items: center;
  background-color: #fff;
  border: 1px solid var(--round-line);
  border-radius: 999px;
  color: inherit;
  display: inline-flex;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.9rem;
}

.gkmb_pscoreRoundChip[aria-pressed="true"] {
  background-color: rgb(var(--round-primary));
  border-color: rgb(var(--round-primary));
  color: #fff;
}

.gkmb_pscoreRoundTeeDot {
  background-color: var(--pscore-tee, #fff);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  display: inline-block;
  height: 0.9rem;
  width: 0.9rem;
}

.gkmb_pscoreRoundTee[aria-pressed="true"] {
  background-color: var(--pscore-tee, #fff);
  border-color: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
  color: var(--pscore-tee-text, #000);
  font-weight: var(--f-weight-sb, 600);
}

.gkmb_pscoreRoundTee[aria-pressed="true"] .gkmb_pscoreRoundTeeDot {
  border-color: currentColor;
}

/* Spieler und Teams
   ========================================================================== */

.gkmb_pscoreRoundUnitHead,
.gkmb_pscoreRoundPersonHead {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.gkmb_pscoreRoundPerson {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gkmb_pscoreRoundPerson + .gkmb_pscoreRoundPerson {
  border-top: 1px dashed var(--round-line);
  padding-top: 1rem;
}

.gkmb_pscoreRoundName {
  flex: 1 1 auto;
  min-width: 0;
}

.gkmb_pscoreRoundHcpi {
  flex: 0 0 5.5rem;
  text-align: center;
}

.gkmb_pscoreRoundRemove {
  background: transparent;
  border: 1px solid var(--round-line);
  border-radius: 50%;
  color: var(--round-text-muted);
  flex: 0 0 2.25rem;
  font-size: 1.25rem;
  height: 2.25rem;
  line-height: 1;
  padding: 0;
  width: 2.25rem;
}

.gkmb_pscoreRoundHandicap {
  align-items: baseline;
  background-color: var(--round-surface);
  border-radius: calc(var(--round-radius) * 0.66);
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0.5rem 0.75rem;
}

.gkmb_pscoreRoundHandicap span {
  color: var(--round-text-muted);
  font-size: var(--f-size-s-1, 0.875rem);
}

.gkmb_pscoreRoundHandicap strong {
  font-size: var(--f-size-l-1, 1.25rem);
  font-variant-numeric: tabular-nums;
}

.gkmb_pscoreRoundAdd {
  background: transparent;
  border: 2px dashed var(--round-line);
  border-radius: var(--round-radius);
  color: rgb(var(--round-primary));
  font-weight: var(--f-weight-sb, 600);
  min-height: 3rem;
  padding: 0.5rem 1rem;
}

.gkmb_pscoreRoundFormula {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gkmb_pscoreRoundFormulaPart {
  display: flex;
  flex-direction: column;
  font-size: var(--f-size-s-2, 0.75rem);
  gap: 0.25rem;
}

/* Buttons
   ========================================================================== */

.gkmb_pscoreRound .gkmb_pscoreRoundPrimary,
.gkmb_pscoreRound .gkmb_pscoreRoundSecondary {
  justify-content: center;
  min-height: 3.25rem;
  width: 100%;
}

.gkmb_pscoreRound .gkmb_pscoreRoundSecondary {
  background-color: #fff;
  border: 1px solid var(--round-line);
  color: inherit;
}

.gkmb_pscoreRound .gkmb_pscoreRoundSecondary:disabled {
  opacity: 0.4;
}

.gkmb_pscoreRoundLink {
  align-self: center;
  background: transparent;
  border: 0;
  color: rgb(var(--round-primary));
  font-size: var(--f-size-s-1, 0.875rem);
  padding: 0.5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gkmb_pscoreRoundNav {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 2fr 3fr;
}

/* Kopf der laufenden Runde
   ========================================================================== */

.gkmb_pscoreRoundHead {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.gkmb_pscoreRoundHeadText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gkmb_pscoreRoundHeadText span {
  color: var(--round-text-muted);
  font-size: var(--f-size-s-1, 0.875rem);
}

.gkmb_pscoreRoundTabs {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.gkmb_pscoreRoundTabs button {
  background-color: #fff;
  border: 1px solid var(--round-line);
  border-radius: var(--round-radius);
  color: inherit;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-width: 6.5rem;
  padding: 0.4rem 0.75rem;
  text-align: left;
}

.gkmb_pscoreRoundTabs button span {
  font-size: var(--f-size-s-1, 0.875rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gkmb_pscoreRoundTabs button strong {
  font-variant-numeric: tabular-nums;
}

.gkmb_pscoreRoundTabs button[aria-selected="true"] {
  background-color: rgb(var(--round-primary));
  border-color: rgb(var(--round-primary));
  color: #fff;
}

/* Bahnleiste
   ========================================================================== */

.gkmb_pscoreRoundHoles {
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.gkmb_pscoreRoundHoles button {
  align-items: center;
  aspect-ratio: 1;
  background-color: #fff;
  border: 1px solid var(--round-line);
  border-radius: calc(var(--round-radius) * 0.66);
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  padding: 0;
}

.gkmb_pscoreRoundHoles span {
  font-size: var(--f-size-s-1, 0.875rem);
  font-weight: var(--f-weight-sb, 600);
}

.gkmb_pscoreRoundHoles small {
  color: rgb(var(--round-primary));
  font-size: 0.7rem;
  min-height: 0.8rem;
}

.gkmb_pscoreRoundHoles button.is-played {
  background-color: rgba(var(--round-primary), 0.1);
}

.gkmb_pscoreRoundHoles button[aria-current="true"] {
  background-color: rgb(var(--round-primary));
  border-color: rgb(var(--round-primary));
  color: #fff;
}

.gkmb_pscoreRoundHoles button[aria-current="true"] small {
  color: #fff;
}

/* Bahnkarte mit Zähler
   ========================================================================== */

.gkmb_pscoreRoundHole {
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.gkmb_pscoreRoundHole .gkmb_pscoreRoundKicker {
  color: rgb(var(--round-primary));
  font-size: var(--f-size, 1rem);
}

.gkmb_pscoreRoundHoleMeta {
  font-size: var(--f-size-l-1, 1.25rem);
  font-weight: var(--f-weight-sb, 600);
  margin: 0;
}

.gkmb_pscoreRoundStrokes {
  color: var(--round-text-muted);
  margin: 0;
  min-height: 1.5em;
}

.gkmb_pscoreRoundStepper {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: 4rem minmax(5rem, 1fr) 4rem;
  margin-block: 0.5rem;
  width: 100%;
}

.gkmb_pscoreRoundStepper button {
  aspect-ratio: 1;
  background-color: #fff;
  border: 2px solid rgb(var(--round-primary));
  border-radius: 50%;
  color: rgb(var(--round-primary));
  font-size: 2rem;
  line-height: 1;
  touch-action: manipulation;
}

.gkmb_pscoreRoundStepper button:active {
  background-color: rgb(var(--round-primary));
  color: #fff;
}

.gkmb_pscoreRoundStepper output {
  font-size: 3.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--f-weight-b, 700);
  line-height: 1;
}

.gkmb_pscoreRoundStepper output.is-empty {
  color: var(--round-line);
}

.gkmb_pscoreRoundValues {
  display: grid;
  gap: 0.5rem;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  width: 100%;
}

.gkmb_pscoreRoundValues div,
.gkmb_pscoreRoundStanding div {
  background-color: var(--round-surface);
  border-radius: calc(var(--round-radius) * 0.66);
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}

.gkmb_pscoreRoundValues span,
.gkmb_pscoreRoundStanding dt {
  color: var(--round-text-muted);
  font-size: var(--f-size-s-2, 0.75rem);
}

.gkmb_pscoreRoundValues strong,
.gkmb_pscoreRoundStanding dd {
  font-size: var(--f-size-l-1, 1.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: var(--f-weight-sb, 600);
  margin: 0;
}

/* Zwischenstand
   ========================================================================== */

.gkmb_pscoreRoundStanding {
  display: grid;
  gap: 0.4rem;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  text-align: center;
}

/* Scorekarte
   ========================================================================== */

.gkmb_pscoreRoundTableWrap {
  border: 1px solid var(--round-line);
  border-radius: var(--round-radius);
  overflow-x: auto;
}

.gkmb_pscoreRoundTable {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  width: 100%;
}

.gkmb_pscoreRoundTable th,
.gkmb_pscoreRoundTable td {
  border-bottom: 1px solid var(--round-muted);
  padding: 0.2rem 0.35rem;
  text-align: center;
  vertical-align: middle;
}

.gkmb_pscoreRoundTable thead th {
  background-color: var(--round-surface);
  font-size: var(--f-size-s-2, 0.75rem);
  font-weight: var(--f-weight-sb, 600);
}

.gkmb_pscoreRoundTable td[data-cell="strokes"] {
  color: var(--round-text-muted);
  letter-spacing: 0.1em;
}

.gkmb_pscoreRoundTable td[data-cell="value"] {
  color: rgb(var(--round-primary));
  font-weight: var(--f-weight-sb, 600);
}

.gkmb_pscoreRoundTable .gkmb_pscoreRoundInput {
  min-height: 2.25rem;
  padding: 0.2rem;
  text-align: center;
  width: 3rem;
}

.gkmb_pscoreRoundTable tr.is-current {
  background-color: rgba(var(--round-primary), 0.08);
}

.gkmb_pscoreRoundTable .gkmb_pscoreRoundSum {
  background-color: var(--round-surface);
  font-weight: var(--f-weight-sb, 600);
}

.gkmb_pscoreRoundTable.is-without-ndb [data-cell="ndb"],
.gkmb_pscoreRoundTable.is-without-ndb [data-bind="ndb-head"] {
  display: none;
}

/* Ergebnis
   ========================================================================== */

.gkmb_pscoreRoundDuel {
  align-items: center;
  background-color: rgb(var(--round-primary));
  border-radius: var(--round-radius);
  color: #fff;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  padding: 1rem;
}

.gkmb_pscoreRoundDuel > div {
  display: flex;
  flex-direction: column;
  opacity: 0.75;
}

.gkmb_pscoreRoundDuel > div:last-child {
  text-align: right;
}

.gkmb_pscoreRoundDuel > div.is-leading {
  opacity: 1;
}

.gkmb_pscoreRoundDuel span {
  font-size: var(--f-size-s-2, 0.75rem);
}

.gkmb_pscoreRoundDuelScore {
  font-size: var(--f-size-l-3, 2rem);
  font-variant-numeric: tabular-nums;
  font-weight: var(--f-weight-b, 700);
  margin: 0;
  white-space: nowrap;
}

.gkmb_pscoreRoundResults {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gkmb_pscoreRoundResult {
  background-color: #fff;
  border: 1px solid var(--round-line);
  border-radius: var(--round-radius);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0.9rem 1rem;
}

.gkmb_pscoreRoundResult.is-leading {
  border-color: rgb(var(--round-primary));
  box-shadow: inset 4px 0 0 rgb(var(--round-primary));
}

.gkmb_pscoreRoundResultHead {
  display: flex;
  flex-direction: column;
}

.gkmb_pscoreRoundResultHead span {
  color: var(--round-text-muted);
  font-size: var(--f-size-s-2, 0.75rem);
}

.gkmb_pscoreRoundResult dl {
  display: grid;
  gap: 0.4rem;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
}

.gkmb_pscoreRoundResult dl div {
  display: flex;
  flex-direction: column;
}

.gkmb_pscoreRoundResult dt {
  color: var(--round-text-muted);
  font-size: var(--f-size-s-2, 0.75rem);
}

.gkmb_pscoreRoundResult dd {
  font-size: var(--f-size-l-1, 1.25rem);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.gkmb_pscoreRoundResult .is-main dd {
  color: rgb(var(--round-primary));
  font-weight: var(--f-weight-b, 700);
}

/* Hover
   Das gkmb_template gibt jedem button:hover den dunklen Primärton als
   Hintergrund. Auf den hellen Tasten der Runde mit Schrift in der Primärfarbe
   wäre das Rot auf Rot, deshalb bekommt jede Taste hier ihren eigenen Zustand:
   helle Tasten werden hellgrau hinterlegt, gefüllte Tasten dunkler – die
   Schrift bleibt dabei immer lesbar.
   ========================================================================== */

@media (hover: hover) {
  .gkmb_pscoreRound .gkmb_pscoreRoundSegment button:hover {
    background-color: rgba(255, 255, 255, 0.6);
    color: inherit;
  }

  .gkmb_pscoreRound .gkmb_pscoreRoundSegment button[aria-pressed="true"]:hover {
    background-color: #fff;
    color: rgb(var(--round-primary));
  }

  .gkmb_pscoreRound .gkmb_pscoreRoundChip:hover,
  .gkmb_pscoreRound .gkmb_pscoreRoundTee:hover,
  .gkmb_pscoreRound .gkmb_pscoreRoundTabs button:hover,
  .gkmb_pscoreRound .gkmb_pscoreRoundHoles button:hover,
  .gkmb_pscoreRound .gkmb_pscoreRoundRemove:hover,
  .gkmb_pscoreRound .gkmb_pscoreRoundSecondary:hover {
    background-color: var(--round-muted);
    border-color: rgb(var(--c-neutral, 110, 110, 110));
    color: rgb(var(--c-neutral-darkest, 30, 30, 30));
  }

  .gkmb_pscoreRound .gkmb_pscoreRoundChip[aria-pressed="true"]:hover,
  .gkmb_pscoreRound .gkmb_pscoreRoundTabs button[aria-selected="true"]:hover,
  .gkmb_pscoreRound .gkmb_pscoreRoundHoles button[aria-current="true"]:hover,
  .gkmb_pscoreRound .gkmb_pscoreRoundPrimary:hover {
    background-color: rgb(var(--c-primary-dark, 146, 24, 25));
    border-color: rgb(var(--c-primary-dark, 146, 24, 25));
    color: #fff;
  }

  .gkmb_pscoreRound .gkmb_pscoreRoundHoles button[aria-current="true"]:hover small {
    color: #fff;
  }

  .gkmb_pscoreRound .gkmb_pscoreRoundTee[aria-pressed="true"]:hover {
    background-color: var(--pscore-tee, #fff);
    border-color: rgba(0, 0, 0, 0.6);
    color: var(--pscore-tee-text, #000);
  }

  .gkmb_pscoreRound .gkmb_pscoreRoundSecondary:disabled:hover {
    background-color: #fff;
    border-color: var(--round-line);
    color: inherit;
  }

  .gkmb_pscoreRound .gkmb_pscoreRoundStepper button:hover {
    background-color: rgba(var(--round-primary), 0.1);
    color: rgb(var(--c-primary-dark, 146, 24, 25));
  }

  .gkmb_pscoreRound .gkmb_pscoreRoundStepper button:active {
    background-color: rgb(var(--round-primary));
    color: #fff;
  }

  .gkmb_pscoreRound .gkmb_pscoreRoundAdd:hover {
    background-color: rgba(var(--round-primary), 0.06);
    border-color: rgb(var(--round-primary));
    color: rgb(var(--c-primary-dark, 146, 24, 25));
  }

  .gkmb_pscoreRound .gkmb_pscoreRoundLink:hover {
    background: transparent;
    color: rgb(var(--c-primary-dark, 146, 24, 25));
    text-decoration-thickness: 2px;
  }
}

@media (min-width: 40em) {
  .gkmb_pscoreRoundCard {
    padding: 1.25rem 1.5rem;
  }

  .gkmb_pscoreRoundHoles {
    gap: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gkmb_pscoreRoundSegment button {
    transition: none;
  }
}

@media print {
  .gkmb_pscoreRoundNav,
  .gkmb_pscoreRoundLink,
  .gkmb_pscoreRoundTabs,
  .gkmb_pscoreRound .gkmb_pscoreRoundPrimary {
    display: none;
  }
}