/* ==========================================================================
   OpenYardage · Mein Bag: Schlagdistanzen mit Voreinstellung
   Gehoert zu public/js/bag.js. Alles unter `.bagcard` gescoped, damit die
   Datei unabhaengig von der Reihenfolge der <link>-Einbindung gewinnt.
   Masse und Farben aus dem Design-Entwurf, Tokens aus index.html mit
   Fallback, falls das Modul allein laeuft.
   ========================================================================== */

.bagcard {
  font-family: var(--serif, Georgia, 'Times New Roman', serif);
  color: var(--ink, #21251f);
}

/* Die Pfeilchen der Zahlenfelder fressen rund 15px und schneiden bei der
   schmalen Zellenbreite aus dem Entwurf die dritte Ziffer ab. Weg damit,
   getippt wird hier ohnehin. */
.bagcard input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.bagcard input[type=number]::-webkit-outer-spin-button,
.bagcard input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- Ueberschrift mit auslaufender Linie ---------- */
.bagcard .baghead {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.bagcard .baghead .t {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--green, #2f6b46);
}
.bagcard .baghead .r {
  flex: 1;
  border-bottom: 1px solid var(--line, #d8d1c0);
}

.bagcard .bagintro {
  margin: 12px 0 18px;
  font-size: 14.5px;
  color: var(--ink2, #4a463c);
  line-height: 1.6;
}

/* ---------- Die beiden Wege zur Voreinstellung ---------- */
.bagcard .bagways {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.bagcard .bagway {
  border: 1px solid var(--line, #d8d1c0);
  border-radius: 3px;
  background: var(--card, #faf7ef);
  padding: 12px 14px 13px;
}
.bagcard .bagway .wl {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--green, #2f6b46);
}
.bagcard .bagway .wt {
  margin: 6px 0 10px;
  font-size: 13px;
  font-style: italic;
  color: var(--mut, #6b6252);
  line-height: 1.5;
}
.bagcard .bagway .wr {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.bagcard .bagway .u {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 12px;
  color: var(--faint, #8a8170);
  margin-left: -3px;
}

.bagcard input.bagnum {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 15px;
  font-weight: 700;
  color: var(--green, #2f6b46);
  border: 1px solid var(--line, #d8d1c0);
  border-radius: 3px;
  background: var(--card2, #fffdf7);
  padding: 5px 6px;
  width: 62px;
  text-align: right;
}
.bagcard input.bagnum:focus {
  outline: none;
  border-color: var(--green, #2f6b46);
}

/* ---------- Knoepfe ---------- */
.bagcard .bagbtn {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  background: var(--green, #2f6b46);
  color: #f5f1e6;
  border: 1.5px solid var(--green, #2f6b46);
  border-radius: 3px;
  padding: 7px 14px;
  white-space: nowrap;
}
.bagcard .bagbtn:hover { background: var(--green-dk, #1d4a2f); border-color: var(--green-dk, #1d4a2f); }
.bagcard .bagbtn:focus-visible { outline: 2px solid var(--green, #2f6b46); outline-offset: 2px; }
.bagcard .bagbtn.ghost {
  background: none;
  color: var(--green, #2f6b46);
}
.bagcard .bagbtn.ghost:hover { background: var(--green, #2f6b46); color: #f5f1e6; }
.bagcard .bagbtn.bagsave { font-size: 13px; padding: 11px 22px; }
.bagcard .bagbtn[disabled] { opacity: .5; cursor: default; }

/* ---------- Schutzschalter gegen versehentliches Ueberschreiben ---------- */
.bagcard .bagover {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--faint, #8a8170);
  margin-bottom: 14px;
  cursor: pointer;
  user-select: none;
}
.bagcard .bagover input { accent-color: var(--green, #2f6b46); cursor: pointer; }

/* ---------- Raster mit drei Spalten (Design-Entwurf) ---------- */
.bagcard .baggrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bagcard .bagextrahead {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--faint, #8a8170);
  margin: 18px 0 8px;
}

.bagcard .bagitem {
  border: 1px solid var(--line, #d8d1c0);
  border-radius: 3px;
  background: var(--card2, #fffdf7);
  padding: 10px 14px;
}
.bagcard .bagline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.bagcard .bagname {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink, #21251f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bagcard .bagval {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
}
.bagcard input.bagin {
  width: 52px;
  border: 1px solid var(--line, #d8d1c0);
  border-radius: 3px;
  background: var(--card, #faf7ef);
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 15px;
  font-weight: 700;
  color: var(--green, #2f6b46);
  padding: 5px 6px;
  text-align: right;
}
.bagcard input.bagin:focus {
  outline: none;
  border-color: var(--green, #2f6b46);
}
.bagcard .bagval .unit {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 12px;
  color: var(--faint, #8a8170);
}

/* Herkunftsvermerk. Die Zeile ist immer da, damit die Zellen im Raster nicht
   springen, sobald aus einer Schaetzung ein eigener Wert wird. */
.bagcard .bagsrc {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  min-height: 9px;
  margin-top: 7px;
  color: var(--ghost, #b8ae98);
}

/* Geschaetzt: gedaempfte Schrift, gestrichelter Rand, Vermerk. Ein erfundener
   Wert darf nie aussehen wie ein gemessener, er steuert die Schlaegerwahl. */
.bagcard .bagitem.est {
  border-style: dashed;
  background: var(--card, #faf7ef);
}
.bagcard .bagitem.est .bagname { color: var(--mut, #6b6252); }
.bagcard .bagitem.est input.bagin {
  color: var(--faint, #8a8170);
  background: transparent;
  border-style: dashed;
}
.bagcard .bagitem.est .bagsrc { color: var(--faint, #8a8170); }

/* Leer: nur ein blasser Hinweis, keine Zahl. */
.bagcard .bagitem.empty { border-style: dashed; }
.bagcard .bagitem.empty .bagname { color: var(--mut, #6b6252); }

/* Eigener Wert: volle Papierkarte, grüne Zahl, kein Vermerk noetig. */
.bagcard .bagitem.own { border-color: var(--line2, #c9c1ad); }

/* Reihenfolge verkehrt: ein kürzerer Schläger fliegt weiter als ein längerer.
   Kein stiller Eingriff in die Zahlen, nur ein sichtbarer Einwand. */
.bagcard .bagitem.warn {
  border-color: var(--red, #b23a2e);
  background: var(--red-bg, #fdf6f4);
}
.bagcard .bagitem.warn input.bagin { color: var(--red, #b23a2e); }

/* ---------- Statuszeile ---------- */
.bagcard .bagstatus {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .04em;
  color: var(--faint, #8a8170);
  margin-top: 14px;
  min-height: 17px;
}
.bagcard .bagstatus.ok { color: var(--green, #2f6b46); }
.bagcard .bagstatus.warn {
  color: var(--mut, #6b6252);
  border-left: 2px solid var(--line2, #c9c1ad);
  padding-left: 9px;
}

/* ---------- Fuss ---------- */
.bagcard .bagfoot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.bagcard .baghint {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--faint, #8a8170);
}

/* ---------- Schmale Displays: das Dreispalten-Raster bricht um ---------- */
@media (max-width: 760px) {
  .bagcard .baggrid { grid-template-columns: repeat(2, 1fr); }
  .bagcard .bagways { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .bagcard .baggrid { grid-template-columns: 1fr; }
  .bagcard .bagitem { padding: 9px 12px; }
  .bagcard .bagfoot { align-items: flex-start; flex-direction: column; gap: 10px; }
  .bagcard .bagbtn.bagsave { width: 100%; }
}

/* Das Bag ist ein Bedienelement des Profils, kein Book-Inhalt. Auf Papier
   bleiben die Zahlen lesbar, die Bedienung verschwindet. */
@media print {
  .bagcard .bagways,
  .bagcard .bagover,
  .bagcard .bagbtn,
  .bagcard .bagstatus { display: none !important; }
  .bagcard input.bagin {
    border: none;
    background: none;
    color: var(--ink, #21251f);
  }
  .bagcard .bagitem { break-inside: avoid; }
}