/*
 * Order show - editorial document layout.
 *
 * Treats the invoice page as a printed document: oversized invoice number
 * as the typographic anchor, ledger-style item table with tabular figures,
 * sidebar of metadata, and a state-driven payment block as the visual
 * climax. The yellow brand accent surfaces only on the primary action and
 * the section-title underline so it stays a punctuation mark, not noise.
 */
@layer components {
  /* Page container - let the article breathe, but not so wide it loses
     editorial rhythm. */
  .order-show {
    /* Height the sticky hero gives up when it docks and collapses
       (padding, oversized number, eyebrow and subject). */
    --order-show-hero-collapse: 12rem;

    max-inline-size: 80rem;
    margin-inline: auto;
    /* Breathing room below the footer so the page is comfortably
       scrollable past its last line. */
    padding-block: var(--space-md) var(--space-3xl);
    /* The hero collapse shortens the in-flow content below the docked
       header. Left to its own devices the browser's scroll anchoring
       compensates by pulling the scroll position back up, which undocks
       the hero again and makes the page jump. Opt out: the scroll
       position is exactly where the user put it. */
    overflow-anchor: none;
  }

  /* While the hero is collapsed, hand the reclaimed height back at the
     bottom. Otherwise the collapse shortens the document, the browser
     clamps the scroll position back above the sticky threshold, the hero
     expands again - and the header flip-flops on every frame near the
     end of a page that is only just scrollable. */
  .order-show:has(.order-show__hero--stuck) {
    padding-block-end: calc(var(--space-3xl) + var(--order-show-hero-collapse));
  }

  /* Animate sections in on first load so the page composes itself. */
  @keyframes order-show-rise {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .order-show > * {
    animation: order-show-rise 0.45s var(--ease-out) backwards;
  }
  .order-show__hero { animation-delay: 40ms; }
  .order-show__body { animation-delay: 120ms; }
  .order-show__footer { animation-delay: 220ms; }

  /* ─── HERO ──────────────────────────────────────────────────────── */

  .order-show__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-end;
    gap: var(--space-xl);
    padding-block: var(--space-xl) var(--space-lg);
    margin-block-end: var(--space-xl);
    border-block-end: 1px solid #e5e5e5;
    /* Dock to the top so scrolling through long invoices keeps the
       primary actions and the order number reachable. */
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background: var(--color-background);
    transition:
      padding-block 0.25s var(--ease-out),
      box-shadow 0.25s var(--ease-out),
      border-color 0.25s var(--ease-out),
      margin-block-end 0.25s var(--ease-out);
  }

  @media (max-width: 50rem) {
    .order-show__hero {
      grid-template-columns: 1fr;
      gap: var(--space-md);
    }
  }

  .order-show__eyebrow {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2xs);
    font-weight: 500;
    overflow: hidden;
    max-block-size: 2rem;
    transition: max-block-size 0.25s var(--ease-out),
                opacity 0.2s var(--ease-out),
                margin 0.25s var(--ease-out);
  }

  .order-show__eyebrow-accent {
    color: var(--color-text);
    font-weight: 600;
  }

  .order-show__number {
    font-family: "Fira Sans", sans-serif;
    font-weight: 200;
    font-size: clamp(2.75rem, 7vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
    font-feature-settings: "tnum" 1;
    transition: font-size 0.25s var(--ease-out),
                margin 0.25s var(--ease-out),
                letter-spacing 0.25s var(--ease-out);
  }

  .order-show__subject {
    font-size: var(--text-lg);
    line-height: 1.4;
    color: var(--color-text-secondary);
    max-inline-size: 50ch;
    margin: 0;
    overflow: hidden;
    max-block-size: 4rem;
    transition: max-block-size 0.25s var(--ease-out),
                opacity 0.2s var(--ease-out);
  }

  /* Header actions sit at the baseline of the title block. The existing
     btn-group handles the inner layout; we just nudge it inline. */
  .order-show__hero .admin-header__actions {
    margin: 0;
  }

  /* ─── HERO STUCK STATE ─────────────────────────────────────────────
     When the hero docks to the viewport top, the eyebrow and subject
     collapse and the order number shrinks to a compact toolbar height.
     All transitions live on the base rules; this rule just flips the
     target values. */
  .order-show__hero--stuck {
    padding-block: var(--space-xs);
    margin-block-end: var(--space-md);
    border-block-end-color: transparent;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.12);
    align-items: center;
  }

  .order-show__hero--stuck .order-show__number {
    font-size: var(--text-xl);
    letter-spacing: 0;
    margin: 0;
  }

  .order-show__hero--stuck .order-show__eyebrow,
  .order-show__hero--stuck .order-show__subject {
    max-block-size: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* Reduced motion: skip the transitions but keep the layout change so
     the page still behaves correctly. */
  @media (prefers-reduced-motion: reduce) {
    .order-show__hero,
    .order-show__hero *,
    .order-show > * {
      transition: none !important;
      animation: none !important;
    }
  }

  /* ─── BODY: SIDEBAR + MAIN ─────────────────────────────────────── */

  .order-show__body {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }

  @media (max-width: 56rem) {
    .order-show__body {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
    }
  }

  /* Sidebar: metadata as a stacked ledger. Each row is a label/value pair
     separated by a hairline so the column reads like an invoice's
     "Belege" sidebar in print. */
  .order-show__sidebar {
    display: grid;
    gap: 0;
    align-self: start;
    position: sticky;
    /* Sits just below the stuck hero so the metadata doesn't slide under
       the docked toolbar. */
    top: 4.5rem;
  }

  @media (max-width: 56rem) {
    .order-show__sidebar {
      position: static;
    }
  }

  .order-meta {
    display: grid;
    gap: var(--space-3xs);
    padding-block: var(--space-sm);
    border-block-end: 1px solid #f0f0f0;
  }

  .order-meta:first-child {
    padding-block-start: 0;
  }

  .order-meta:last-child {
    border-block-end: 0;
  }

  .order-meta__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    font-weight: 600;
  }

  .order-meta__value {
    font-size: var(--text-base);
    color: var(--color-text);
    font-feature-settings: "tnum" 1;
    line-height: 1.4;
  }

  .order-meta__value a {
    color: inherit;
    text-decoration: none;
    border-block-end: 1px solid currentcolor;
    padding-block-end: 0.05em;
  }

  .order-meta__value a:hover {
    color: var(--color-link);
    border-block-end-color: var(--color-link);
  }

  /* Main column: stacked sections. */
  .order-show__main {
    display: grid;
    gap: var(--space-2xl);
    min-inline-size: 0;
  }

  .order-show__section-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text);
    font-weight: 700;
    margin: 0 0 var(--space-md);
    padding-block-end: var(--space-2xs);
    border-block-end: 2px solid var(--color-text);
    /* Yellow underscore that hangs just under the heading rule - the only
       place on the page where the brand accent shows up unannounced. */
    position: relative;
  }

  .order-show__section-title::after {
    content: "";
    position: absolute;
    inset-block-end: -2px;
    inset-inline-start: 0;
    inline-size: 2.5rem;
    block-size: 2px;
    background: var(--color-yellow);
  }

  /* ─── LEDGER (items table) ────────────────────────────────────── */

  .order-ledger {
    inline-size: 100%;
    border-collapse: collapse;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }

  .order-ledger thead th {
    text-align: start;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: var(--space-2xs) var(--space-sm) var(--space-xs);
    border-block-end: 1px solid #d9d9d9;
  }

  .order-ledger tbody td {
    padding: var(--space-sm);
    border-block-end: 1px solid #f5f5f5;
    vertical-align: top;
    line-height: 1.4;
  }

  .order-ledger tbody tr:last-of-type td {
    border-block-end: 0;
  }

  .order-ledger .num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .order-ledger .pos {
    color: var(--color-text-muted);
    inline-size: 3ch;
    font-variant-numeric: tabular-nums;
  }

  .order-ledger__sub {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-block-start: var(--space-3xs);
  }

  .order-ledger__subtotal td,
  .order-ledger__discount td {
    border-block-end: 0;
    color: var(--color-text-muted);
  }

  .order-ledger__subtotal td {
    border-block-start: 1px solid #d9d9d9;
  }

  .order-ledger__total td {
    border-block-end: 0;
    border-block-start: 2px solid var(--color-text);
    padding-block-start: var(--space-md);
    padding-block-end: 0;
    font-weight: 700;
    font-size: var(--text-lg);
  }

  /* ─── EXPLANATION ────────────────────────────────────────────── */

  .order-show__explanation {
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    max-inline-size: 60ch;
  }

  .order-show__explanation :where(p, ul, ol) {
    margin-block: 0 var(--space-sm);
  }

  /* ─── PAYMENT STATUS (visual climax) ─────────────────────────── */

  .payment-status {
    --status-bg: #fafafa;
    --status-border: #e5e5e5;
    --status-accent: var(--color-text-secondary);

    padding: var(--space-lg);
    border-radius: var(--radius-md);
    background: var(--status-bg);
    border: 1px solid var(--status-border);
    border-inline-start: 4px solid var(--status-accent);
    display: grid;
    gap: var(--space-md);
  }

  .payment-status--paid {
    --status-bg: #ecf8ee;
    --status-border: #b6dfc0;
    --status-accent: #2e7d32;
  }

  .payment-status--overdue {
    --status-bg: #fdf4f5;
    --status-border: #f1b0b7;
    --status-accent: var(--color-error);
  }

  .payment-status--unsent {
    --status-bg: #fafafa;
    --status-border: #e5e5e5;
    --status-accent: #999;
  }

  .payment-status__head {
    display: grid;
    gap: var(--space-3xs);
  }

  .payment-status__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--status-accent);
    font-weight: 600;
    margin: 0;
  }

  .payment-status__primary {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.15;
    font-feature-settings: "tnum" 1;
  }

  .payment-status--paid .payment-status__primary { color: #1b5e20; }
  .payment-status--overdue .payment-status__primary { color: #721c24; }

  .payment-status__form {
    display: flex;
    gap: var(--space-sm);
    align-items: end;
    flex-wrap: wrap;
  }

  .payment-status__field {
    display: grid;
    gap: var(--space-3xs);
  }

  .payment-status__field label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
    font-weight: 600;
  }

  .payment-status__field input {
    padding: var(--space-2xs) var(--space-sm);
    border: 1px solid #ccc;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    background: var(--color-white);
  }

  /* ─── DOCUMENT (PDF embed) ───────────────────────────────────── */

  .order-document-embed {
    inline-size: 100%;
    block-size: min(80vh, 50rem);
    min-block-size: 30rem;
    display: block;
    border: 0;
    background: #fafafa;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 12px 32px rgba(0, 0, 0, 0.08);
    border-radius: 2px;
  }

  .order-document__empty {
    padding: var(--space-xl);
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-background-elevated);
    border: 1px dashed #d9d9d9;
    border-radius: var(--radius-md);
    margin: 0;
  }

  /* ─── FOOTER ─────────────────────────────────────────────────── */

  .order-show__footer {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid #e5e5e5;
    display: flex;
    gap: var(--space-md);
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  .order-show__footer-danger {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  /* ─── DUNNING (Mahnwesen) ────────────────────────────────────── */

  .dunning-action {
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    background: #fdf4f5;
    border: 1px solid #f1b0b7;
    border-inline-start: 4px solid var(--color-error);
    display: grid;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
  }

  .dunning-action__hint {
    margin: 0;
    color: var(--color-text-secondary);
  }

  .dunning-history {
    inline-size: 100%;
    border-collapse: collapse;
  }

  .dunning-history th,
  .dunning-history td {
    text-align: start;
    padding: var(--space-xs) var(--space-sm);
    border-block-end: 1px solid #e5e5e5;
  }

  .dunning-history th {
    color: var(--color-text-muted);
    font-weight: 500;
  }

  /* Sent Mahnung, expandable to the full snapshotted message text. */
  .dunning-message__summary {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-sm);
  }

  .dunning-message__toggle {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .dunning-message[open] .dunning-message__toggle {
    visibility: hidden;
  }

  .dunning-message__body {
    margin-block-start: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-inline-start: 3px solid #e5e5e5;
    background: #fbfbfb;
    color: var(--color-text-secondary);
    overflow-wrap: break-word;
  }

  .dunning-message__body p {
    margin-block: 0 var(--space-sm);
  }

  .dunning-message__body p:last-child {
    margin-block-end: 0;
  }

  .dunning-empty {
    margin: 0;
    color: var(--color-text-muted);
  }
}