@layer components {
  .invoices {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .invoices-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  @media (width <= 600px) {
    .invoices-header {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--space-sm);
    }
  }

  .invoices-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .invoices-filters input,
  .invoices-filters select {
    background: var(--color-sand);
    border: 1px solid var(--color-bark-15);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    padding: var(--space-sm) var(--space-md);
  }

  .invoices-filters input:focus,
  .invoices-filters select:focus {
    border-color: var(--color-bark);
    outline: none;
  }

  .invoices-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .invoices-empty {
    color: var(--color-bark-60);
    font-style: italic;
  }

  .invoice-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md) var(--space-lg);
  }

  .invoice-card.is-paid {
    background: var(--color-success-bg);
  }

  .invoice-header {
    align-items: baseline;
    display: flex;
    gap: var(--space-md);
    justify-content: space-between;
  }

  @media (width <= 600px) {
    .invoice-header {
      flex-direction: column;
      gap: var(--space-xs);
    }
  }

  .invoice-number {
    font-weight: 600;
  }

  .invoice-client {
    color: var(--color-bark);
  }

  .invoice-company {
    color: var(--color-bark-60);
    font-size: 0.85rem;
  }

  .invoice-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  .invoice-date {
    color: var(--color-bark-60);
    font-size: 0.85rem;
  }

  .invoice-actions {
    border-block-start: 1px solid var(--color-bark-15);
    display: flex;
    gap: var(--space-sm);
    margin-block-start: var(--space-md);
    padding-block-start: var(--space-md);
  }

  .invoices-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-block-end: var(--space-lg);
  }

  .invoices-form-title {
    font-size: 1.25rem;
    margin: 0;
  }

  .invoices-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .invoices-form-row label {
    color: var(--color-bark);
    font-size: 0.85rem;
    font-weight: 600;
  }

  .invoices-form-row input,
  .invoices-form-row select,
  .invoices-form-row textarea {
    background: var(--color-sand);
    border: 1px solid var(--color-bark-15);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    padding: var(--space-sm) var(--space-md);
  }

  .invoices-form-row input:focus,
  .invoices-form-row select:focus,
  .invoices-form-row textarea:focus {
    border-color: var(--color-bark);
    outline: none;
  }

  .invoices-form-row-checkbox label {
    align-items: center;
    display: inline-flex;
    gap: var(--space-sm);
  }

  .invoices-form-row-checkbox input[type="checkbox"] {
    block-size: 1rem;
    inline-size: 1rem;
    margin: 0;
  }

  .invoices-form-client-group {
    display: contents;
  }

  .invoices-form-client {
    position: relative;
  }

  .invoices-form-client input[type="search"] {
    background: var(--color-sand);
    border: 1px solid var(--color-bark-15);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    inline-size: 100%;
    padding: var(--space-sm) var(--space-md);
  }

  .invoices-form-client input[type="search"]:focus {
    border-color: var(--color-bark);
    outline: none;
  }

  #invoice_client_suggestions {
    background: var(--color-white);
    border: 1px solid var(--color-bark-15);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    display: block;
    inset-block-start: calc(100% + var(--space-xs));
    inset-inline: 0;
    max-block-size: 16rem;
    overflow-y: auto;
    padding: var(--space-xs);
    position: absolute;
    z-index: 10;
  }

  #invoice_client_suggestions[hidden],
  #invoice_client_suggestions:empty {
    display: none;
  }

  .invoices-suggestion {
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: inherit;
    cursor: pointer;
    display: block;
    font-size: 1rem;
    inline-size: 100%;
    padding: var(--space-sm) var(--space-md);
    text-align: start;
  }

  .invoices-suggestion:hover,
  .invoices-suggestion.is-active {
    background: var(--color-sand);
  }

  .invoices-form-hint {
    color: var(--color-bark-60);
    font-size: 0.85rem;
    margin: 0;
  }

  .invoices-form-company {
    align-items: center;
    display: flex;
    gap: var(--space-sm);
  }

  .invoices-form-company select {
    background: var(--color-sand);
    border: 1px solid var(--color-bark-15);
    border-radius: var(--radius-sm);
    flex: 1;
    font-family: inherit;
    font-size: 1rem;
    padding: var(--space-sm) var(--space-md);
  }

  .invoices-form-company select:focus {
    border-color: var(--color-bark);
    outline: none;
  }

  .invoices-form-add-company {
    color: var(--color-walnut);
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
  }

  .invoices-form-add-company:hover {
    text-decoration: underline;
  }

  .invoices-form-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    margin-block-start: var(--space-lg);
  }

  .invoices-form-cancel {
    display: contents;
  }

  .invoices-form-errors {
    background: var(--color-error-bg);
    border-left: 4px solid var(--color-error-text);
    border-radius: var(--radius-sm);
    color: var(--color-error-text);
    padding: var(--space-md) var(--space-lg);
  }

  .invoices-form-errors ul {
    margin: 0;
    padding-inline-start: var(--space-lg);
  }

  .invoice-dialog {
    background: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--color-bark);
    inline-size: min(640px, calc(100% - var(--space-2xl)));
    max-block-size: 90dvh;
    overflow: auto;
    padding: var(--space-2xl);
  }

  @media (width <= 600px) {
    .invoice-dialog {
      inline-size: calc(100% - var(--space-lg));
      padding: var(--space-lg);
    }
  }

  .invoice-dialog::backdrop {
    background: rgb(0 0 0 / 0.45);
  }

  .invoice-dialog turbo-frame {
    display: block;
  }

  .invoice-dialog turbo-frame:empty {
    display: none;
  }

  /* Paid invoices read green — live via :has on the form's paid checkbox. */
  .invoice-dialog:has(#invoice_paid:checked) {
    background: var(--color-success-bg);
  }
}