/* Factuur maken (28 sep 2026, Summa 4.0 blok 3). Zelfde kaarten als de rest (summa-card), één kolom;
 * op de computer staan de regels als tabel, op de telefoon onder elkaar met 44px klikvlakken. */

#composeView .compose-form { display: grid; gap: 14px; max-width: 820px; }
#composeView .compose-card, #composeView .compose-total { display: grid; gap: 4px; }
#composeView .compose-card[hidden] { display: none; }
#composeView .summa-card-title { margin: 0 0 8px; }
#composeView label { margin-bottom: 8px; }
#composeView label[hidden] { display: none; }
#composeView input, #composeView select, #composeView textarea { min-height: 44px; font-size: 15px; }
#composeView textarea { min-height: 64px; }
.compose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 14px; }
.compose-hint { margin: 2px 0 0; color: var(--muted); font: 400 13px/1.45 Figtree, sans-serif; }
.compose-hint:empty { display: none; }

.compose-lines { display: grid; gap: 10px; }
.compose-line {
  display: grid; grid-template-columns: minmax(0, 1fr) 84px 96px 112px 112px 44px; gap: 10px; align-items: end;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.compose-line label { margin: 0; }
.compose-line-amount { align-self: end; min-height: 44px; display: flex; align-items: center; justify-content: flex-end;
  color: var(--ink); font: 600 15px/1.2 Figtree, sans-serif; font-variant-numeric: tabular-nums; }
#composeView .compose-line-remove { width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; }
#composeView .compose-add-line { justify-self: start; min-height: 44px; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; }

.compose-sums { display: grid; gap: 6px; margin: 0 0 12px; }
.compose-sums div { display: flex; justify-content: space-between; gap: 12px; }
.compose-sums dt { color: var(--muted); font: 400 14px/1.4 Figtree, sans-serif; }
.compose-sums dd { margin: 0; color: var(--ink); font: 500 15px/1.4 Figtree, sans-serif; font-variant-numeric: tabular-nums; }
.compose-sums .is-total { padding-top: 8px; border-top: 1px solid var(--line); }
.compose-sums .is-total dt, .compose-sums .is-total dd { color: var(--ink); font: 700 18px/1.3 Figtree, sans-serif; }
.compose-submit { width: 100%; min-height: 52px; border-radius: var(--radius-pill); font: 600 16px/1.2 Figtree, sans-serif; }
#composeError { margin: 0 0 10px; color: var(--danger); font: 600 14px/1.4 Figtree, sans-serif; }

/* Ingang op het toevoegscherm: "Geen pdf? Maak een factuur in Summa". */
.upload-compose-link { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 12px;
  justify-content: center; border: 1px dashed var(--line); border-radius: 14px; color: var(--ink); }
.upload-compose-link strong { font-weight: 600; }
.client-profile-compose { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 720px) {
  #composeView .compose-form { gap: 12px; padding-bottom: 96px; }
  .compose-line { grid-template-columns: 1fr 1fr 1fr 44px; }
  .compose-line .compose-desc { grid-column: 1 / -1; }
  .compose-line .compose-price { grid-column: 3; }
  .compose-line-amount { grid-column: 1 / 4; justify-content: flex-end; min-height: 28px; }
  #composeView .compose-line-remove { grid-column: 4; grid-row: 2; }
}