/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* Fonts liegen lokal unter vendor/fonts — die App muss ohne Internetzugang laufen. */
@import url('../vendor/fonts/fonts.css');

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-ghost.is-max { color: var(--color-neutral-500); }
.btn-ghost.is-max:hover, .btn-ghost.is-max:active { background: transparent; }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

/* Zahlenfelder: rechtsbündig, ohne die Auf-/Ab-Pfeile — die stören bei den
   vielen kleinen Zahlenfeldern im Ablauf mehr, als sie nutzen. */
input[type="number"] {
  text-align: right;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* Feste Breiten für die Kopfzeilen-Buttons — sonst springt die Leiste beim
   Umschalten DE/EN, weil die Texte unterschiedlich lang sind. Jede Breite
   passt auf die längere der beiden Sprachvarianten. */
#btn-new { min-width: 58px; }
#btn-load-json { min-width: 100px; }
#btn-save-all { min-width: 190px; }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4); z-index: 9999;
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — Befunde der Ablaufprüfung — */
.findings {
  margin: 0; padding-left: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: 14px; max-height: 40vh; overflow-y: auto;
}

/* — PIN-Eingabe: vier Kästchen im Blueprint-Look der App (quadratisch,
     Haarlinie, Akzentrahmen im Fokus) — */
.pin-boxes { display: flex; gap: var(--space-2); }
.pin-box {
  width: 44px; height: 52px; padding: 0; text-align: center;
  font-family: var(--font-heading); font-size: 22px; color: var(--color-text);
  background: transparent; border: 1px solid var(--color-divider); border-radius: 0;
}
.pin-box:focus { outline: none; border-color: var(--color-accent); background: var(--color-accent-100); }
.pin-box:disabled { opacity: 0.45; }
.pin-boxes.is-error .pin-box { border-color: #b00020; animation: pin-shake 0.28s; }
.pin-hint { font-size: 13px; opacity: 0.8; min-height: 1.45em; }
.pin-field { display: flex; flex-direction: column; gap: var(--space-1); }
.pin-label {
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7;
}
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card { background: transparent; border: 1px solid var(--color-divider); }
/* Der Dialog bekommt nur den Rahmen, nicht den transparenten Grund: er
   schwebt über der Seite, und durch ihn hindurch die Tabelle zu sehen macht
   ihn unlesbar. Sein deckender Grund steht oben bei .dialog. */
.dialog { border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   Taktzeitrechner — anwendungsspezifische Ergänzungen zum Designsystem.
   ══════════════════════════════════════════════════════════════════════ */

.app { min-height: 100vh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
.app-main {
  padding: var(--space-6); display: grid;
  grid-template-columns: 220px 1fr 220px; gap: var(--space-6); align-items: start;
}
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.card-pad { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.row-inline { display: flex; gap: 6px; align-items: end; }

/* — Auftragskopf — */
.auftrag {
  display: grid; grid-template-columns: 1fr 1fr 1.4fr 150px; gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.auftrag .field { margin: 0; }

/* — Ablauftabelle — */
.seq-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.seq-table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.seq-table td {
  padding: 4px var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.seq-table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.seq-table .num { text-align: right; white-space: nowrap; }
.seq-table .grip { width: 18px; opacity: .35; cursor: grab; font-size: 12px; user-select: none; }
.seq-table .movement-col { min-width: 300px; }
.seq-table .acts { width: 40px; white-space: nowrap; text-align: right; }
.cell-input { padding: 3px 6px; min-height: 28px; font-size: 12px; }
.unit { font-size: 10.5px; opacity: .5; }

/* Parameter-Spalte als 3 feste Spalten (Auswahl/Text, Maß- bzw. Sekunden-
   angabe, Zusatztext) — jede so breit wie ihr größtmöglicher Inhalt in
   beiden Sprachen, damit beim Umschalten DE/EN oder je nach Bewegungsart
   nichts verrutscht. Spalten ohne Inhalt (z. B. Stellungen ohne Maßangabe)
   bleiben als Leerraum stehen, statt die folgende Spalte zu verschieben. */
/* Der Abstand zwischen den Parameter-Spalten ist bewusst knapp (space-1
   statt space-2) — der gewonnene Platz geht an die Nachschall-Checkbox in
   der Schweißen-Zeile. */
.param-grid { display: flex; align-items: center; gap: var(--space-1); }
.param-col1 { flex: 0 0 160px; display: flex; flex-direction: column; gap: 4px; }
.param-col2 { flex: 0 0 268px; display: flex; flex-direction: column; gap: 4px; }
.param-col3 { flex: 0 0 calc(20ch + 11px); }
.param-value-line { display: flex; align-items: center; gap: 4px; }
.param-value-line input[type="number"] { width: 50px; flex: none; }

/* Schweißen: Modus-Umschalter und jedes Verfahren mit seinen Werten
   stehen als eigene, in sich abgeschlossene Zeilen untereinander, statt
   Auswahl und Werte auf zwei unabhängig hohe Spalten zu verteilen (dort
   verrutschen sie gegeneinander, sobald eine Zeile mehr Felder zeigt als
   eine andere). Die Breite entspricht bewusst exakt param-col1 + gap +
   param-col2 der übrigen Bewegungsarten (160 + 3.4 + 268 ≈ 431px), damit
   das Zusatztextfeld bei jeder Bewegungsart an derselben Stelle steht —
   siehe schweissParamCell in app.js. */
.param-schweiss { flex: 0 0 431px; display: flex; flex-direction: column; gap: 4px; }
.param-schweiss-row { display: flex; align-items: center; gap: var(--space-1); }
.param-schweiss-row select { flex: 0 0 160px; }
.param-schweiss-row input[type="number"] { width: 50px; flex: none; }

/* Nachschallimpuls je Verfahren-Teilzeile (Modus „Nachschall"). Bewusst
   kleiner als eine normale Checkbox und ohne sichtbare Beschriftung — in
   der Zeile ist zwischen Taktzahl und Domhöhe nur wenig Platz. */
.nachschall-check {
  flex: none; width: 13px; height: 13px; margin: 0 2px; accent-color: var(--color-accent);
}

tr.row-werker { background: var(--color-neutral-100); }
tr.row-selected { outline: 2px solid var(--color-accent); outline-offset: -2px; }
tr.drop-before td { box-shadow: inset 0 2px 0 var(--color-accent); }
tr.drop-after  td { box-shadow: inset 0 -2px 0 var(--color-accent); }
.seq-drop-end { height: 10px; }
.seq-drop-end.drop-active { box-shadow: inset 0 2px 0 var(--color-accent); }

/* Zeitwert konnte nicht berechnet werden (z. B. Geschwindigkeit 0). */
.time-missing { color: #b00020; font-weight: 600; cursor: help; }

/* Angebot, den Stand der letzten Sitzung zurückzuholen. */
.restore-bar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-6);
  background: var(--color-accent-100); color: var(--color-accent-800);
  border-bottom: 1px solid var(--color-accent-300);
  font-size: 12.5px;
}
.restore-bar .btn { font-size: 12.5px; padding: 3px 10px; }

/* Hinweise aus den Stammdaten-Dateien (unbekannte Bewegung, fehlende
   Geschwindigkeit) — sichtbar, aber nicht blockierend. */
.data-warning {
  padding: var(--space-3) var(--space-6);
  background: #fff4e5; color: #6b4500;
  border-bottom: 1px solid #e0b070;
  font-size: 12.5px; line-height: 1.6;
}

.total-bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-accent-700); background: var(--color-accent-100);
}
.total-bar .label {
  font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--color-accent-800);
}
.total-bar .value {
  font-family: var(--font-heading); font-weight: 600; font-size: 22px; color: var(--color-accent-800);
}
.total-bar .values { display: flex; gap: var(--space-4); align-items: baseline; }
.total-variant { font-size: 11px; opacity: .7; display: block; text-align: right; }

.empty-hint {
  padding: var(--space-6); text-align: center; font-size: 13px; opacity: .5;
  border: 1px dashed var(--color-divider); margin-top: var(--space-3);
}

/* — Pool und Vorlagen — */
.pool-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border: 1px solid var(--color-divider); cursor: grab; font-size: 12.5px;
  background: var(--color-surface);
}
.pool-item:hover { border-color: var(--color-accent); }
.tpl-row { display: flex; gap: 4px; align-items: stretch; }
.tpl-row .btn-block { margin-top: 0; }

/* Ab der 5. Vorlage scrollt die Liste, statt den Bewegungs-Pool darunter
   wegzudruecken. Bis zu 4 Zeilen passen ohne Scrollbalken hinein. */
.tpl-list { max-height: 152px; overflow-y: auto; }

.speed-grid { display: grid; grid-template-columns: 1fr 66px; gap: 6px; align-items: center; }

/* — toasts: ersetzen alert()/confirm() — */
.toast-container {
  position: fixed; left: 50%; top: var(--space-4); transform: translateX(-50%); z-index: 10000;
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2);
  width: min(360px, calc(100vw - 2 * var(--space-4)));
}
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent);
  box-shadow: var(--shadow-lg); font-size: 13px;
  animation: toast-in .15s ease-out;
}
.toast-error { border-left-color: #b00020; }
.toast-success { border-left-color: #1e7d34; }
.toast-confirm { flex-direction: column; align-items: stretch; gap: var(--space-3); }
.toast-msg { flex: 1; }
.toast-close {
  flex: none; border: 0; background: transparent; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--color-text); opacity: .5; padding: 0 2px;
}
.toast-close:hover { opacity: 1; }
.toast-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media print {
  .no-print { display: none !important; }
  .app-main { display: block; padding: 0; }
  .seq-table { font-size: 11px; }
  .seq-table td, .seq-table th { border-color: #999; }
  tr.row-werker { background: #f8cbad !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}