@layer components {
  .inv-page {
    padding-block-end: 4rem;
  }

  /* From 768px: the header on the left, the timeline on the right (set apart). */
  @media (width >= 768px) {
    .inv-page__topbar {
      align-items: center;
      display: flex;
      gap: 2rem;
      justify-content: space-between;
    }

    .inv-page__head {
      flex: 1 1 auto;
      min-inline-size: 0;
    }
  }

  /* The native app's bar holds the way back and the title, so the head keeps
     only what is under them, closer to the bar; a head left with nothing to
     show folds away with its rule. */
  [data-platform~="native"] {
    .inv-page__head {
      padding-block: 1.25rem 1.5rem;
    }

    .inv-page__head:not(:has(> :not(.hide-on-native))),
    .inv-page__topbar:not(:has(> .inv-page__head > :not(.hide-on-native))) + .page-separator {
      display: none;
    }
  }

  .inv-head-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* button_to creates a <form> — keep it inline inside the flex container */
  .inv-head-actions > form {
    display: inline-flex;
  }

  .inv-back-link {
    display: block;
    text-decoration: none;
  }

  .inv-back-link::before {
    content: "← ";
  }

  .inv-back-link:hover { text-decoration: underline; }

  /* ── Desktop two-column layout ───────────────────────────────────────────
     Flexbox row: main (flex:1) | side-col (300px flex column).
     side-col is a single flex column — no grid row-height gaps.          */
  .inv-layout {
    align-items: start;
    display: flex;
    gap: 1.5rem;
    padding-block-start: 2rem;
  }

  .inv-layout__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1.75rem;
    min-inline-size: 0;
  }

  /* Single right column wrapper — contains sidebar + bottom as one unit */
  .inv-layout__side-col {
    display: flex;
    flex: 0 0 300px;
    flex-direction: column;
    gap: 1rem;
  }

  .inv-layout__sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .inv-layout__bottom {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .inv-doc-header__top {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-block-end: 1.25rem;
  }

  .inv-doc-num__label {
    color: var(--color-ink-faint);
    margin: 0 0 0.5rem;
  }

  .inv-doc-num__row {
    align-items: baseline;
    display: flex;
    gap: 0.375rem;
  }

  .inv-doc-num__input {
    background: transparent;
    border: none;
    border-block-end: 2px solid var(--color-border);
    color: var(--color-brand);
    font-size: 2rem;
    font-weight: 700;
    /* Sized by the digits typed into it, a character at the least. */
    field-sizing: content;
    inline-size: auto;
    min-inline-size: 1ch;
    outline: none;
    padding: 0;
    transition: border-color 0.15s;
  }

  .inv-doc-num__input:last-of-type {
    color: var(--color-ink);
  }

  .inv-doc-num__input:focus {
    border-block-end-color: var(--color-brand);
  }

  .inv-doc-num__error {
    color: var(--color-negative);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0.25rem 0 0;
  }

  .inv-doc-num__sep {
    color: var(--color-ink-faint);
    font-size: 2rem;
    font-weight: 300;
  }

  .inv-doc-header__logo {
    align-items: center;
    display: flex;
  }

  .inv-doc-header__logo img {
    block-size: 46px;
  }

  /* The Faktura wordmark, shown while the supplier has no logo of their
     own — a background, so the theme picks the file (`--image-wordmark`). */
  .inv-doc-header__wordmark {
    aspect-ratio: 204 / 53;
    background: var(--image-wordmark) no-repeat center / contain;
    block-size: 46px;
    display: block;
  }

  /* Supplier logo replaces the Faktura mark, clipped into the app's avatar circle */
  .inv-doc-header__supplier-logo {
    align-items: center;
    background: var(--color-canvas);
    block-size: 52px;
    border: 1.5px solid oklch(from var(--color-brand) l c h / 20%);
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    inline-size: 52px;
    justify-content: center;
    overflow: hidden;
  }

  .inv-doc-header__logo .inv-doc-header__supplier-logo img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  .inv-doc-header__divider {
    border-block-start: 1.5px dashed var(--color-border-strong);
    margin-block-end: 1.25rem;
  }

  /* Row 1: 3 × .inv-field (label + input). Row 2: the errors.
     An error sits OUTSIDE .inv-field — it can't inflate the field's height.
     Every .inv-field in row 1 has the same height → the inputs always align. */
  .inv-doc-dates {
    align-items: start;
    column-gap: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 0;
  }

  /* iOS Safari: input[type="date"] has an intrinsic min-width that inflates
     the grid cell. min-width: 0 lets the cell shrink to the available width. */
  .inv-doc-dates .inv-field {
    min-inline-size: 0;
  }

  /* Rails wraps a field with an error in div.field_with_errors — the wrapper
     mustn't alter the flex layout inside .inv-field, so it's made invisible. */
  .inv-doc-dates .field_with_errors {
    display: contents;
  }

  .inv-field__error {
    color: var(--color-negative);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
    padding-block-start: 0.25rem;
  }

  /* The error elements are always in the DOM (autosave-form writes messages
     into them) — empty, they mustn't take up space. */
  .inv-field__error:empty,
  .inv-doc-num__error:empty {
    display: none;
  }

  /* The .inv-doc-dates grid needs the empty errors as placeholder cells, or
     auto-placement shifts. */
  .inv-doc-dates .inv-field__error:empty {
    display: block;
    padding-block-start: 0;
  }

  /* Date field labels — larger, bold, sentence case (override the micro-label) */
  .inv-doc-dates .inv-label {
    color: var(--color-ink-secondary);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }

  .inv-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .inv-input {
    min-block-size: var(--inv-input-height);
    padding: 0.425rem 0.625rem;
  }

  /* Native calendar picker indicator — invisible, but covers the whole input and stays clickable.
     opacity:0 + position:absolute take it out of normal flow (padding-right is untouched)
     while keeping hit-testing → a click through our SVG (pointer-events:none) lands on the indicator
     and the picker opens. display:none would remove it from the DOM entirely and the picker wouldn't open. */
  .inv-input[type="date"]::-webkit-calendar-picker-indicator {
    block-size: 100%;
    cursor: pointer;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    opacity: 0;
    position: absolute;
  }

  /* Wrapper: clips iOS Safari's native date-input rendering that overflows CSS layout.
     Border is on the WRAPPER (not input) so overflow:hidden never clips it.
     border-radius + overflow:hidden = input is visually contained; rounded corners clip iOS overflow.
     transition for the focus glow (moved here from input's box-shadow). */
  .inv-date-wrap {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    inline-size: 100%;
    min-inline-size: 0;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.15s, border-color 0.15s;
  }

  /* Focus glow on wrapper (not input) — because overflow:hidden clips the input's box-shadow */
  .inv-date-wrap:focus-within {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
  }

  /* Remove border + duplicate glow from input — wrapper owns the border now */
  .inv-date-wrap .inv-input[type="date"] {
    border: none;
    box-shadow: none;
    display: block;
    inline-size: 100%;
    padding-inline-end: 2.25rem;
  }

  .inv-date-wrap .inv-input[type="date"]:focus {
    border: none;
    box-shadow: none;
    outline: none;
  }

  /* The SVG icon — pointer-events: none so tapping it still opens the native picker */
  .inv-date-icon {
    color: var(--color-brand);
    inset-block-start: 50%;
    inset-inline-end: 0.75rem;
    opacity: 0.7;
    pointer-events: none;
    position: absolute;
    transform: translateY(-50%);
    transition: opacity 0.15s;
  }

  .inv-date-wrap:hover .inv-date-icon,
  .inv-date-wrap:focus-within .inv-date-icon {
    opacity: 1;
  }

  /* Invalid field — red border on the number's inputs */
  .inv-doc-num__input.input-error {
    border-color: var(--color-negative);
  }

  @media (width < 1024px) {
    /* Switch to single-column flex column */
    .inv-layout {
      align-items: stretch; /* override desktop `start` — items must fill full width */
      flex-direction: column;
    }

    /* Strip the side-col wrapper — children become direct flex items of inv-layout
       so they can be independently ordered relative to inv-layout__main          */
    .inv-layout__side-col {
      display: contents;
    }

    /* Order: sidebar first (-1), main middle (0), bottom last (1) */
    .inv-layout__sidebar {
      order: -1;
    }

    .inv-layout__bottom {
      order: 1;
    }
  }

  /* Under 768px the page is one column, and the timeline — rendered once, in
     the header (events/_timeline) — belongs among the sidebar's sections
     below the rule. The top bar and the two-column layout dissolve
     (`display: contents`) so their children are the column's own items and
     `order` can interleave them: header, rule, sidebar, timeline, main
     column, the export and danger sections. The margins are the spacing the
     dissolved layout gave its children. */
  @media (width < 768px) {
    .inv-page {
      display: flex;
      flex-direction: column;
    }

    .inv-page__topbar,
    .inv-layout {
      display: contents;
    }

    .inv-page__head {
      order: 1;
    }

    .page-separator {
      order: 2;
    }

    .inv-layout__sidebar {
      margin-block-start: 2rem;
      order: 3;
    }

    .inv-layout__main {
      margin-block-start: 1.5rem;
      order: 5;
    }

    .inv-layout__bottom {
      margin-block-start: 1.5rem;
      order: 6;
    }
  }

  /* ── Tablet (768px–1024px) ──────────────────────────────────────── */
  @media (768px <= width < 1024px) {
    /* Sidebar sections side by side, 2 columns */
    .inv-layout__sidebar,
    .inv-layout__bottom {
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (width < 768px) {
    .inv-doc-header__logo img,
    .inv-doc-header__wordmark {
      block-size: 30px;
    }

    .inv-doc-header__supplier-logo {
      block-size: 38px;
      inline-size: 38px;
    }

    /* Mobile: single-column grid — place each field + its error in the right order */
    .inv-doc-dates {
      grid-template-columns: 1fr;
      row-gap: 0.25rem;
    }

    /* .inv-field goes in the odd rows, the errors in the even ones */
    .inv-doc-dates > :nth-child(1) { grid-row: 1; }

    .inv-doc-dates > :nth-child(2) { grid-row: 3; }

    .inv-doc-dates > :nth-child(3) { grid-row: 5; }

    .inv-doc-dates > :nth-child(4) { grid-row: 2; }

    .inv-doc-dates > :nth-child(5) { grid-row: 4; }

    .inv-doc-dates > :nth-child(6) { grid-row: 6; }

    /* Gaps between the fields (not after the last one) */
    .inv-doc-dates > :nth-child(4),
    .inv-doc-dates > :nth-child(5) {
      padding-block-end: 0.625rem;
    }
  }

  /* ─────────────────────────────────────────────
     Mobile — 480 px
     Priority: Items table + Sidebar
  ───────────────────────────────────────────── */
  @media (width < 480px) {
    /* ── Cards — reduce inner padding ─────── */
    .inv-card {
      padding: 1rem;
    }

  }

  @media (width >= 1024px) {
    .inv-layout__side-col {
      inset-block-start: calc(var(--nav-height) + 1.5rem);
      position: sticky;
    }
  }

  /* ─── Read-only document (a seat that may only look) ─── */
  .inv-readonly {
    border: none;
    display: contents;
    margin: 0;
    min-inline-size: 0;
    padding: 0;
  }

  .inv-readonly-note {
    background: var(--color-surface-tint);
    border-radius: var(--radius-md);
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    margin-block-end: 1rem;
    padding: 0.5rem 0.875rem;
  }
}