@layer components {
  /* ── Invoice index toolbar + grid ─────────────────────────────────── */

  .invoice-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-inline: var(--tint-inset);
    margin-block-end: var(--spacing-sm);

    & + .invoice-grid {
      margin-block-start: 0;
    }

    el-menu {
      max-height: calc(var(--line-height) * 12);
      overflow-y: auto;
    }

    .filter-trigger,
    el-dropdown > button {
      line-height: calc(var(--font-size) + var(--baseline) * 2);
      min-height: calc(var(--font-size) + var(--baseline) * 2);
      padding-inline: var(--spacing-sm);
      border-radius: var(--radius-default);

      &::before {
        inset: 0;
      }
    }
  }

  .invoice-status-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .invoice-status {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--baseline) * 2.5);
    padding-inline: var(--spacing-sm);
    border-radius: calc(var(--baseline) * 1.25);
    background: var(--gray-100);
    color: var(--gray-800);
    font-size: var(--font-size-sm);
    line-height: 1;

    &.invoice-status--sent,
    &.invoice-status--paid {
      background: var(--theme-100);
      color: var(--theme-900);
    }

    &.invoice-status--overdue {
      background: var(--red-100);
      color: var(--red-900);
    }
  }

  dialog[id^="status_dialog_invoice_"] el-dialog-panel {
    width: min(100%, calc(var(--baseline) * 48));

    & > form > .content {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: var(--spacing-sm);
      padding: var(--spacing-md);
    }

    select {
      width: 100%;
      min-height: calc(var(--font-size) + var(--baseline) * 2);
      padding-inline: var(--spacing-sm);
      border: 1px solid var(--control-border-color);
      border-radius: var(--radius-default);
      background: var(--surface-color);
      color: var(--text-color);
      font: inherit;
    }
  }

  .invoice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--baseline) * 32), 1fr));
    gap: var(--spacing-sm);
    margin: var(--tint-inset);

    & > article {
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      background-color: var(--surface-color);
      box-shadow: 0 0 0 1px var(--border-tint-1);
      border-radius: var(--radius-default);
      line-height: calc(var(--font-size) + var(--baseline));

      &:has(> a:hover),
      &:has(> a:focus-visible),
      &:has(> a:active) {
        box-shadow: 0 0 0 2px var(--border-hover-color);
      }

      & > a {
        --link-color: var(--text-color);

        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        flex: 1;
        min-width: 0;
        padding: var(--spacing-md);
        color: var(--text-color);

        &::before {
          content: none;
        }

        &:focus-visible {
          outline-offset: calc(var(--baseline) * -0.5);
        }
      }

      .number {
        max-width: calc(100% - var(--spacing-xl));
        color: var(--muted-color);
      }

      .company {
        font-weight: 600;
        overflow-wrap: anywhere;
      }

      .total {
        --font-size: calc(var(--baseline) * 3);

        font-size: var(--font-size);
        line-height: calc(var(--font-size) + var(--baseline));
        font-variant-numeric: tabular-nums;
      }

      .meta {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--spacing-sm);
        width: 100%;
        color: var(--muted-color);

        .date,
        .due {
          min-width: 0;
        }

        .due {
          text-align: end;
          white-space: nowrap;
        }
      }

      & > .invoice-actions {
        position: absolute;
        z-index: 2;
        inset-block-start: var(--spacing-sm);
        inset-inline-end: var(--spacing-sm);
      }

      &.template > .invoice-actions {
        inset-block-start: calc(var(--baseline) * 1.5);
      }

      .invoice-actions el-dropdown > button {
        padding: var(--spacing-sm);
        border-radius: var(--radius-default);
        min-height: calc(var(--font-size) + var(--baseline));

        &::before {
          inset: 0;
        }
      }
    }
  }

  .invoice-document {
    --border-color: var(--control-border-color);
    --border-shadow: 0 0 0 1px var(--border-color);
    --field-width: 36;
    --row-height: calc(var(--baseline) * 4);
    --emphasis-header-bg: var(--border-color);

    .invoice-kind {
      --font-size: calc(var(--baseline) * 4);
      --text-color: var(--border-color);
    }

    .row {
      width: 100%;
      margin-block-end: var(--spacing-xl);

      &:not(.full-width) {
        display: flex;
        justify-content: space-between;
      }

      &:last-child {
        margin-block-end: 0;
      }
    }

    /* Shared column chrome used by both edit form and show view */
    .row:not(.full-width) > div {
      width: calc(var(--baseline) * var(--field-width));

      &.invoice-meta-column {
        --field-width: 40;
      }

      .invoice-section-heading {
        --text-color: var(--text-on-emphasis-color);

        display: flex;
        align-items: center;
        height: var(--row-height);
        padding-inline: var(--spacing-sm);
        background-color: var(--emphasis-header-bg);
        color: var(--text-color);
        line-height: var(--row-height);

        & > .link {
          --link-color: var(--text-on-emphasis-color);

          margin-inline-start: auto;
          margin-inline-end: var(--spacing-sm);
          font-size: var(--font-size-sm);
          line-height: calc(var(--font-size-sm) + var(--baseline));
          min-height: calc(var(--font-size-sm) + var(--baseline));
        }
      }

      .meta-label {
        color: var(--muted-color);
      }
    }

    form {
      input:not(input[type="submit"]) {
        position: relative;
        width: 100%;
        border: 0;
        border-radius: 0;
        background: transparent;

        &:focus-visible {
          z-index: 30;
          outline: 2px solid var(--text-color);
          outline-offset: 0;
        }

        &[aria-invalid="true"] {
          z-index: 5;
          background-color: var(--error-background);
        }

        &[aria-invalid="true"]:focus-visible {
          z-index: 30;
          outline-color: var(--error-focus-color);
        }
      }

      .invoice-details,
      .invoice-address,
      .invoice-dates {
        & input:not(input[type="submit"]) {
          height: var(--invoice-input-height);
          padding-inline: 0;
          outline-offset: 2px;
        }
      }

      .invoice-layout {
        --invoice-input-height: calc(var(--baseline) * 3);

        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--row-height) 0;

        & > section:not([class]) {
          display: grid;
          grid-column: 1 / -1;
          grid-template-columns: subgrid;
        }
      }

      .invoice-details,
      .invoice-address {
        display: grid;
        grid-column: 1;

        & > header {
          --text-color: var(--text-on-emphasis-color);

          display: flex;
          align-items: center;
          height: var(--row-height);
          padding-inline: var(--spacing-sm);
          border-radius: var(--radius-default);
          background-color: var(--emphasis-header-bg);
          color: var(--text-color);

          & > .link {
            --link-color: var(--text-on-emphasis-color);

            margin-inline-start: auto;
            margin-inline-end: var(--spacing-sm);
            font-size: var(--font-size-sm);
          }
        }
      }

      .invoice-address > div {
        display: grid;
        grid-template-columns: 4fr 3fr;
        gap: var(--spacing-sm);
      }

      .invoice-kind {
        grid-column: 3;
        text-align: end;
      }

      .invoice-dates {
        display: grid;
        grid-column: 3;
        align-self: start;

        & > div {
          display: grid;
          grid-template-columns: 3fr 4fr;

          & > :first-child {
            color: var(--muted-color);
          }

          & > label,
          & > p {
            display: flex;
            align-items: center;
            height: var(--invoice-input-height);
          }
        }
      }

      .invoice-line-items {
        --line-items-min-rows: 8;
        --line-grid: 4fr 1fr 1fr 2fr;

        grid-column: 1 / -1;
        box-shadow: var(--border-shadow);
        border-radius: var(--radius-default);

        & > header,
        .line-item {
          display: grid;
          grid-template-columns: var(--line-grid);
        }

        & > header {
          min-height: var(--row-height);
          background-color: var(--emphasis-header-bg);

          & > p {
            --text-color: var(--text-on-emphasis-color);

            display: flex;
            align-items: center;
            padding-inline: var(--spacing-sm);
          }
        }

        & > ol {
          min-height: calc(var(--row-height) * var(--line-items-min-rows));
          margin: 0;
          padding: 0;
          background-color: var(--surface-color);
          background-image: linear-gradient(
            to right,
            transparent 75%,
            var(--border-color) 75% calc(75% + var(--line)),
            transparent 0
          );
          list-style: none;

          [data-nested-form-target="target"] {
            display: none;
          }
        }

        .line-item {
          &[hidden] {
            display: none;
          }

          & > div:last-child {
            display: flex;
            min-width: 0;
            border-inline-start: var(--line) solid var(--border-color);
          }
        }

        .line-item > div:last-child,
        & > footer dd > div {
          & > .money-field {
            flex: 1 1 auto;
          }

          & > .link {
            --action-background: var(--theme-100);
            --action-hover-background: var(--theme-200);

            flex: 0 0 var(--row-height);
            justify-content: center;
            height: var(--row-height);
            border: var(--line) solid var(--surface-color);
            border-radius: 0;
            background: var(--action-background);

            &::before {
              content: none;
            }

            &:hover,
            &:active {
              background: var(--action-hover-background);
            }

            &[data-action="nested-form#remove"] {
              --link-color: var(--danger-color);
              --action-background: var(--red-100);
              --action-hover-background: var(--red-200);

              &:hover,
              &:focus-visible {
                z-index: 10;
                color: var(--text-color);
              }
            }
          }
        }

        & > footer {
          display: grid;
          grid-template-columns: 8fr 1fr 7fr;
          border-block-start: var(--line) solid var(--border-color);
          background: var(--surface-color);

          & > input {
            height: 100%;
            text-align: center;
            font-style: italic;
          }

          & > dl {
            display: grid;
            grid-column: 3;
            grid-template-rows: repeat(4, var(--row-height));
            margin: 0;
            border-inline-start: var(--line) solid var(--border-color);

            & > div {
              display: grid;
              grid-template-columns: 3fr 4fr;

              dt {
                display: flex;
                align-items: center;
                padding-inline: var(--spacing-sm);
              }

              dd {
                min-width: 0;
                margin: 0;

                & > div {
                  display: flex;
                }
              }

              &:last-child label,
              &:last-child input {
                font-weight: bold;
              }
            }
          }
        }

        & > nav {
          display: flex;
          gap: var(--spacing-md);
          height: var(--row-height);
          padding-inline: var(--spacing-sm);
          border-block-start: var(--line) solid var(--border-color);

          & > .link {
            align-self: stretch;
            gap: var(--spacing-xs);
            font-size: var(--font-size-sm);
          }
        }
      }
    }

    .invoice-notes {
      font-style: italic;
    }

    /* ── Read-only show variant ────────────────────────────────────── */

    &.invoice-document--readonly {
      .invoice-notes {
        color: var(--muted-color);
        text-align: center;
      }

      .invoice-section-heading {
        border-radius: var(--radius-default);
      }

      .row:not(.full-width) > div.invoice-meta-column > div {
        display: flex;
        justify-content: space-between;
        gap: var(--spacing-md);
      }

      .line-items {
        --line-grid: 4fr 1fr 1fr 1fr;

        display: flex;
        flex-direction: column;

        & > :first-child,
        .line-items-footer,
        .nested-form-wrapper {
          display: grid;
          grid-template-columns: var(--line-grid);
        }

        & p {
          display: flex;
          align-items: center;
          height: var(--row-height);
          padding-inline: var(--spacing-sm);
        }

        .line-items-body {
          min-height: calc(var(--row-height) * 8);
          background: var(--surface-color);
        }

        & > :first-child > p:not(:first-child),
        .nested-form-wrapper > p:not(:first-child) {
          justify-content: flex-end;
          text-align: end;
        }

        & > :first-child {
          border: var(--line) solid var(--border-color);
          background-color: var(--emphasis-header-bg);

          & > p {
            color: var(--text-on-emphasis-color);
          }

          & > p:last-child {
            border-inline-start: var(--line) solid var(--border-color);
          }
        }

        .line-items-body {
          position: relative;
          border-inline: var(--line) solid var(--border-color);
          border-block-end: var(--line) solid var(--border-color);

          &::after {
            content: "";
            position: absolute;
            inset-block: 0;
            inset-inline-end: calc(100% / 7);
            border-inline-start: var(--line) solid var(--border-color);
          }
        }

        .line-items-footer {
          border-inline: var(--line) solid var(--border-color);
          border-block-end: var(--line) solid var(--border-color);
          border-end-start-radius: var(--radius-default);
          border-end-end-radius: var(--radius-default);

          & > :first-child {
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .totals {
            grid-column: 2 / -1;
            border-inline-start: var(--line) solid var(--border-color);
          }

          .totals > div {
            display: grid;
            grid-template-columns: 2fr 1fr;

            & > :last-child {
              justify-content: flex-end;
            }

            &:last-child > p {
              font-weight: bold;
            }
          }
        }
      }

      .invoice-contact {
        margin-block-start: var(--spacing-2xl);
        text-align: center;

        p {
          max-width: 50%;
          margin-inline: auto;
          color: var(--muted-color);
          font-size: var(--font-size-sm);
          white-space: pre-line;
        }
      }

      .actions-row {
        margin-block-start: var(--spacing-xl);
      }
    }
  }
}