/* Generated from products/design-system/shared/invoice-rules by Navorina/scripts/sync-ds-invoice-document.mjs. Do not edit. */
/* Invoice rules (shared/invoice-rules.js): the "What the invoice must show" list, the example invoice and the
   generator's form groups and check, on navorina.ai/invoice-requirements/<country> and /tools/invoice-generator.
   The islands are the guide islands (shared/guide-page.css) and the tools islands (Navorina css/tools.css); the sheet
   is the DS invoice document. This file adds only the list rows, the sheet frame and the check lines. */

/* Fields: two columns of quiet rows on a wide island, one on a phone; a tick for always, a dot for "when". */
.nv-invr-fields__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.nv-invr-fields__group { display: grid; align-content: start; gap: 4px; min-width: 0; }
.nv-invr-fields__title { margin: 0 0 4px; color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); font-weight: 500; line-height: 16px; }
.nv-invr-fields__list { display: grid; gap: 2px; margin: 0 -12px; padding: 0; list-style: none; }
.nv-invr-field { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 12px; border-radius: 14px; }
.nv-invr-field:hover { background: var(--nv-guide-well); }
.nv-invr-field__mark { display: inline-flex; height: 20px; align-items: center; color: var(--nv-text-secondary); }
.nv-invr-field__label { display: block; font-size: var(--nv-type-body-size, 14px); line-height: 20px; }
.nv-invr-field__note { display: block; color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); line-height: 16px; }

/* Example invoice: the sheet sits in the island as it does in the product, at its own width. */
.nv-invr-sheet { container: nv-invr-sheet / inline-size; min-width: 0; }
.nv-invr-sheet .nv-o-invoice { margin-inline: auto; }
.nv-invr-sample__open { flex: none; }

/* Generator form: titled groups, no frames; lines are description, qty and price on one row. */
.nv-invr-form { display: grid; gap: 24px; }
.nv-invr-form__group { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.nv-invr-form__legend { padding: 0; margin-block-end: 4px; color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); font-weight: 500; line-height: 16px; }
.nv-invr-line { grid-template-columns: minmax(0, 1fr) 72px 112px; gap: 8px; }
.nv-invr-form [data-nv-invr-choice][hidden], .nv-invr-form .nv-m-segmented__pill[hidden] { display: none; }

/* Check under the preview: one state line, the country's short rules, the link to the full page. */
.nv-invr-check { display: grid; gap: 8px; margin-block-start: 16px; }
.nv-invr-check__state { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--nv-type-body-size, 14px); line-height: 20px; }
.nv-invr-check__state[data-state="missing"] { color: var(--nv-text-secondary); }
.nv-invr-check__state svg { flex: none; margin-block-start: 2px; }
.nv-invr-check__tips { display: grid; gap: 4px; margin: 0; padding-inline-start: 18px; color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); line-height: 16px; }

@container nv-pub (max-width: 640px) {
  .nv-invr-fields__groups { grid-template-columns: minmax(0, 1fr); }
  .nv-invr-line { grid-template-columns: minmax(0, 1fr) 56px 96px; }
}

/* Print or PDF: the sheet alone, light, whatever the page theme. */
@media print {
  .nv-invr-check, .nv-tools-panel__head { display: none !important; }
  .nv-invr-sheet .nv-o-invoice {
    --nv-invoice-sheet: #ffffff;
    --nv-invoice-well: color-mix(in srgb, #5e5e5e 8%, #ffffff);
    --nv-invoice-text: #1a1a1c;
    --nv-invoice-secondary: #4a4a4f;
    --nv-invoice-tertiary: #7c7c80;
    --nv-invoice-placeholder: transparent;
    color-scheme: light;
  }
}

/* Generator on a wide screen: the preview stays in view while the long form scrolls. */
@media screen and (min-width: 960px) {
  [data-nv-invr-generator] > .nv-tools-output { position: sticky; top: 88px; align-self: start; }
}
