/* ==========================================================================
   bw_badges - Namensschilder
   Bildschirmvorschau und Druck. Masse kommen als Inline-Style vom Processor;
   hier stehen nur Struktur, Typografie und das Druckverhalten.
   ========================================================================== */

.bwbadges {
  --bwbadges-gap: 4mm;
  --bwbadges-columns: 0;
}

.bwbadges__heading {
  margin: 0 0 1rem;
}

.bwbadges__empty {
  padding: 1rem;
  border: 1px dashed #b00;
  color: #b00;
}

/* --- Raster ------------------------------------------------------------- */

/*
 * Grid statt Flex: nur so sind alle Schilder garantiert gleich gross.
 * Grid-Elemente fuellen ihre Zelle standardmaessig aus (stretch), und
 * grid-auto-rows: 1fr gleicht alle Zeilen auf die hoechste an.
 */
.bwbadges__grid {
  display: grid;
  gap: var(--bwbadges-gap);
  grid-auto-rows: 1fr;
  align-items: stretch;
  justify-items: stretch;
  max-width: 100%;
}

/* Feste mm-Masse: Spalte so breit wie das Schild. */
.bwbadges__grid--fixed {
  grid-template-columns: repeat(var(--bwbadges-columns, 2), max-content);
  width: max-content;
}

/*
 * Ohne Masse: Der Container schrumpft auf seinen Inhalt, die Spalten teilen
 * sich diesen zu gleichen Teilen. Unter dieser Intrinsic-Sizing-Regel loest
 * 1fr auf die Breite des breitesten Schildes auf - alle Zellen werden also
 * gleich gross und richten sich zugleich nach dem Inhalt.
 */
.bwbadges__grid--auto {
  grid-template-columns: repeat(var(--bwbadges-columns, 2), 1fr);
  width: max-content;
}

.bwbadges__single {
  display: inline-block;
}

/* --- Einzelnes Schild --------------------------------------------------- */

.bwbadge {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15em;
  padding: 3mm 4mm;
  background-color: #fff;
  line-height: 1.2;
  overflow: hidden;
  /*
   * Kein width/height hier: als Grid-Element fuellt das Schild seine Zelle
   * vollstaendig aus und ist damit so gross wie alle anderen. Sind mm-Masse
   * gesetzt, gewinnt ohnehin der Inline-Style aus dem BadgeProcessor.
   */
  max-width: 100%;
}

/* Ohne Masse: dezenter Formhinweis, damit Hoch- und Querformat unterscheidbar
   bleiben, ohne eine harte Groesse zu erzwingen. */
.bwbadge--portrait:not(.bwbadge--fixed) {
  min-width: 45mm;
  min-height: 55mm;
}

.bwbadge--landscape:not(.bwbadge--fixed) {
  min-width: 75mm;
  min-height: 40mm;
}

.bwbadge--align-center {
  text-align: center;
  align-items: center;
}

.bwbadge--align-left {
  text-align: left;
  align-items: flex-start;
}

.bwbadge__lines {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  width: 100%;
}

.bwbadge__line {
  overflow-wrap: break-word;
  hyphens: auto;
}

.bwbadge__line--large {
  font-size: 1.5rem;
}

.bwbadge__line--large-bold {
  font-size: 1.5rem;
  font-weight: 700;
}

.bwbadge__line--normal {
  font-size: 1rem;
}

.bwbadge__line--small {
  font-size: 0.8rem;
}

.bwbadge__photo {
  margin-bottom: 1mm;
}

.bwbadge__photo img {
  display: block;
  width: 18mm;
  height: 18mm;
  object-fit: cover;
  border-radius: 50%;
}

.bwbadge__flag {
  position: absolute;
  top: 1mm;
  right: 1mm;
  font-size: 0.6rem;
  font-weight: 700;
  color: #b00;
}

/* --- Mitgelieferte Rahmen ---------------------------------------------- */

.bwbadge--frame-thin,
.bwbadge--frame-double,
.bwbadge--frame-corners {
  position: relative;
}

/* --- Schnittmarken ----------------------------------------------------- */

.bwbadge--cutmarks {
  outline: 1px dashed #999;
  outline-offset: 2mm;
}

/* --- Werkzeugleiste (nur Bildschirm) ----------------------------------- */

.bwbadges__toolbar {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bwbadges__print {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.bwbadges__count {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ==========================================================================
   Druck
   ========================================================================== */

/* Der Druck-Container liegt am Bildschirm nie sichtbar herum. */
.bwbadges-print-host {
  display: none;
}

@media print {
  @page {
    margin: 10mm;
  }

  /* Hintergruende und Rahmen muessen mitgedruckt werden. */
  .bwbadges,
  .bwbadge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /*
   * Nur die Schilder drucken.
   *
   * badges.js verschiebt die Schilder waehrend des Druckvorgangs in
   * .bwbadges-print-host direkt unter <body>. Damit laesst sich alles andere
   * mit einem einzigen Selektor abschalten - Kopfzeile, Navigation, Fusszeile
   * und jedes andere Inhaltselement der Seite.
   */
  html.bwbadges-printing body > *:not(.bwbadges-print-host) {
    display: none !important;
  }

  html.bwbadges-printing .bwbadges-print-host {
    display: block;
    margin: 0;
    padding: 0;
  }

  /* Fallback, falls kein JavaScript laeuft: wenigstens das Beiwerk im
     Element selbst ausblenden. */
  .bwbadges__toolbar,
  .bwbadges__heading,
  .bwbadges__empty {
    display: none !important;
  }

  .bwbadges__grid {
    gap: 0;
  }

  .bwbadge {
    /* Ein Schild darf nie ueber den Seitenumbruch laufen. */
    page-break-inside: avoid;
    break-inside: avoid;
    margin: 0;
  }

  .bwbadge--cutmarks {
    outline: 1px dashed #666;
    outline-offset: 0;
  }
}