/*
 * Default styling of the personal scorecard. Project specific adjustments belong
 * into gkmb_template/Resources/Public/Css/Extensions/personalscore.css, that file
 * is loaded afterwards.
 *
 * The class names are the ones of the predecessor, so existing project styles
 * keep working.
 */

.gkmb_pscoreDiv {
  /*
   * The template holds its colours as the three components of an rgb() call,
   * not as a finished colour - "215, 215, 215" instead of "#d7d7d7". Without
   * the rgb() around it the rule is invalid and the border simply does not
   * appear, which is why the fallbacks are written the same way.
   */
  --pscore-border: rgb(var(--c-neutral-light, 215, 215, 215));
  --pscore-head: rgb(var(--c-neutral-lightest, 242, 242, 242));
  --pscore-gap: 2px;
}

/* Course and tee selection */

.gkmb_pscoreSelectMessage,
.gkmb_pscoreCourseSelectedMessage,
.gkmb_pscoreHcapMessage {
  margin-bottom: 0.5rem;
}

.gkmb_pscoreTeeSelect {
  display: flex;
  flex-direction: column;
  gap: var(--pscore-gap);
}

.gkmb_pscoreTeeSelectCourse {
  font-weight: bold;
  margin: 1rem 0 0.25rem;
}

/* Course, gender and tee as a filter above the card */

.gkmb_pscoreFilterList {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.gkmb_pscoreFilterField {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 12rem;
}

/*
 * Border and padding of the fields are the ones every other form of the site
 * has, so the filter does not stand out as something of its own. Written out
 * here and not left to the template, because the extension has to look
 * finished without it as well.
 */
.gkmb_pscoreFilterSelect,
.gkmb_pscoreFilterInput {
  border: 1px solid var(--pscore-border);
  padding: calc(0.6rem - 1px) 0.6rem;
  line-height: 1.4;
  background-color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  max-width: 100%;
  /* The fields carry their spacing from the filter itself */
  margin: 0;
}

.gkmb_pscoreFilterInput {
  /* A handicap index is four characters wide at most: "+5,4", "54,0" */
  max-width: 8rem;
}

.gkmb_pscoreFilterSubmit {
  flex: 0 0 auto;
}

.gkmb_pscoreFilterTee {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

/* While the card is fetched it steps back instead of pretending to be current */
.gkmb_pscoreFilterCardPending {
  opacity: 0.5;
  transition: opacity 0.2s;
}

.gkmb_pscoreTeeSelectTee,
.gkmb_pscoreTeeSelectTeedata {
  padding: 0.5rem;
}

.gkmb_pscoreTeeSelectTeeLink {
  display: block;
  color: inherit;
  text-decoration: none;
}

.gkmb_pscoreTeeSelectTeeLink:hover,
.gkmb_pscoreTeeSelectTeeLink:focus-visible {
  text-decoration: underline;
}

.gkmb_pscoreError,
.gkmb_pscorePlayhcapError {
  color: var(--c-error, #c00);
  margin: 0.5rem 0;
}

/* Handicap entry and playing handicap */

.gkmb_pscoreTable,
.gkmb_pscorePlayhcapForm,
.gkmb_pscorePlayhcapGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.gkmb_pscoreHcpEntryForm,
.gkmb_pscorePlayhcapForm {
  margin: 1rem 0;
}

.gkmb_pscorePlayhcap {
  font-weight: bold;
}

.gkmb_pscorePlayhcapLinkField {
  flex-basis: 100%;
}

/* Scorecard */

.gkmb_pscoreScTable {
  display: flex;
  flex-direction: column;
  gap: var(--pscore-gap);
  margin: 1rem 0;
  overflow-x: auto;
}

.gkmb_pscoreScHeaderRow,
.gkmb_pscoreScHoleRowRow,
.gkmb_pscoreScOutRow,
.gkmb_pscoreScInRow,
.gkmb_pscoreScTotalRow {
  display: grid;
  grid-template-columns: repeat(10, minmax(2.5rem, 1fr));
  gap: var(--pscore-gap);
  /* stretch statt center: die Zellen sollen die ganze Zeilenhöhe füllen,
     sonst steht der Rahmen der Bahn-Felder niedriger als die Zeile, die vom
     Eingabefeld für den Score bestimmt wird */
  align-items: stretch;
  min-width: 32rem;
}

.gkmb_pscoreScHeaderRow > div,
.gkmb_pscoreScHoleRowRow > div,
.gkmb_pscoreScOutRow > div,
.gkmb_pscoreScInRow > div,
.gkmb_pscoreScTotalRow > div {
  /* Empty cells keep the height of the row */
  min-height: 1.75rem;
  padding: 0.25rem;
  text-align: center;
  /* Die Zelle füllt die Zeile, ihr Inhalt bleibt mittig */
  display: flex;
  align-items: center;
  justify-content: center;
}

.gkmb_pscoreScHeaderRow {
  background-color: var(--pscore-head);
  font-weight: bold;
}

.gkmb_pscoreScOutRow,
.gkmb_pscoreScInRow,
.gkmb_pscoreScTotalRow {
  border-top: 1px solid var(--pscore-border);
  font-weight: bold;
}

/* Der Elementselektor kommt aus dem gkmb_template ("input, select, textarea"),
   deshalb steht hier das input davor - sonst bliebe dessen unterer Abstand
   stehen und machte die Zeile höher als die Felder der Bahn daneben. */
input.gkmb_pscoreScHoleCellScoreInput {
  width: 100%;
  max-width: 3rem;
  margin: 0;
  text-align: center;
}

.gkmb_pscoreScHoleCellError {
  color: var(--c-error, #c00);
}

/* Statistics */

.gkmb_pscoreScStatsRow {
  margin-top: 1rem;
}

.gkmb_pscoreScStatsCell .color-block {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
}

.gkmb_pscoreScCalcCell {
  margin-top: 1rem;
}

.gkmb_pscorePrintlink {
  margin-top: 1rem;
}

.gkmb_pscoreFooter {
  margin-top: 1rem;
  font-size: 0.75rem;
}

/* Print */

@media print {
  .gkmb_pscorePrintlink,
  .gkmb_pscoreScCalcCell,
  .gkmb_pscoreTeeSelectedLink,
  .gkmb_pscorePlayhcapLinkField {
    display: none;
  }

  .gkmb_pscoreScTable {
    overflow-x: visible;
  }
}