/* ==========================================================================
   Villa Admin: der Reiter Gutscheine
   --------------------------------------------------------------------------
   Eigene Datei, damit admin-styles.css unberuehrt bleibt. Nur vorhandene
   --vr-* Werte aus tokens.css, keine neue Farbe.

   Der Reiter ist eine Arbeitsflaeche, kein Schaufenster. Erik sieht auf
   einen Blick, was zu tun ist, und tut es mit einem Klick. Deshalb steht
   der Zustand gross und farbig, und der naechste Schritt steht als Knopf
   daneben, nicht in einem Menue.
   ========================================================================== */

.gs-zaehlung {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 16px;
}

.gs-zahl {
  font-size: 0.9rem;
  color: var(--vr-text-muted);
}

.gs-zahl b {
  font-size: 1.15rem;
  color: var(--vr-text-dunkel);
}

/* Die Zahl der offenen Anfragen ist die einzige, die zum Handeln auffordert.
   Sie steht deshalb in Glut, alle anderen bleiben ruhig. */
.gs-zahl--angefragt b { color: var(--vr-glut); }

.gs-meldung {
  padding: 24px 0;
  color: var(--vr-text-muted);
}

.gs-karte {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--vr-linie-soft);
  border-left: 4px solid var(--vr-linie);
  border-radius: 8px;
  background: var(--vr-papier);
}

/* Der Streifen links traegt den Zustand. Er ist die einzige Stelle, an der
   ohne Lesen erkennbar ist, was los ist: das Auge findet ihn beim
   Ueberfliegen einer langen Liste. */
.gs-karte--angefragt     { border-left-color: var(--vr-glut); }
.gs-karte--gebucht       { border-left-color: var(--vr-success); }
.gs-karte--abgeschlossen { border-left-color: var(--vr-linie); opacity: 0.72; }
.gs-karte--verworfen     { border-left-color: var(--vr-text-muted); opacity: 0.55; }

.gs-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.gs-nummer {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--vr-burgund);
  /* Gleiche Ziffernbreite, damit 014 und 111 gleich lang aussehen. */
  font-variant-numeric: tabular-nums;
}

.gs-status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gs-status--angefragt     { background: var(--vr-glut); color: var(--vr-text-hell); }
.gs-status--gebucht       { background: var(--vr-success); color: var(--vr-text-hell); }
.gs-status--abgeschlossen { background: var(--vr-linie); color: var(--vr-text-dunkel); }
.gs-status--verworfen     { background: var(--vr-text-muted); color: var(--vr-text-hell); }

.gs-daten {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0 0 12px;
  font-size: 0.9rem;
}

.gs-daten dt { color: var(--vr-text-muted); }
.gs-daten dd { margin: 0; color: var(--vr-text-dunkel); }

.gs-wer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--vr-linie-soft);
  font-size: 0.9rem;
}

.gs-wer__name { font-weight: 600; }

.gs-wer__link {
  color: var(--vr-burgund);
  text-decoration-color: var(--vr-gold);
  text-underline-offset: 3px;
  /* Mailadressen brechen sonst die Karte auf schmalen Geraeten auf. */
  overflow-wrap: anywhere;
  /* 44 Pixel Klickflaeche, ohne die Zeile hoeher zu machen. */
  padding: 11px 0;
}

.gs-unten {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--vr-linie-soft);
}

/* Weiss, nicht Papier. Ein Lesegeraet braucht den vollen Kontrast, auf
   getoentem Grund scheitern billige Handykameras. */
.gs-qr {
  flex: none;
  padding: 6px;
  border-radius: 4px;
  background: #ffffff;
  line-height: 0;
}

.gs-qr[hidden] { display: none !important; }
.gs-qr img { display: block; width: 120px; height: 120px; }

.gs-rechts {
  flex: 1 1 240px;
  min-width: 0;
}

.gs-link {
  display: inline-block;
  min-height: 44px;
  padding: 11px 0;
  color: var(--vr-burgund);
  text-decoration-color: var(--vr-gold);
  text-underline-offset: 3px;
}

.gs-zaehler {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--vr-text-muted);
}

.gs-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gs-knopf {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--vr-linie);
  border-radius: 6px;
  background: transparent;
  color: var(--vr-text-dunkel);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Genau EIN Knopf je Karte fuehrt. Zwei gleich starke Knoepfe nebeneinander
   heissen, dass der Benutzer entscheiden muss, statt zu handeln. */
.gs-knopf--haupt {
  border-color: var(--vr-burgund);
  background: var(--vr-burgund);
  color: var(--vr-text-hell);
}

.gs-knopf--still { color: var(--vr-text-muted); }

.gs-knopf:hover:not(:disabled) { border-color: var(--vr-burgund); }
.gs-knopf--haupt:hover:not(:disabled) { background: var(--vr-burgund-tief); }
.gs-knopf:disabled { opacity: 0.6; cursor: default; }

.gs-knopf:focus-visible,
.gs-link:focus-visible,
.gs-wer__link:focus-visible {
  outline: 2px solid var(--vr-burgund);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  /* Auf dem Telefon untereinander statt nebeneinander, und die Beschriftung
     der Datenliste ueber den Wert statt daneben: sonst bleiben fuer den
     Wert dreissig Pixel. */
  .gs-daten { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .gs-daten dt { margin-top: 8px; font-size: 0.8rem; }
  .gs-knopf { width: 100%; }
  .gs-qr { align-self: center; }
}


/* Die Zahl der offenen Anfragen am Reiter. Glut, weil sie zum Handeln
   auffordert, und rund, damit sie sich vom Text der Reiterleiste absetzt.
   Sie erscheint nur, wenn wirklich etwas offen ist. */
.gs-melder {
  display: inline-block;
  min-width: 20px;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--vr-glut);
  color: var(--vr-text-hell);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}