/*
 * Invoices
 *
 * Feature-level classes for invoice and purchase-invoice ViewComponents.
 */

.purchase-invoice-document {
  max-width: 56rem;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.purchase-invoice-document__header {
  padding: 1.5rem 2rem;
}

.purchase-invoice-document__logo {
  width: 12rem;
}

.purchase-invoice-document__body {
  padding: 2rem;
}

.purchase-invoice-document__parties {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-block-end: 2rem;
}

@media (min-width: 768px) {
  .purchase-invoice-document__parties {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.purchase-invoice-document__section-title {
  margin-block-end: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ink);
}

.purchase-invoice-document__address {
  display: grid;
  gap: 0.25rem;
  color: var(--color-ink-light);
}

.purchase-invoice-document__address-name {
  font-weight: 500;
  color: var(--color-ink);
}

.purchase-invoice-document__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-block-end: 2rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

@media (min-width: 768px) {
  .purchase-invoice-document__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.purchase-invoice-document__meta-label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-ink-lighter);
}

.purchase-invoice-document__meta-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ink);
}

.purchase-invoice-document__amount {
  margin-block-start: 0.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-info-strong);
}

.invoice-period-select,
.invoice-period-select__field,
.invoice-period-select__date-field {
  display: flex;
  flex-direction: column;
}

.invoice-period-select__custom-range {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-start: 1rem;
}

@media (min-width: 640px) {
  .invoice-period-select__custom-range {
    flex-direction: row;
    gap: 1.5rem;
  }

  .invoice-period-select__date-field {
    width: 50%;
  }
}

.invoice-stats-chart {
  width: 100%;
  max-height: 15rem;
}

.invoice-payment-form {
  margin-block-start: 1.5rem;
}

.invoice-payments-list {
  margin-block-start: 2rem;
}

.item-upload-template-copy {
  margin-block-start: 1.5rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.purchase-form-panel {
  margin-block-start: 1.5rem;
}

.purchase-form-panel__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 500;
}

.purchase-form-panel__body,
.purchase-form-provider,
.purchase-results,
.purchase-attachment {
  margin-block-start: 2rem;
}

.purchase-search-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border: 0;
  margin: 0;
  padding: 0;
}

.purchase-search-form__field {
  inline-size: 100%;
}

.purchase-search-form__field-control {
  margin-block-start: 0.25rem;
}

.purchase-search-form__submit {
  inline-size: auto;
  align-self: end;
}

.purchase-results__empty {
  margin-block-start: 1.5rem;
}

.purchase-empty-actions {
  margin-block-start: 1rem;
}


.purchase-empty-actions__link {
  padding-block: 0.375rem;
  padding-inline: 0.5rem;
  border-radius: var(--radius-md);
  color: rgb(var(--palette-blue-800));
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.purchase-empty-actions__link:hover,
.purchase-empty-actions__link:focus {
  outline: none;
  background-color: rgb(var(--palette-blue-100));
}

.purchase-summary-card {
  padding-block: 1.25rem;
  padding-inline: 1rem;
}

.purchase-summary-card + .purchase-summary-card {
  border-block-start: 1px solid var(--color-border);
}

.purchase-summary-card__label {
  margin: 0;
  color: rgb(var(--palette-blue-700));
  font-size: 1rem;
  font-weight: 400;
}


.purchase-summary-card__value-inner {
  display: flex;
  align-items: baseline;
  font-size: 1.25rem;
  font-weight: 600;
}

.purchase-detail-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-start: 2rem;
}

.purchase-detail-stack__title {
  margin: 0;
  font-weight: 700;
}

.purchase-detail-stack__body {
  margin: 0;
}

.purchase-line {
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--color-border);
}

.purchase-line__inner {
  display: flex;
  align-items: center;
}

.purchase-line__fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  inline-size: 100%;
}

.purchase-line__search {
  position: relative;
  inline-size: 100%;
}

.purchase-line__search-results {
  position: absolute;
  z-index: 50;
  inline-size: 80%;
  margin-block-start: 0.25rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.purchase-line__search-results-body {
  padding: 0.5rem;
}

.purchase-line__remove-wrap {
  display: flex;
  justify-content: flex-end;
  margin-inline-start: 0.5rem;
}


.purchase-table-actions {
  min-inline-size: 3rem;
}

@media (min-width: 768px) {
  .invoice-stats-chart {
    width: 50%;
  }

  .purchase-search-form {
    flex-direction: row;
  }

  .purchase-search-form__field {
    flex: 1 1 0;
  }

  .purchase-summary--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .purchase-summary--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .purchase-summary-card + .purchase-summary-card {
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border);
  }
}

@media (min-width: 1024px) {
  .purchase-line__fields {
    flex-direction: row;
  }
}


.invoice-advanced-fields__row,
.invoice-discount-row,
.invoice-line__fields,
.invoice-line__amounts,
.invoice-line__discount {
  display: flex;
  flex-direction: column;
}

.invoice-advanced-fields__field,
.invoice-discount-row__field,
.invoice-line__field {
  min-inline-size: 0;
}

.invoice-advanced-fields__hint {
  margin-block-start: 0.5rem;
  color: var(--color-ink);
  font-size: 0.875rem;
}

.invoice-discount-row {
  gap: 0.5rem;
  margin-block-start: 1.5rem;
}

.invoice-discount-row__label {
  margin-block-end: 0.5rem;
}

