/*
 * The printable invoice document (Invoices::Previews) + its on-screen toolbar. An A4
 * sheet on a neutral backdrop; @media print drops the toolbar + chrome so it prints (or
 * "Save as PDF"-s) clean. Layout: customer · delivery · branding, then notes · invoice
 * info, lines, totals, payment information, and the company footer pinned to the bottom.
 * Scoped to .invoice-doc / .invoice-toolbar / .invoice-print. Headless Chrome prints this same
 * document as the emailed/downloaded PDF (Invoice::Pdf) — print == PDF by construction.
 */

@layer components {
  .invoice-print {
    background: var(--color-slate-100);
    margin: 0;
    padding: 0;
  }

  /* On-screen toolbar — back, language toggle, print. Hidden when printing. */
  .invoice-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: 210mm;
    margin: var(--space-5) auto var(--space-3);
    padding: 0 var(--space-2);
  }

  .invoice-toolbar__langs { display: flex; gap: var(--space-2); }

  .invoice-toolbar__lang {
    font-size: var(--text-sm);
    color: var(--color-link);
    text-decoration: none;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
  }

  .invoice-toolbar__lang.is-active {
    background: var(--color-white);
    color: var(--color-text-heading);
    font-weight: 600;
  }

  .invoice-toolbar__back {
    font-size: var(--text-sm);
    color: var(--color-link);
    text-decoration: none;
  }

  /* The sheet — a flex column so the footer can be pinned to the bottom. */
  .invoice-doc {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-width: 210mm;
    min-height: 297mm; /* full A4 — the footer sits at the very bottom */
    margin: 0 auto var(--space-8);
    padding: 16mm;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    color: var(--color-text-heading);
    font-size: var(--text-xs); /* body — matches the invoice-information items */
    line-height: 1.5;
  }

  /* Masthead: branding (logo + company name) left · document kind right */
  .invoice-doc__masthead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
  }

  .invoice-doc__logo { display: block; max-height: 64px; max-width: 240px; margin-bottom: var(--space-2); }
  .invoice-doc__brand-name { font-size: var(--text-base); font-weight: 600; }

  .invoice-doc__kind {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: right;
  }

  /* Customer · delivery */
  .invoice-doc__parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
  }

  .invoice-doc__party-label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-body);
    margin-bottom: var(--space-1);
  }

  .invoice-doc__party-name { font-weight: 600; }

  /* Notes (header + body) · invoice information — balanced headers */
  .invoice-doc__intro {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
  }

  .invoice-doc__notes-header,
  .invoice-doc__info-heading {
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 var(--space-2);
  }

  .invoice-doc__notes-body { color: var(--color-text-body); }

  .invoice-doc__info { text-align: right; min-width: 16rem; }

  .invoice-doc__info dl { margin: 0; }

  .invoice-doc__info dl > div {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    font-size: var(--text-xs);
  }

  .invoice-doc__info dt { color: var(--color-text-body); }
  .invoice-doc__info dd { margin: 0; font-weight: 600; min-width: 6rem; text-align: right; }

  /* Lines */
  .invoice-doc__lines {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-5);
  }

  .invoice-doc__lines th {
    text-align: left;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-body);
    border-bottom: 2px solid var(--color-slate-300);
    padding: var(--space-2);
  }

  .invoice-doc__lines td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
  }

  .invoice-doc__col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .invoice-doc__col-unit { white-space: nowrap; }
  /* Header cells override .invoice-doc__lines th's left-align for the numeric columns. */
  .invoice-doc__lines th.invoice-doc__col-num { text-align: right; }

  .invoice-doc__section td {
    background: var(--color-slate-50);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
  }

  .invoice-doc__line-comment {
    font-size: var(--text-xs);
    color: var(--color-text-body);
    margin-top: var(--space-0-5);
  }

  /* Totals */
  .invoice-doc__totals {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-6);
  }

  .invoice-doc__totals dl { width: 18rem; margin: 0; }

  .invoice-doc__totals > dl > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-1) 0;
    font-variant-numeric: tabular-nums;
  }

  .invoice-doc__totals dt, .invoice-doc__totals dd { margin: 0; }

  /* Currency header sitting above the amounts column (e.g. "DKK"). */
  .invoice-doc__totals-currency dd {
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-1);
  }

  .invoice-doc__totals-rule {
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-1);
    padding-top: var(--space-2) !important;
    font-weight: 600;
  }

  .invoice-doc__totals-grand {
    border-top: 2px solid var(--color-slate-300);
    margin-top: var(--space-1);
    padding-top: var(--space-2) !important;
    font-weight: 700;
    font-size: var(--text-base);
  }

  /* Payment information */
  .invoice-doc__payment {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-body);
  }

  .invoice-doc__payment h2 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-heading);
    margin: 0 0 var(--space-2);
  }

  .invoice-doc__payment p { margin: 0 0 var(--space-2); }

  .invoice-doc__enclosures {
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-body);
  }

  /* Company footer — pinned to the bottom of the sheet. Two centred lines: company
     identity on top, contact details below. */
  .invoice-doc__foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-2xs);
    color: var(--color-text-body);
  }

  .invoice-doc__foot-line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    justify-content: center;
  }
}

/* Print: drop the chrome, print the sheet edge-to-edge. */
@media print {
  .invoice-toolbar { display: none !important; }

  .invoice-print { background: var(--color-white); }

  .invoice-doc {
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0 0 18mm; /* reserve space so content clears the fixed footer */
    border: 0;
    box-shadow: none;
  }

  /* On a printed page the sheet shrinks to content height, so margin-top:auto can't
     pin the footer — fix it to the bottom of every page instead. */
  .invoice-doc__foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    padding-top: var(--space-2);
    background: var(--color-white);
  }

  @page { margin: 10mm; }
}