/* Modul Getränkekasse – Mitgliederauswahl, Getränkekacheln, Strichliste,
   Gesamtübersicht, Export. Farben und Bausteine aus ../../styles.css. */

/* ---- Mitgliederauswahl ---- */
.member-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.member-grid button {
  min-height: var(--tap); border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--surface); font-weight: 700; padding: 0.6rem;
}
.member-grid button:active { border-color: var(--feuerrot); background: #fff; }
.filter { margin-bottom: 0.9rem; }

/* ---- Getränkekacheln ----
   Eine Zeile: Name/Preis · Strichliste · Zähler | Minus-Streifen.
   Tippen links vom Streifen setzt einen Strich, der Streifen nimmt zurück. */
.drink-list { display: flex; flex-direction: column; gap: 0.5rem; }
.drink {
  position: relative; display: flex; min-height: 60px; overflow: hidden;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
  transition: transform 0.06s ease, border-color 0.12s ease;
}
.drink:has(.main:active) { transform: scale(0.985); border-color: var(--feuerrot); }
.drink .main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; }
/* --info-w setzt renderDrinks() auf den breitesten Namen, damit alle
   Strichlisten in einer Spalte beginnen. */
.drink .info { flex: none; width: var(--info-w, auto); max-width: 45%; margin-right: 0.6rem; }
.drink .name { font-size: 1rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.drink .price { color: var(--muted); font-size: 0.78rem; }
.drink .tally { flex: 1; min-width: 0; min-height: 24px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.drink .tally:empty::before { content: "noch keine"; color: var(--muted); font-size: 0.78rem; font-style: italic; }
.drink .count {
  font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums;
  min-width: 2ch; text-align: right;
}
.drink .count.pulse { animation: pulse 0.3s ease; }
.drink .undo {
  flex: none; width: 56px; display: flex; align-items: center; justify-content: center;
  border-left: 1.5px solid var(--line); background: var(--paper);
  color: var(--ink); font-size: 1.75rem; line-height: 1;
}
.drink .undo:active { background: var(--line); }
.drink:not(.has-count) .undo { color: #D9D2C5; }
.drink:not(.has-count) .undo:active { background: var(--paper); }

/* Strichlisten-Glyphen */
.tally svg { display: block; height: 22px; width: auto; }
.tally .stroke { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.tally .fifth { stroke: var(--feuerrot); stroke-width: 2.6; stroke-linecap: round; }
/* Neuer Strich wird vom Anfangspunkt (oben) zum Endpunkt gezeichnet; die
   Strichmuster-Werte stehen nur im Keyframe, damit er ohne Animation
   (prefers-reduced-motion) einfach vollständig erscheint. */
.tally .draw { animation: draw 0.4s ease-out both; }

/* schwebendes +1 */
.plusone {
  position: absolute; right: 72px; top: 50%; transform: translateY(-50%);
  color: var(--ok); font-weight: 800; font-size: 1.1rem; pointer-events: none;
  animation: floatUp 0.6s ease forwards;
}

/* ---- Verwaltung: Preisfeld, Export ---- */
.row .price-in { width: 84px; }
.row .price-in input { width: 100%; padding: 0.55rem 0.4rem; border: 1.5px solid var(--line); border-radius: 8px; text-align: right; }

.export-buttons { display: grid; gap: 0.6rem; margin-top: 1rem; }
.export-dates { display: flex; gap: 0.7rem; }
.export-dates .field { flex: 1; }
.export-dates input { width: 100%; padding: 0.7rem 0.6rem; border: 1.5px solid var(--line); border-radius: 8px; }

/* ---- Persönliche Übersicht ---- */
.summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.summary-total .big { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.summary-total .lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.7; margin-bottom: 0.15rem; }
.sum-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.3rem 1rem; align-items: baseline; background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem; margin-bottom: 0.5rem; }
.sum-row .name { font-weight: 800; }
.sum-row .cnt { color: var(--muted); font-variant-numeric: tabular-nums; }
.sum-row .eur { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 5ch; text-align: right; }
.sum-empty { color: var(--muted); font-style: italic; }

@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.28); color: var(--ok); } 100% { transform: scale(1); } }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(-50%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-160%); } }
@keyframes draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to   { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .drink, .plusone, .tally .draw, .count.pulse { animation: none !important; transition: none !important; }
}