/*
  Staples ("Grundbedarf") and the missing-supply card. Built on the shopping list's rows and entry field
  (shopping.css) and the tokens of hauswerk.css, so light and dark follow the theme.
*/

/* --- staples page --------------------------------------------------------------------- */

.hw-staple-preview,
.hw-staple-status,
.hw-supplies-status {
  margin: 0;
  padding: 2px 4px;
  font-size: 13.5px;
  color: var(--bsft-color-muted);
}

.hw-staple-preview {
  font-family: var(--hw-font-mono);
  font-size: 12.5px;
}

.hw-staple-status {
  color: var(--bsft-color-success);
  font-weight: 700;
}

.hw-staples-empty .hw-hint {
  margin: 4px 0 0;
}

.hw-staple .hw-shop-item-main:disabled {
  cursor: default;
}

.hw-staple-when {
  font-size: 13px;
  color: var(--bsft-color-muted);
  margin-top: 2px;
}

.hw-staple-missing {
  flex: none;
}

.hw-chip.is-ok {
  flex: none;
  background: var(--bsft-color-success-surface);
  color: var(--bsft-color-success);
  border-color: transparent;
}

.hw-staple-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hw-staple-editor .hw-sheet-field input {
  border: 1px solid var(--bsft-color-border);
  border-radius: 12px;
  background: var(--bsft-color-surface);
  padding: 0 10px;
  font: inherit;
  /* 16px keeps mobile browsers from zooming into the field */
  font-size: 16px;
}

.hw-staple-editor .hw-shop-qty-input {
  font-family: var(--hw-font-mono);
}

.hw-staple-clears {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- missing-supply card ---------------------------------------------------------------- */

.hw-supplies {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hw-supplies .hw-pills {
  flex-wrap: wrap;
}

.hw-supplies .hw-pill[aria-pressed="true"] {
  text-decoration: line-through;
}

.hw-supplies-status:empty {
  display: none;
}