*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: system-ui, sans-serif;
  background: #f0f2f5;
  color: #222;
  margin: 0;
  padding: 1rem;
}

/* ── Page card ─────────────────────────────────────────────────────────── */

.container {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  padding: 2rem;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* Full-width card for the preview/grid page.
   Fills the entire body content area on every screen size;
   the 1 rem body padding + 2 rem container padding give enough breathing room.
   On small screens the editable-grid-wrapper still scrolls horizontally. */
.container-wide {
  max-width: none;
}

/* AP-F4c — wide layout for the manual column-mapping page only.
   The mapping table has many source columns and is read horizontally,
   so this page uses nearly the full browser width while textual boxes
   keep a readable max-width. Scoped to .container.manual-mapping-page so it
   reliably beats the generic `.container { max-width: 900px }` regardless of
   source order; other pages (standard preview, euro view, upload) keep their
   narrow card because they never carry the manual-mapping-page class. */
.container.manual-mapping-page {
  max-width: min(96vw, 1800px);
  width: 96vw;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* keep the upper informational/gate/review/confirm boxes readable */
.manual-mapping-page .manual-mapping-warning,
.manual-mapping-page > .notice,
.manual-mapping-page .manual-mapping-meta,
.manual-mapping-page .manual-mapping-gate,
.manual-mapping-page .manual-mapping-review,
.manual-mapping-page .manual-mapping-confirm,
.manual-mapping-page .manual-mapping-import-error {
  max-width: 1100px;
}

/* the mapping table itself uses the full wide working area */
.manual-mapping-grid-section--full {
  width: 100%;
}
.manual-mapping-grid-section--full .manual-mapping-grid-wrap {
  max-width: 100%;
  width: 100%;
}

@media (max-width: 640px) {
  .container.manual-mapping-page {
    width: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

h1 { font-size: 1.5rem; margin-top: 0; color: #1a2540; }
h2 { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: .6rem; color: #334; }

/* ── Notification banners ───────────────────────────────────────────────── */

.notice {
  background: #f0f4ff;
  border-left: 4px solid #4a6cf7;
  padding: .6rem 1rem;
  border-radius: 3px;
  font-size: .9rem;
  margin-bottom: 1.2rem;
}

/* error-box kept for result.html / index.html compatibility */
.error-box,
.error-message {
  background: #fff0f0;
  border-left: 4px solid #c0392b;
  padding: .65rem 1rem;
  border-radius: 3px;
  margin-bottom: 1rem;
  font-size: .9rem;
}

.warning-banner {
  background: #fffbe6;
  border-left: 4px solid #f0a000;
  padding: .7rem 1rem;
  border-radius: 3px;
  margin: 1rem 0;
}

/* AP18 – layout/header diagnostics for readable-but-unrecognised uploads.
   Native <details>, collapsed by default so it never dominates the screen. */
.layout-diagnostic {
  margin: -.5rem 0 1rem;
  font-size: .85rem;
  border-left: 4px solid #c0392b;
  background: #fff7f5;
  border-radius: 3px;
  padding: .5rem 1rem;
}

.layout-diagnostic > summary {
  cursor: pointer;
  font-weight: 600;
  color: #c0392b;
}

.layout-diagnostic-list {
  margin: .6rem 0 0;
}

.layout-diagnostic-list dt {
  font-weight: 600;
  margin-top: .5rem;
}

.layout-diagnostic-list dd {
  margin: .15rem 0 0;
}

.layout-diagnostic-list ul {
  margin: .15rem 0 0;
  padding-left: 1.2rem;
}

.layout-diagnostic-hint {
  margin: .8rem 0 0;
  font-style: italic;
  color: #555;
}

/* AP-E/AP21 data-shape diagnostic (purely informational, no import) */
.data-shape-diagnostic {
  margin: -.5rem 0 1rem;
  font-size: .85rem;
  border-left: 4px solid #e67e22;
  background: #fffaf3;
  border-radius: 3px;
  padding: .5rem 1rem;
}

.data-shape-heading {
  margin: .2rem 0 .4rem;
  font-size: 1rem;
  color: #b9690f;
}

.data-shape-patterns-heading,
.data-shape-suggestions-heading {
  font-weight: 600;
  margin: .7rem 0 .2rem;
}

.data-shape-patterns {
  margin: .15rem 0 0;
  padding-left: 1.2rem;
}

.data-shape-suggestions {
  border-collapse: collapse;
  margin: .2rem 0 0;
  width: 100%;
}

.data-shape-suggestions th,
.data-shape-suggestions td {
  border: 1px solid #e0c5a3;
  padding: .25rem .5rem;
  text-align: left;
  vertical-align: top;
}

.data-shape-note {
  margin: .5rem 0 0;
  font-style: italic;
  color: #555;
}

/* AP-S2 — new-layout-variant warning (no alias fix, no import) */
.data-shape-variant-note {
  font-style: normal;
  color: #8a4b00;
}

/* save-success kept for backward compat */
.save-success,
.success-message {
  background: #f0fff4;
  border-left: 4px solid #27ae60;
  padding: .65rem 1rem;
  border-radius: 3px;
  font-size: .9rem;
  margin-bottom: 1rem;
}

/* ── Upload form (index.html) ───────────────────────────────────────────── */

.form-group {
  margin-bottom: 1rem;
}

.form-group label:not(.dropzone) {
  display: block;
  margin-bottom: .3rem;
  font-weight: 600;
}

.form-group input[type="file"] {
  display: block;
  padding: .4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}

/* ── Drag & Drop Dropzone ───────────────────────────────────────────────── */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 2px dashed #a0aec0;
  border-radius: 6px;
  background: #f8faff;
  padding: 2rem 1.5rem;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
  min-height: 120px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: .75rem;
  font-weight: normal;
}

.dropzone:hover {
  border-color: #4a6cf7;
  background: #eef2ff;
}

.dropzone.dragover {
  border-color: #4a6cf7;
  background: #e8edff;
  box-shadow: 0 0 0 3px rgba(74,108,247,.18);
}

.dropzone-hint {
  display: block;
  font-size: .95rem;
  color: #556;
}

.dropzone-formats {
  display: block;
  font-size: .82rem;
  color: #889;
}

.dropzone-btn-label {
  display: inline-block;
  background: #4a6cf7;
  color: #fff;
  padding: .42rem 1.2rem;
  border-radius: 4px;
  font-size: .9rem;
  font-weight: 600;
  margin: .45rem 0 .2rem;
  cursor: pointer;
  transition: background .12s;
}

.dropzone:hover .dropzone-btn-label,
.dropzone.dragover .dropzone-btn-label {
  background: #3a5ce0;
}

.dropzone-file-name {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: #1a2540;
  margin-top: .25rem;
  word-break: break-all;
}

/* Bare submit button used in index.html upload form */
button[type="submit"] {
  background: #4a6cf7;
  color: #fff;
  border: none;
  padding: .55rem 1.3rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: .95rem;
  font-family: inherit;
}

button[type="submit"]:hover { background: #3a5ce0; }

/* ── Info / Issues tables ───────────────────────────────────────────────── */

.info-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 560px;
  margin-bottom: 1rem;
}

.info-table th, .info-table td {
  text-align: left;
  padding: .4rem .6rem;
  border-bottom: 1px solid #eee;
}

.info-table th {
  width: 40%;
  font-weight: 600;
  color: #555;
  font-size: .9rem;
}

.issues-table {
  border-collapse: collapse;
  width: 100%;
  font-size: .87rem;
  margin-bottom: 1rem;
}

.issues-table th {
  background: #f0f0f0;
  text-align: left;
  padding: .4rem .5rem;
  border-bottom: 2px solid #ccc;
}

.issues-table td {
  padding: .35rem .5rem;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}

.issue-error td  { background: #fff5f5; }
.issue-warning td{ background: #fffbf0; }
.issue-info td   { background: #f0faf4; }

.badge {
  display: inline-block;
  padding: .1rem .4rem;
  border-radius: 3px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.badge-error   { background: #fcc;     color: #800; }
.badge-warning { background: #ffe8a0;  color: #640; }
.badge-info    { background: #d0eaff;  color: #045; }
.badge-weight-correction { background: #d97706; color: #fff; }

.issue-weight-correction td { background: #fff3cd; }
.weight-correction-note     { color: #5a3e00; }

/* ── Download / result page ─────────────────────────────────────────────── */

.download-section { margin: 1.5rem 0; }

.download-btn {
  display: inline-block;
  background: #27ae60;
  color: #fff;
  padding: .7rem 1.6rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
}

.download-btn:hover { background: #1e8449; }

.btn-secondary {
  background: #888;
  color: #fff;
  border: none;
  padding: .55rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: .9rem;
  margin-left: .5rem;
}

.btn-secondary:hover { background: #666; }

/* ── Legacy table-scroll / container-table (kept for compat) ────────────── */

.table-scroll {
  overflow-x: auto;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.container-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  min-width: 1400px;
  font-size: .82rem;
}

.container-table th {
  background: #f0f4f8;
  text-align: left;
  padding: .45rem .55rem;
  border-bottom: 2px solid #c8d0da;
  border-right: 1px solid #dde3ea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .78rem;
  color: #445;
}

.container-table th:last-child,
.container-table td:last-child { border-right: none; }

.container-table td {
  padding: .38rem .55rem;
  border-bottom: 1px solid #eaeef2;
  border-right: 1px solid #eaeef2;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container-table tbody tr:hover td { background: #f0f7ff; }
.container-table tbody tr:nth-child(even) td { background: #f8fafc; }
.container-table tbody tr:nth-child(even):hover td { background: #e8f2ff; }
.container-table td.num-col { text-align: center; color: #888; font-size: .75rem; }

.product-hint { font-size: .78rem; color: #667; }

.export-section { margin: 1.5rem 0; }

.export-btn {
  display: inline-block;
  background: #27ae60;
  color: #fff;
  border: none;
  padding: .65rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 600;
}

.export-btn:hover { background: #1e8449; }

/* ── Editable grid ──────────────────────────────────────────────────────── */

.editable-grid-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 65vh;
  border: 1px solid #c8d0dc;
  border-radius: 4px;
  margin: .5rem 0 .75rem;
  background: #fff;
}

.editable-grid {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  min-width: 2064px;
  width: 100%;
  font-size: 13px;
  background: #fff;
}

/* ── Grid header ──────────────────────────────────────────────────────── */

.editable-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #e8eef5;
  text-align: left;
  padding: 6px 7px;
  border-bottom: 2px solid #aab8c8;
  border-right: 1px solid #c4cdd8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 600;
  color: #334;
  letter-spacing: .01em;
  cursor: default;
}

.editable-grid thead th:last-child { border-right: none; }

/* Read-only column headers get a subtle tint */
.editable-grid thead th.th-readonly {
  background: #dde4ec;
  color: #556;
  font-style: italic;
}

/* ── Grid body cells ──────────────────────────────────────────────────── */

.editable-grid tbody td {
  padding: 3px 4px;
  border-bottom: 1px solid #dde3eb;
  border-right: 1px solid #dde3eb;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  background: #fff;
}

.editable-grid tbody td:last-child { border-right: none; }

/* Zebra rows */
.editable-grid tbody tr:nth-child(even) td { background: #f6f8fb; }

/* Hover */
.editable-grid tbody tr:hover td { background: #edf4ff; }
.editable-grid tbody tr:hover td.cell-readonly,
.editable-grid tbody tr:hover td.product-preview-cell { background: #e5eefa; }

/* Row number column */
.editable-grid td.num-col {
  text-align: center;
  color: #8a96a6;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 2px;
}

/* ── Grid inputs ──────────────────────────────────────────────────────── */

.grid-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  padding: 3px 5px;
  font-size: 13px;
  font-family: inherit;
  min-height: 26px;
  line-height: 1.35;
  background: #fff;
  color: #222;
  transition: border-color .12s, box-shadow .12s;
}

.grid-input:hover {
  border-color: #94a3b8;
}

.grid-input:focus {
  outline: none;
  border-color: #4a6cf7;
  box-shadow: 0 0 0 2px rgba(74,108,247,.18);
  background: #f8f9ff;
}

/* Warning state for invalid size / container_type */
.grid-input-warning {
  background: #fff8f0;
  border-color: #e67e22;
}

.grid-input-warning:hover {
  border-color: #d35400;
}

.grid-input-warning:focus {
  outline: none;
  border-color: #d35400;
  box-shadow: 0 0 0 2px rgba(230, 126, 34, .22);
  background: #fff5e8;
}

/* Auto-corrected state for size / container_type */
.grid-input.grid-input-autocorrected {
  background: #d4f1de;
  border-color: #27ae60;
}

.grid-input.grid-input-autocorrected:hover {
  border-color: #1e8449;
  background: #c4ead0;
}

.grid-input.grid-input-autocorrected:focus {
  outline: none;
  border-color: #1e8449;
  box-shadow: 0 0 0 2px rgba(39, 174, 96, .28);
  background: #bde7cb;
}

/* Numeric inputs: right-aligned */
.grid-input-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Read-only cells (Wert, Produkte) ─────────────────────────────────── */

.cell-readonly {
  background: #f0f3f7 !important;
  color: #556;
  font-size: 12px;
  text-align: right;
  padding: 3px 8px !important;
}

.editable-grid tbody tr:nth-child(even) td.cell-readonly { background: #e9edf3 !important; }

.product-preview-cell {
  background: #f0f3f7 !important;
  padding: 3px 6px !important;
  cursor: default;
}

.editable-grid tbody tr:nth-child(even) td.product-preview-cell { background: #e9edf3 !important; }

.product-preview-text {
  display: block;
  font-size: 12px;
  color: #556;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Grid action bars ─────────────────────────────────────────────────── */

.grid-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .75rem 0 .5rem;
}

.grid-actions-bottom {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid #e8ecf2;
}

.grid-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.grid-legend {
  font-size: .82rem;
  color: #778;
  margin-left: auto;
  font-style: italic;
  padding: 3px 8px;
  background: #f4f6fa;
  border-radius: 3px;
  border: 1px solid #e0e4ed;
  white-space: nowrap;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

/* Base class — resets the global button[type="submit"] rule for styled buttons */
button.btn {
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
  display: inline-block;
}

/* btn used on anchor tags */
a.btn {
  display: inline-block;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
  text-decoration: none;
}

button.btn.btn-save,
a.btn.btn-save {
  background: #3a6aa0;
  color: #fff;
}
button.btn.btn-save:hover,
a.btn.btn-save:hover { background: #2a5688; }

button.btn.btn-save-export,
a.btn.btn-save-export {
  background: #27ae60;
  color: #fff;
}
button.btn.btn-save-export:hover,
a.btn.btn-save-export:hover { background: #1e8a4c; }

button.btn.btn-export,
a.btn.btn-export {
  background: #5a6680;
  color: #fff;
}
button.btn.btn-export:hover,
a.btn.btn-export:hover { background: #3e4d66; }

button.btn.btn-neutral,
a.btn.btn-neutral {
  background: #e4e8f0;
  color: #334;
}
button.btn.btn-neutral:hover,
a.btn.btn-neutral:hover { background: #ccd3e0; }

/* ── Export confirmation checkboxes ──────────────────────────────────────── */

.confirmation-section {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: .75rem 0 .5rem;
  padding: .7rem 1rem;
  background: #f8faff;
  border: 1px solid #dde4f0;
  border-radius: 4px;
  font-size: .9rem;
}

.confirmation-section label {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  color: #334;
}

.confirmation-section input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ── Language switcher ──────────────────────────────────────────────────── */

.lang-switcher {
  text-align: right;
  margin-bottom: .8rem;
  font-size: .85rem;
}

.lang-switcher a {
  color: #4a6cf7;
  text-decoration: none;
}

.lang-switcher a:hover {
  text-decoration: underline;
}

.lang-switcher a.lang-active {
  color: #222;
  font-weight: 600;
  pointer-events: none;
}

.lang-sep {
  margin: 0 .35rem;
  color: #aaa;
}

/* ── Missing required field (light amber, lower priority than warning/autocorrected) ── */

.grid-input-missing {
  background: #fffce8;
  border-color: #d4a520;
}

.grid-input-missing:hover {
  border-color: #b58c1a;
}

.grid-input-missing:focus {
  outline: none;
  border-color: #b58c1a;
  box-shadow: 0 0 0 2px rgba(212, 165, 32, .22);
  background: #fff8c0;
}

.cell-readonly.cell-missing { background: #fffce8 !important; }
.editable-grid tbody tr:nth-child(even) td.cell-readonly.cell-missing { background: #fff6b0 !important; }
.product-preview-cell.cell-missing { background: #fffce8 !important; }
.editable-grid tbody tr:nth-child(even) td.product-preview-cell.cell-missing { background: #fff6b0 !important; }

/* ── Email template page ──────────────────────────────────────────────────── */

.email-template-container {
  max-width: min(1200px, 96vw);
  margin: 0 auto;
  background: #fff;
  padding: 2rem;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.email-template-container .info-table {
  max-width: 100%;
}

.email-template-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  margin: .75rem 0 .4rem;
}

.email-body-label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .4rem;
  color: #334;
}

.email-body-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 65vh;
  resize: vertical;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  padding: .7rem .9rem;
  border: 1px solid #c8d0dc;
  border-radius: 4px;
  background: #fafbfc;
  color: #222;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.email-template-back {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

/* --- EUR preview (AP3, web-only additive block) --------------------------- */
.eur-preview {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid #c8d0dc;
}

.eur-preview-note {
  margin: .75rem 0 1rem;
  padding: .7rem .9rem;
  background: #eef4ff;
  border: 1px solid #b9cdf2;
  border-radius: 4px;
  color: #1f3a63;
  font-size: 14px;
}

.eur-rate-warnings {
  margin: 0;
  padding-left: 1.1rem;
}

/* AP8: compact, visually distinct rate card sitting top/right of the EUR area.
   Shows exactly the session rate set used by the EUR grid and EUR export. Scoped
   to the EUR view (.eur-preview) so the standard view is never affected. */
.eur-preview .eur-rate-card {
  float: right;
  width: 320px;
  max-width: 100%;
  margin: 0 0 1rem 1.25rem;
  padding: .8rem 1rem;
  background: #f3f8f4;
  border: 1px solid #b8d8c2;
  border-left: 4px solid #14823d;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  font-size: 13px;
  color: #233;
}

.eur-preview .eur-rate-card__title {
  font-size: 14px;
  font-weight: 700;
  color: #14532d;
  margin-bottom: .25rem;
}

.eur-preview .eur-rate-card__note {
  margin: 0 0 .6rem;
  font-size: 12px;
  color: #4a5a4f;
}

/* AP11: clarify that RMB/¥ reuse the CNY rate (no separate RMB rate). */
.eur-preview .eur-rate-card__cny-note {
  margin: 0 0 .6rem;
  font-size: 12px;
  color: #4a5a4f;
  font-style: italic;
}

.eur-preview .eur-rate-card__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px .6rem;
  margin: 0 0 .6rem;
}

.eur-preview .eur-rate-card__meta dt {
  font-weight: 600;
  color: #556;
}

.eur-preview .eur-rate-card__meta dd {
  margin: 0;
  text-align: right;
  word-break: break-word;
}

.eur-preview .eur-rate-card__mode {
  font-weight: 700;
}

.eur-preview .eur-rate-card__mode--fallback { color: #b45309; }
.eur-preview .eur-rate-card__mode--manual   { color: #1e3a8a; }
.eur-preview .eur-rate-card__mode--online   { color: #14823d; }

.eur-preview .eur-rate-card__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 .5rem;
  font-variant-numeric: tabular-nums;
}

.eur-preview .eur-rate-card__table th,
.eur-preview .eur-rate-card__table td {
  padding: 3px 6px;
  border-bottom: 1px solid #d4e4d9;
  font-size: 13px;
}

.eur-preview .eur-rate-card__table th {
  text-align: left;
  font-weight: 600;
  color: #334;
}

.eur-preview .eur-rate-card__table td {
  text-align: right;
  font-weight: 600;
  color: #14532d;
}

.eur-preview .eur-rate-card__missing {
  color: #b45309;
  font-weight: 600;
  font-size: 12px;
}

.eur-preview .eur-rate-card__manual {
  margin: .4rem 0 0;
  padding: .35rem .55rem;
  background: #e3f0ff;
  border: 1px solid #9cc3f5;
  border-radius: 3px;
  color: #1e3a8a;
  font-weight: 700;
  font-size: 12px;
}

.eur-preview .eur-rate-card__warning {
  margin: .4rem 0 0;
  padding: .35rem .55rem;
  background: #fff3cd;
  border: 1px solid #e6c34a;
  border-radius: 3px;
  color: #6b4e00;
  font-weight: 600;
  font-size: 12px;
}

.eur-preview .eur-rate-card__warnings {
  margin: .5rem 0 0;
  font-size: 12px;
  color: #5a4a2a;
}

.eur-preview .eur-rate-card__warnings-label {
  font-weight: 700;
}

.eur-preview .eur-rate-card__warning-list {
  margin: .2rem 0 0;
  padding-left: 1.1rem;
}

/* Ensure the editable EUR grid always starts below the floated rate card. */
.eur-preview .editable-grid-wrapper {
  clear: both;
}

.eur-container-table,
.eur-issues-table {
  width: 100%;
  border-collapse: collapse;
  margin: .75rem 0 1.25rem;
}

.eur-container-table th,
.eur-container-table td {
  border: 1px solid #d6dce6;
  padding: .4rem .6rem;
  text-align: left;
  font-size: 14px;
}

.eur-container-table tr.eur-status-partial td {
  background: #fff7e6;
}

.eur-container-table tr.eur-status-not_computable td {
  background: #fdecea;
}

/* AP6: EUR container overview reuses the standard editable-grid look as a
   read-only grid so the EUR view mirrors the standard work view. */
.eur-grid tbody tr.eur-status-partial td {
  background: #fff7e6;
}
.eur-grid tbody tr.eur-status-not_computable td {
  background: #fdecea;
}
.eur-grid .eur-cell-currency,
.eur-grid .eur-cell-value {
  font-weight: 600;
  color: #14532d;
}
/* AP7b: the *effective* EUR amount (override if set, otherwise the auto value
   for the current rate set) shown as visible read-only text above the editable
   override input. This makes a rate change visibly update the auto-computed
   figure in the grid instead of only refreshing the input's faint placeholder.
   Scoped to .eur-grid so the standard grid is never affected. */
.eur-grid .eur-value-effective {
  display: block;
  font-weight: 600;
  color: #14532d;
  margin-bottom: 2px;
}
.eur-grid td.eur-cell-value.eur-value-manual .eur-value-effective {
  color: #1e3a8a;
}
.eur-grid .eur-cell-status {
  color: #3a4658;
  font-size: 13px;
}

/* AP7: a manually overridden EUR value (override wins over the auto value).
   Marked with a distinct blue accent so it is clearly recognisable as a manual
   correction, both on the editable input and in the status hint. Scoped to
   .eur-grid so the standard grid is never affected. */
.eur-grid input.eur-value-input.eur-value-manual {
  background: #e3f0ff;
  box-shadow: inset 0 0 0 2px #2563eb;
  font-weight: 600;
  color: #1e3a8a;
}
.eur-grid td.eur-cell-value.eur-value-manual {
  border-left: 4px solid #2563eb;
}
.eur-grid .eur-cell-status span.eur-value-manual {
  color: #1e3a8a;
  font-weight: 600;
}

/* Read-only cell marking mirroring the standard grid's
   missing / invalid (warning) / auto-corrected colour coding.
   The read-only EUR grid has no editable inputs, so a pale fill alone is too
   subtle and gets washed out by the zebra striping. We therefore add a strong
   inset shadow plus a coloured left border, the same marking on every row
   (no weaker even-row variant), scoped strictly to .eur-grid so the standard
   grid stays untouched. The high-specificity selectors win over .cell-readonly
   and the nth-child(even) zebra rules above. */
.eur-grid td.cell-readonly.eur-cell-missing,
.eur-grid tbody tr:nth-child(even) td.cell-readonly.eur-cell-missing,
.eur-grid td.product-preview-cell.eur-cell-missing,
.eur-grid tbody tr:nth-child(even) td.product-preview-cell.eur-cell-missing {
  background: #fff3b0 !important;
  box-shadow: inset 0 0 0 2px #d4a520 !important;
  border-left: 4px solid #d4a520 !important;
}
.eur-grid td.cell-readonly.eur-cell-warning,
.eur-grid tbody tr:nth-child(even) td.cell-readonly.eur-cell-warning,
.eur-grid td.product-preview-cell.eur-cell-warning,
.eur-grid tbody tr:nth-child(even) td.product-preview-cell.eur-cell-warning {
  background: #ffe1bd !important;
  box-shadow: inset 0 0 0 2px #e67e22 !important;
  border-left: 4px solid #e67e22 !important;
  color: #6b3500 !important;
}
.eur-grid td.cell-readonly.eur-cell-autocorrected,
.eur-grid tbody tr:nth-child(even) td.cell-readonly.eur-cell-autocorrected,
.eur-grid td.product-preview-cell.eur-cell-autocorrected,
.eur-grid tbody tr:nth-child(even) td.product-preview-cell.eur-cell-autocorrected {
  background: #c8f0d2 !important;
  box-shadow: inset 0 0 0 2px #27ae60 !important;
  border-left: 4px solid #27ae60 !important;
  color: #14532d !important;
}

.eur-issue-code {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Consolas, monospace;
  font-size: 13px;
}

.eur-no-issues {
  color: #5a6473;
  font-style: italic;
}

/* AP5 preview view tabs (standard / EUR toggle) */
.view-tabs {
  display: flex;
  gap: .4rem;
  border-bottom: 3px solid #1a73e8;
  margin: 0 0 1.5rem;
}

.view-tab {
  display: inline-block;
  min-width: 180px;
  padding: .9rem 1.8rem;
  border: 1px solid #c2cbd9;
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: #eef2f8;
  color: #2a3142;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  margin-bottom: -3px;
}

.view-tab:hover {
  background: #e1e8f3;
}

.view-tab--active {
  background: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
}

/* Server marks one panel active; without JS the tab links re-render server-side. */
.view-panel {
  display: none;
}

.view-panel--active {
  display: block;
}

/* AP13: EUR-view polish ---------------------------------------------------- */

/* Issues/warnings collapsed by default in the EUR view. The native <details>
   keeps all content in the DOM; only the standard view shows them expanded. */
.eur-issues-details {
  margin: .5rem 0 1rem;
}

.eur-issues-summary {
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  color: #14532d;
  padding: .35rem .1rem;
  user-select: none;
}

.eur-issues-summary:hover {
  color: #0f3d22;
}

.eur-issues-details[open] > .eur-issues-summary {
  margin-bottom: .4rem;
}

/* Compact manual rate-adjustment block: a tight, non-full-width card that
   visually echoes the rate card on the right. Field labels sit close to their
   inputs and the submit button trails directly after. */
.eur-rate-adjust {
  display: inline-block;
  max-width: 360px;
  margin: .5rem 0 1.25rem;
  padding: .6rem .75rem;
  background: #f5f8f4;
  border: 1px solid #d8e3d6;
  border-radius: 6px;
}

.eur-rate-adjust__heading {
  margin: 0 0 .5rem;
  font-size: 1rem;
}

.eur-rate-form--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem .75rem;
}

.eur-rate-form--compact .eur-rate-form__fields {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}

.eur-rate-form--compact .eur-rate-field {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  font-size: .9rem;
}

.eur-rate-form--compact .eur-rate-field__label {
  white-space: nowrap;
  color: #3a4658;
}

.eur-rate-form--compact .eur-rate-field input {
  width: 5.5rem;
  margin: 0;
}

.eur-rate-form--compact .eur-rate-form__submit {
  margin: 0;
}

/* AP-F2 – manual mapping draft page (web-only, no import) */
.manual-mapping-entry {
  margin: .75rem 0 0;
}

.manual-mapping-warning {
  border: 1px solid #c79100;
  background: #fff8e1;
  color: #5f4b00;
  padding: .6rem .8rem;
  border-radius: 4px;
  margin: 0 0 .75rem;
}

.manual-mapping-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .2rem .75rem;
  margin: .75rem 0;
}

.manual-mapping-meta dt {
  font-weight: 600;
  color: #3a4658;
}

.manual-mapping-meta dd {
  margin: 0;
}

.manual-mapping-gate {
  border-radius: 4px;
  padding: .6rem .8rem;
  margin: .75rem 0;
}

.manual-mapping-gate--blocked {
  border: 1px solid #c62828;
  background: #fdecea;
}

.manual-mapping-gate--ok {
  border: 1px solid #2e7d32;
  background: #ebf5ec;
}

.manual-mapping-issues {
  margin: .35rem 0 0;
  padding-left: 1.2rem;
}

.manual-mapping-issue-field,
.manual-mapping-issue-col {
  color: #555;
  font-size: .85rem;
}

.manual-mapping-col-index {
  display: inline-block;
  min-width: 1.4rem;
  font-weight: 600;
  color: #3a4658;
}

.manual-mapping-required {
  color: #c62828;
  font-weight: 700;
}

/* AP-F4b — combined table-style manual mapping grid */
.manual-mapping-grid-intro {
  margin: .25rem 0 .75rem;
}

.manual-mapping-preview-cap {
  margin: .25rem 0 .75rem;
  border-left: 4px solid #2f6fbf;
  background: #eef4fc;
  padding: .5rem .75rem;
  font-weight: 600;
}

.manual-mapping-grid-wrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid #d6dbe2;
}

.manual-mapping-grid {
  border-collapse: collapse;
  font-size: .8rem;
}

.manual-mapping-grid th,
.manual-mapping-grid td {
  border: 1px solid #d6dbe2;
  padding: .25rem .4rem;
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}

/* first row: the assignment selects, visually set apart from the data */
.manual-mapping-assign-row th {
  background: #eef3fb;
  position: sticky;
  top: 0;
  z-index: 2;
}

.manual-mapping-col-select {
  min-width: 12rem;
  max-width: 18rem;
  font-size: .8rem;
}

/* AP-F7 — assisted pre-selection traffic-light hints (scoped to the manual
   mapping page so the standard/EUR previews are never affected). */
.manual-mapping-page .manual-mapping-hint-legend {
  font-size: .85rem;
  color: #5a6577;
  margin: .25rem 0 .75rem;
}

.manual-mapping-page .manual-mapping-hint {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .35rem;
}

.manual-mapping-page .manual-mapping-hint-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  padding: .2rem .4rem;
  border-radius: .25rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.manual-mapping-page .manual-mapping-hint-badge--green {
  background: #e3f7e8;
  color: #1d6b32;
  border-color: #9bd6ab;
}

.manual-mapping-page .manual-mapping-hint-badge--yellow {
  background: #fdf3d6;
  color: #8a6300;
  border-color: #e6cf85;
}

.manual-mapping-page .manual-mapping-hint-badge--red {
  background: #fae3e3;
  color: #962020;
  border-color: #e0a3a3;
}

.manual-mapping-page .manual-mapping-hint-reason {
  font-size: .7rem;
  color: #5a6577;
}

.manual-mapping-page .manual-mapping-hint-cell--green {
  border-top: 3px solid #4caf6a;
}

.manual-mapping-page .manual-mapping-hint-cell--yellow {
  border-top: 3px solid #e0b53c;
}

.manual-mapping-page .manual-mapping-hint-cell--red {
  border-top: 3px solid #d77;
}

/* Pflichtfelder-Status — kompakte Ziel-/Pflichtfeld-Badge-Leiste oberhalb der
   Mapping-Tabelle. Reine Bedienhilfe; bewusst getrennt vom Quellspalten-
   Ampelsystem (.manual-mapping-hint-badge) und auf die Seite gescoped. */
.manual-mapping-page .manual-mapping-required-status {
  margin: .5rem 0 1rem;
  padding: .6rem .8rem;
  background: #f7f8fa;
  border: 1px solid #d9dee6;
  border-radius: .35rem;
}

.manual-mapping-page .manual-mapping-required-status-heading {
  margin: 0 0 .4rem;
  font-size: .9rem;
  color: #3a4658;
}

.manual-mapping-page .manual-mapping-required-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
}

.manual-mapping-page .manual-mapping-required-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  padding: .25rem .5rem;
  border-radius: .8rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.manual-mapping-page .manual-mapping-required-badge-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.manual-mapping-page .manual-mapping-required-badge--assigned {
  background: #e3f7e8;
  color: #1d6b32;
  border-color: #9bd6ab;
}

.manual-mapping-page .manual-mapping-required-badge--assigned .manual-mapping-required-badge-dot {
  background: #4caf6a;
}

.manual-mapping-page .manual-mapping-required-badge--missing {
  background: #fae3e3;
  color: #962020;
  border-color: #e0a3a3;
}

.manual-mapping-page .manual-mapping-required-badge--missing .manual-mapping-required-badge-dot {
  background: #d24a4a;
}

.manual-mapping-page .manual-mapping-required-status-note {
  margin: .5rem 0 0;
  font-size: .8rem;
  color: #5a6577;
}

/* second row: the original source headers */
.manual-mapping-header-row th {
  background: #f5f6f8;
  font-weight: 600;
  color: #3a4658;
}

.manual-mapping-grid tbody td {
  font-weight: 400;
}

/* AP-F4d — visually cap long raw data cells (shipper/seller/address blocks)
   so a single huge cell can no longer blow a column's width out and make the
   table horizontally unusable. Pure display limit: the full value stays in the
   DOM and in the cell's title tooltip; nothing is shortened for review/import/
   export. Scoped to the manual-mapping grid's data cells, so the assignment
   selects, source-header row and the standard/EUR previews are untouched. */
.manual-mapping-grid tbody td.manual-mapping-data-cell {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manual-mapping-required-hint {
  margin: .5rem 0;
  font-size: .85rem;
  color: #5a6577;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.manual-mapping-back {
  margin-top: 1rem;
}

/* AP-F4 — manual mapping import confirmation + manual-import preview marking */
.manual-mapping-confirm {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid #b58900;
  border-left: 4px solid #b58900;
  background: #fff8e6;
  border-radius: 4px;
}
.manual-mapping-confirm-explain {
  margin: 0.25rem 0 0.75rem;
}
.manual-mapping-confirm-checkbox {
  display: block;
  margin-bottom: 0.75rem;
}
.manual-mapping-import-error {
  margin: 1rem 0;
}
.manual-import-banner {
  margin: 0 0 1rem;
  padding: 0.6rem 1rem;
  border: 1px solid #2563a8;
  border-left: 4px solid #2563a8;
  background: #eaf2fb;
  border-radius: 4px;
  font-weight: 600;
}
.manual-export-disabled {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid #999;
  background: #f2f2f2;
  border-radius: 4px;
  color: #444;
}

/* AP-F5a — compact manual-mapping origin / traceability block */
.manual-audit {
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #c4d4ea;
  border-left: 4px solid #2563a8;
  background: #f6faff;
  border-radius: 4px;
  font-size: 0.9rem;
}
.manual-audit > summary {
  cursor: pointer;
  font-weight: 600;
}
.manual-audit-intro {
  margin: 0.4rem 0;
  color: #444;
}
.manual-audit-meta {
  margin: 0.3rem 0 0.6rem;
  padding-left: 1.1rem;
}
.manual-audit-table {
  width: auto;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.manual-audit-table th,
.manual-audit-table td {
  border: 1px solid #d2ddec;
  padding: 0.2rem 0.5rem;
  text-align: left;
}
.manual-audit-table th {
  background: #eaf2fb;
}

/* AP-F5a — extra manual-mapping export confirmation checkbox */
.confirmation-section label.confirm-manual-mapping {
  font-weight: 600;
}

/* AP-F8 — compact manual review summary + collapsed full-detail block.
   Pure UI: keeps the confirm-import box and mapping table reachable instead of
   being pushed down by a fully expanded container/position listing. */
.manual-mapping-page .manual-mapping-review-summary-box {
  margin: 0.75rem 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid #d2ddec;
  border-left: 4px solid #2563a8;
  background: #f4f8fd;
  border-radius: 4px;
}
.manual-mapping-page .manual-mapping-review-summary-heading {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.manual-mapping-page .manual-mapping-review-summary {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.15rem 1rem;
  margin: 0;
}
.manual-mapping-page .manual-mapping-review-summary dt {
  font-weight: 600;
}
.manual-mapping-page .manual-mapping-review-summary dd {
  margin: 0;
}
.manual-mapping-page .manual-mapping-review-details {
  margin: 0.75rem 0;
  border: 1px solid #d2ddec;
  border-radius: 4px;
  background: #fafcff;
}
.manual-mapping-page .manual-mapping-review-details-toggle {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
}
.manual-mapping-page .manual-mapping-review-details-note {
  padding: 0 0.75rem;
}
.manual-mapping-page .manual-mapping-review-details > .manual-mapping-review-container {
  margin: 0 0.75rem 0.75rem;
}

/* AP-C3c — AEI diagnostics transparency block (scoped, read-only) */
.aei-diagnostics {
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d8c7a0;
  border-left: 4px solid #b8860b;
  background: #fdfaf2;
  border-radius: 4px;
  font-size: 0.9rem;
}
.aei-diagnostics__summary {
  cursor: pointer;
  font-weight: 600;
  color: #7a5a00;
}
.aei-diagnostics__intro {
  margin: 0.4rem 0;
  font-weight: 600;
  color: #444;
}
.aei-diagnostics__points {
  margin: 0.3rem 0 0.6rem;
  padding-left: 1.1rem;
  color: #444;
}
.aei-diagnostics__points li {
  margin: 0.15rem 0;
}
.aei-diagnostics__counts {
  margin: 0.3rem 0 0.6rem;
  padding-left: 1.1rem;
}
.aei-diagnostics__table-wrap {
  margin: 0.4rem 0 0.2rem;
}
.aei-diagnostics__table-toggle {
  cursor: pointer;
  font-weight: 600;
  color: #7a5a00;
}
.aei-diagnostics__table {
  width: auto;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 0.5rem 0 0.3rem;
}
.aei-diagnostics__table th,
.aei-diagnostics__table td {
  border: 1px solid #e2d6b8;
  padding: 0.2rem 0.5rem;
  text-align: left;
}
.aei-diagnostics__table th {
  background: #f6efdc;
}
.aei-diagnostics__table-note {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: #666;
}