/* Invoice viewer widget. Scoped under .einv; colours as tokens so the site theme can override them. */
.einv {
  /* Button colours follow the site's tokens when the widget sits on a site page (fallbacks: the standalone page). */
  --einv-accent: var(--accent, #0465a1);
  --einv-accent-fg: var(--accent-fg, #fff);
  --einv-border: #b9c6d2;
  --einv-bg: #f6f9fc;
  --einv-text: #1b2733;
  --einv-muted: #52606d;
  --einv-error-bg: #fdecea;
  --einv-error: #8a1c12;
  color: var(--einv-text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .einv {
    --einv-accent: var(--accent, #5aa2f0); --einv-accent-fg: var(--accent-fg, #06111d); --einv-border: #3a4a5a; --einv-bg: #16202a; --einv-text: #e6edf3; --einv-muted: #a3b1bf;
    --einv-error-bg: #3b1714; --einv-error: #ffb4a9;
  }
}
:root[data-theme="dark"] .einv {
  --einv-accent: var(--accent, #5aa2f0); --einv-accent-fg: var(--accent-fg, #06111d); --einv-border: #3a4a5a; --einv-bg: #16202a; --einv-text: #e6edf3; --einv-muted: #a3b1bf;
  --einv-error-bg: #3b1714; --einv-error: #ffb4a9;
}
.einv *, .einv *::before, .einv *::after { box-sizing: border-box; }
.einv-drop {
  border: 2px dashed var(--einv-border);
  border-radius: 12px;
  background: var(--einv-bg);
  padding: 28px 16px;
  text-align: center;
}
/* a file is being dragged over the zone: solid accent border and a tint (same size, so nothing moves) */
.einv-drop.einv-over { border-style: solid; border-color: var(--einv-accent); background: color-mix(in srgb, var(--einv-accent) 12%, var(--einv-bg)); }
.einv-drop-title { font-size: 1.15em; font-weight: 600; margin: 0 0 4px; }
.einv-drop-hint { color: var(--einv-muted); font-size: .9em; margin: 0 0 16px; }
.einv-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.einv-button {
  display: inline-block; cursor: pointer; border: 0; border-radius: 8px;
  background: var(--einv-accent); color: var(--einv-accent-fg); font: inherit; font-weight: 600; padding: 10px 18px;
}
.einv-input:focus-visible + .einv-or, .einv-button:focus-visible { outline: 3px solid var(--einv-accent); outline-offset: 2px; }
.einv-or { display: block; color: var(--einv-muted); font-size: .9em; margin-top: 8px; }
.einv-samples { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0 4px; font-size: .95em; }
.einv-sample-hint { color: var(--einv-muted); }
.einv-sample-go { background: transparent; color: var(--einv-accent); box-shadow: inset 0 0 0 2px var(--einv-accent); padding: 8px 14px; }
.einv-sample-kind { color: var(--einv-muted); font-size: .9em; }
.einv-sample-note { margin: 8px 0; padding: 6px 12px; border-left: 4px solid var(--einv-accent); background: var(--einv-bg); font-size: .95em; font-weight: 600; }
.einv-privacy { font-size: .9em; color: var(--einv-muted); margin: 10px 0; }
.einv-options { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .95em; margin: 8px 0; }
.einv-select { font: inherit; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--einv-border); background: var(--einv-bg); color: inherit; }
.einv-status { min-height: 1.5em; font-size: .95em; color: var(--einv-muted); margin: 8px 0; }
.einv-error { background: var(--einv-error-bg); color: var(--einv-error); border-radius: 8px; padding: 12px 14px; margin: 8px 0; }
.einv-notes p { font-size: .9em; color: var(--einv-muted); margin: 4px 0; }
.einv-again { margin: 8px 0 12px; }
.einv-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.einv-print { margin: 8px 0 12px; background: transparent; color: var(--einv-accent); box-shadow: inset 0 0 0 2px var(--einv-accent); }
@media print {
  /* Ctrl+P on the page itself: only the rendered invoice. The print button prints the frame, which paginates. */
  .einv-drop, .einv-samples, .einv-options, .einv-status, .einv-actions, .einv-notes, .einv-privacy, .einv-validation, .einv-skeleton { display: none !important; }
  .einv-frame { border: 0; }
}
.einv-frame { display: block; width: 100%; min-height: 300px; height: 70vh; border: 1px solid var(--einv-border); border-radius: 8px; background: #fff; }
.einv [hidden] { display: none !important; }

/* Waiting feedback: a skeleton where the invoice will appear and a spinner on the status line while the viewer loads, the
   file is read and the invoice renders. Skeleton height = the frame's minimum, so the page does not jump when it is replaced. */
.einv-skeleton { display: grid; align-content: start; gap: 12px; min-height: 300px; padding: 20px; border: 1px solid var(--einv-border);
  border-radius: 8px; background: var(--einv-bg); }
.einv-skeleton span { display: block; height: .9em; border-radius: 4px; background: var(--einv-border); opacity: .45; }
.einv-skeleton span:nth-child(1) { width: 38%; height: 1.4em; }
.einv-skeleton span:nth-child(2) { width: 72%; }
.einv-skeleton span:nth-child(3) { width: 58%; }
.einv-skeleton span:nth-child(4) { width: 86%; }
.einv-skeleton span:nth-child(5) { width: 44%; }
@keyframes einv-spin { to { transform: rotate(360deg); } }
@keyframes einv-pulse { 50% { opacity: .2; } }
@keyframes einv-fade { from { opacity: 0; } to { opacity: 1; } }
/* motion only for visitors who have not asked for less: spinner, pulsing skeleton, 200 ms fade of the invoice and messages */
@media (prefers-reduced-motion: no-preference) {
  .einv-drop { transition: border-color .15s, background-color .15s; }
  [data-state="busy"] .einv-status::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .5em; vertical-align: -.12em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: einv-spin .7s linear infinite; }
  .einv-skeleton span { animation: einv-pulse 1.4s ease-in-out infinite; }
  .einv-skeleton span:nth-child(2) { animation-delay: .15s; }
  .einv-skeleton span:nth-child(3) { animation-delay: .3s; }
  .einv-skeleton span:nth-child(4) { animation-delay: .45s; }
  .einv-skeleton span:nth-child(5) { animation-delay: .6s; }
  .einv-frame:not([hidden]), .einv-error:not([hidden]) { animation: einv-fade .2s ease-out both; }
}

/* Standalone test page (/viewer/, noindex); the site pages bring their own page styles. */
.einv-page { margin: 0; padding: 16px; background: #fff; color: #1b2733; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.einv-page main { max-width: 64rem; margin: 0 auto; }
.einv-page h1 { font-size: 1.5em; margin: 0 0 12px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .einv-page { background: #0b131b; color: #e6edf3; } }
:root[data-theme="dark"] .einv-page { background: #0b131b; color: #e6edf3; }

/* Validator preview */
.einv-validation { border: 1px solid var(--einv-border); border-radius: 8px; padding: 12px 14px; margin: 8px 0 12px; background: var(--einv-bg); }
.einv-validation h2 { font-size: 1.05em; margin: 0 0 6px; }
.einv-validation p { margin: 4px 0; font-size: .95em; }
.einv-val-good { color: #1d6b2f; font-weight: 600; }
.einv-val-bad { color: var(--einv-error); font-weight: 600; }
.einv-val-scroll { overflow: auto; max-height: 420px; margin: 8px 0; }
.einv-val-table { border-collapse: collapse; width: 100%; font-size: .9em; }
.einv-val-table th, .einv-val-table td { text-align: left; vertical-align: top; padding: 4px 8px; border-bottom: 1px solid var(--einv-border); }
.einv-val-error td:first-child { color: var(--einv-error); font-weight: 600; }
.einv-validation .einv-val-note { color: var(--einv-muted); font-size: .85em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .einv-val-good { color: #7fd99a; } }
:root[data-theme="dark"] .einv-val-good { color: #7fd99a; }