.invoice-discount-row__type {
  inline-size: 100%;
  margin-block-start: 1.5rem;
}

.invoice-discount-row__value {
  inline-size: 9.5rem;
}

.invoice-lines-panel {
  margin-block: 2rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: 0 1px 2px oklch(var(--lch-black) / 6%);
}

.invoice-lines-panel__header {
  padding: 1rem 1.5rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

.invoice-lines-panel__body {
  padding-block: 1.5rem;
  padding-inline: 1rem;
}

.invoice-line {
  margin-block-end: 1rem;
  padding-block: 1.5rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.invoice-line__inner {
  display: flex;
  align-items: center;
}

.invoice-line__fields {
  gap: 0.5rem;
  inline-size: 100%;
}

.invoice-line__search {
  position: relative;
  inline-size: 100%;
}

.invoice-line__search-results {
  position: absolute;
  z-index: 50;
  inline-size: 80%;
  margin-block-start: 0.25rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.invoice-line__search-results-body {
  padding: 0.75rem;
}

.invoice-line__amounts {
  gap: 0.5rem;
}

.invoice-line__tax {
  margin-block-start: 1.5rem;
}

.invoice-line__remove-wrap {
  flex-shrink: 0;
  margin-inline: auto;
  margin-block-start: 0.5rem;
}

.invoice-line__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-lg);
  color: var(--color-ink-lighter);
  transition:
    color 150ms ease,
    background-color 150ms ease;
}

.invoice-line__remove:hover,
.invoice-line__remove:focus {
  background-color: rgb(var(--palette-red-50));
  color: var(--color-danger-strong);
}

.invoice-line__remove-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.invoice-line__discount {
  gap: 0.5rem;
  margin-block-start: 0.5rem;
}

.invoice-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.invoice-actions__group--offset {
  margin-inline-start: 0.75rem;
}

.invoice-actions__split-button {
  position: relative;
}

.invoice-actions__split-button--main {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.invoice-actions__split-button--toggle {
  margin-inline-start: -1px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  padding-inline: 0.5rem;
}

.invoice-actions__toggle-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.invoice-actions__menu {
  position: absolute;
  z-index: 20;
  inset-inline-end: 0;
  margin-block-start: 0.75rem;
  inline-size: 14rem;
  transform-origin: top right;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow:
    var(--shadow-lg),
    var(--shadow-ring-subtle);
}

.invoice-actions__menu:focus {
  outline: none;
}

.invoice-actions__menu-body {
  padding-block: 0.25rem;
}

.invoice-stats {
  margin-block-start: 2rem;
}

.invoice-payment-summary {
  margin-block-start: 1rem;
  font-weight: 700;
}

.invoice-payment-summary-row {
  font-weight: 700;
  text-align: right;
}

.invoice-help-stack--large {
  gap: 1.5rem;
}

.invoice-help-section {
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--color-border);
}

.invoice-help-title {
  margin: 0 0 0.5rem;
  color: var(--color-ink);
  font-weight: 600;
}

.invoice-help-title--large {
  margin-block-end: 0.75rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.invoice-help-copy {
  color: var(--color-ink-light);
  font-size: 0.875rem;
}

.invoice-help-list {
  margin-block: 0;
  margin-inline-start: 0.5rem;
  padding-inline-start: 1rem;
  list-style: disc;
}

.invoice-help-list > li + li {
  margin-block-start: 0.25rem;
}

.invoice-events-panel {
  overflow: hidden;
  box-shadow:
    var(--shadow-ring-subtle),
    var(--shadow-panel);
}

.invoice-events-table {
  min-inline-size: 100%;
  border-collapse: collapse;
}

.invoice-events-table thead {
  background-color: var(--color-surface-muted);
}

.invoice-events-table tbody {
  background-color: var(--color-surface);
}

.invoice-events-table tbody tr + tr,
.invoice-events-table thead tr {
  border-block-start: 1px solid var(--color-border);
}

.invoice-events-table__header,
.invoice-events-table__cell {
  padding-block: 1rem;
  padding-inline: 0.75rem;
  text-align: left;
  font-size: 0.875rem;
}

.invoice-events-table__header {
  color: var(--color-ink);
  font-weight: 600;
}

.invoice-events-table__cell {
  color: var(--color-ink-lighter);
}

.invoice-events-table__cell--strong {
  color: var(--color-ink);
  white-space: nowrap;
}

.invoice-events-empty {
  padding-block: 3rem;
  text-align: center;
}

.invoice-events-empty__text {
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
}

@media (min-width: 640px) {
  .invoice-discount-row {
    flex-direction: row;
    align-items: center;
  }

  .invoice-discount-row__type {
    inline-size: 12rem;
    margin-block-start: 0;
    margin-inline-start: 0.5rem;
  }

  .invoice-advanced-fields__row,
  .invoice-line__discount {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  .invoice-advanced-fields__field {
    inline-size: 50%;
  }

  .invoice-line__amounts {
    flex-direction: row;
    gap: 0.5rem;
  }

  .invoice-line__remove-wrap {
    margin-inline: 0;
    margin-block-start: 0;
  }
}

@media (min-width: 768px) {
  .invoice-stats__layout {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .invoice-line__fields {
    flex-direction: row;
  }

  .invoice-line__quantity,
  .invoice-line__price {
    inline-size: 7rem;
  }

  .invoice-line__tax {
    inline-size: 8rem;
  }
}