/* Free quote tool (/offerte-schilderwerk). Everything else on the page is
   factuur-tool.css; this file only adds what a quote line needs that an
   invoice line does not: a unit per line and quick-add buttons. Built on the
   --ftc-* tokens from factuur-tool.css so both tools stay one family. */

/* ── Quick-add buttons ─────────────────────────────────────── */
.offerte-tool-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.offerte-tool-presets-label {
  font-size: 0.8125rem;
  color: var(--ftc-ink-500);
  margin-right: 0.25rem;
}
.offerte-tool-preset {
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--ftc-blue-100);
  border-radius: 999px;
  background: var(--ftc-blue-50);
  color: var(--ftc-blue-700);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
.offerte-tool-preset:hover {
  border-color: var(--ftc-blue-400);
}

/* ── Lines: one card per line, description on top, numbers below ──
   Six controls do not fit one row in the half-width form pane, and the
   invoice tool's grid hides columns to cope. A card per line keeps every
   field visible at every width. */
.offerte-tool-lines {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}
.offerte-tool-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 2rem;
  grid-template-areas:
    "desc desc desc desc remove"
    "qty unit price vat .";
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--ftc-ink-100);
  border-radius: 0.625rem;
  background: var(--ftc-ink-50);
}
.offerte-tool-line-desc {
  grid-area: desc;
}
.offerte-tool-line .factuur-tool-line-remove {
  grid-area: remove;
  align-self: center;
}
.offerte-tool-line-field:nth-of-type(2) {
  grid-area: qty;
}
.offerte-tool-line-field:nth-of-type(3) {
  grid-area: unit;
}
.offerte-tool-line-field:nth-of-type(4) {
  grid-area: price;
}
.offerte-tool-line-field:nth-of-type(5) {
  grid-area: vat;
}
.offerte-tool-line-field {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}
.offerte-tool-line-field > span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ftc-ink-400);
}
.offerte-tool-line input,
.offerte-tool-line select {
  width: 100%;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--ftc-ink-200);
  border-radius: 0.5rem;
  background: #ffffff;
  font-family: inherit;
  font-size: 0.875rem;
  box-sizing: border-box;
}
.offerte-tool-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.offerte-tool-preview-notes {
  margin: 4cqi 0 0;
  font-size: 2.6cqi;
  color: var(--ftc-ink-500);
  white-space: pre-line;
}

.offerte-tool .factuur-tool-conversion .landing-btn {
  margin-top: 0.75rem;
}

@media (max-width: 640px) {
  .offerte-tool-line {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 2rem;
    grid-template-areas:
      "desc desc remove"
      "qty unit unit"
      "price vat vat";
  }
}