/* =========================================================
   Button component — Klar
   --------------------------------------------------------
   Variants: --primary --secondary --outline --ghost --danger
             --text --link
   Sizes:    --sm --lg
   Modifiers: --block --icon --plain

   Metrics from the effective Klar cascade: 48 px minimum height,
   14 px radius, 13 px / 750 weight, flat accent for the primary
   action — no gradient, no coloured drop shadow. Touch targets are
   at least 44 x 44 CSS pixels throughout (UIUX.md).
   ========================================================= */

.btn {
  --btn-bg: var(--surface);
  --btn-color: var(--ink);
  --btn-border: var(--line);
  --btn-shadow: none;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 16px;
  border-radius: 14px;
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 750;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast),
    filter var(--t-fast);
}

.btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Die Symbolgröße im Knopf kommt aus der ``svg``-Grundregel (22 px),
   wie in der Referenz. Eine ``font-size`` hier hätte auf einem ``<svg>``
   keine Wirkung und würde nur so aussehen, als hätte sie eine. */

/* Primary — the one main action of a view. */
.btn--primary {
  --btn-bg: var(--accent);
  --btn-color: #fff;
  --btn-border: transparent;
}
.btn--primary:hover {
  filter: brightness(1.07);
}

/* Secondary — a white surface with the hairline border. */
.btn--secondary,
.btn--outline {
  --btn-bg: var(--surface);
  --btn-color: var(--ink);
  --btn-border: var(--line);
}
.btn--secondary:hover,
.btn--outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--secondary.is-selected,
.btn--secondary.is-active,
.btn--outline.is-selected,
.btn--outline.is-active {
  border-color: var(--accent);
  background: var(--tint);
  color: var(--accent);
}

/* Ghost / text — no surface of its own. */
.btn--ghost {
  --btn-bg: transparent;
  --btn-color: var(--ink);
  --btn-border: transparent;
}
.btn--ghost:hover {
  background: var(--overlay-soft);
}

/* Die Referenz gibt dem Textknopf dieselben 48 px wie jedem anderen —
   nur die Polsterung ist kleiner, weil er keine Fläche hat. */
.btn--text {
  --btn-bg: transparent;
  --btn-color: var(--accent);
  --btn-border: transparent;
  padding: 10px 8px;
}
.btn--text:hover {
  background: var(--tint);
}

/* Destructive. Red is reserved for this and for errors. */
.btn--danger {
  --btn-bg: transparent;
  --btn-color: var(--danger);
  --btn-border: transparent;
}
.btn--danger:hover {
  background: var(--danger-soft-bg);
}

.btn--danger-solid {
  --btn-bg: var(--danger);
  --btn-color: #fff;
  --btn-border: transparent;
}
.btn--danger-solid:hover {
  filter: brightness(1.07);
}

/* Inline link button */
.btn--link {
  --btn-bg: transparent;
  --btn-color: var(--accent);
  --btn-border: transparent;
  min-height: auto;
  padding: 0;
  font-weight: 700;
}
.btn--link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sizes.
   Auch die kleine Größe bleibt bei 44 px Höhe: „Kleine visuelle Icons dürfen
   große unsichtbare Touchflächen besitzen" (UIUX.md) — die Schrift wird
   kleiner, die Fläche nicht. */
.btn--sm {
  min-height: 44px;
  padding: 8px 12px;
  font-size: var(--text-sm);
  border-radius: 10px;
}
.btn--lg {
  min-height: 50px;
  font-size: var(--text-md);
  border-radius: 15px;
  padding: 14px 18px;
}

/* Modifiers */
.btn--block {
  width: 100%;
}

.btn--icon {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border-radius: 14px;
  gap: 0;
}
.btn--icon.btn--sm {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}
.btn--icon.btn--lg {
  width: 52px;
  min-width: 52px;
  min-height: 52px;
}

/* A small visible icon may carry a large invisible touch target. */
.btn--plain {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-color: var(--muted);
}
.btn--plain:hover {
  background: var(--tint);
  color: var(--accent);
}

.btn-group {
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Two actions side by side: the leading one carries the wording, the
   trailing one is short ("Scannen").

   The reference splits the pair in two equal halves. Measured against the
   real typeface, that split holds only at 390 px: "Lebensmittel suchen"
   (12 px, 750) is 124 px wide, and an equal half at 390 px leaves exactly
   124 px beside the icon -- zero to spare. At 375 px it wraps, at 361 px
   it wraps, and at 320 px it cannot fit even without the icon. The trailing
   column therefore takes only what its label needs and the leading one gets
   the rest: 134 px of text room at 320 px, enough for every leading label
   the pages use. A documented deviation from the reference (UIUX.md), for
   other display sizes. */
.action-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.action-pair > .btn {
  font-size: var(--text-sm);
  padding: 12px 8px;
  min-width: 0;
}

.action-pair > .btn:last-child {
  padding-left: 14px;
  padding-right: 14px;
}

/* Two labels of equal length and weight ("Auswahl übernehmen" beside
   "Behälter entfernen"): neither may shrink to its content, so the pair
   stacks as soon as a column would fall below what such a label needs. */
.action-pair--even {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.action-pair--even > .btn:last-child {
  padding-left: 8px;
  padding-right: 8px;
}