/* Invoice bases, external documents, payments and store settlements. */
sv-finance-workspace {
  display: block;
}

.finance-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 10px;
  border: 1px solid var(--color-warning);
  border-radius: 999px;
  background: var(--color-warning-soft);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.finance-controls,
.finance-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 16px;
  margin: 16px 0;
}

.finance-controls label {
  margin: 0;
}

.finance-actions .button-link.secondary {
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-accent);
}

.finance-table-wrap {
  /* Positioned so visually hidden headings stay inside the scroll area on narrow screens. */
  position: relative;
  overflow-x: auto;
  margin: 8px 0 16px;
}

.finance-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.finance-table th,
.finance-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}

.finance-table thead th {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
}

.finance-table tfoot th,
.finance-table tfoot td {
  border-bottom: 0;
  font-weight: 650;
}

.finance-table .num {
  text-align: right;
  white-space: nowrap;
}

.finance-status {
  display: inline-block;
  margin: 0 6px 4px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  font-size: 12px;
}

.finance-status.finance-unpaid,
.finance-status.finance-partiallypaid {
  background: var(--color-warning-soft);
}

.finance-documents {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.finance-documents {
  /* Without a zero minimum the nested forms widen the grid beyond narrow screens. */
  grid-template-columns: minmax(0, 1fr);
}

.finance-documents > li {
  min-width: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-line);
  overflow-wrap: anywhere;
}

.finance-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 16px;
  align-items: end;
  max-inline-size: 60rem;
  margin-top: 16px;
}

.finance-form > h3,
.finance-form > .finance-subtitle {
  grid-column: 1 / -1;
  margin: 8px 0 0;
}

.finance-form > button {
  justify-self: start;
}

.finance-subtitle {
  color: var(--color-ink);
  font-weight: 600;
}

.finance-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 0;
  list-style: none;
}

.finance-detail:focus {
  outline: none;
}

.finance-detail:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Printing an open invoice basis produces a clean document that can be saved as PDF. */
@media print {
  body {
    background: #fff;
  }

  .topbar,
  .app-sidebar,
  .skip-link,
  footer,
  .no-print,
  .dev-box,
  .account-activation-notice,
  #main-content > .alert {
    display: none !important;
  }

  .app-layout {
    display: block;
  }

  .workspace {
    max-width: none;
    padding: 0;
  }

  sv-finance-workspace:has(.finance-detail) > :not(.finance-detail) {
    display: none;
  }

  .finance-detail {
    border: 0;
    padding: 0;
  }

  .finance-table-wrap {
    overflow: visible;
  }

  .finance-table th,
  .finance-table td {
    padding: 4px 6px;
  }
}

.finance-lines {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.finance-lines legend {
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
}

.finance-lines .checkbox {
  align-items: flex-start;
  font-weight: 400;
}

.finance-form > .hint {
  grid-column: 1 / -1;
  margin: 0;
}

.finance-credit {
  margin-top: 12px;
}

.finance-credit > summary {
  cursor: pointer;
  font-weight: 600;
}

.finance-table td small {
  display: block;
}