/* ============================================
   Edivera — Enterprise Design v4
   (v3 war ein Glassmorphism/Glow-Look; v4 reduziert Verlaeufe und
   Leucht-Effekte zugunsten eines ruhigeren, etablierten SaaS-Looks -
   siehe Farbvariablen unten.)
   ============================================ */

:root {
  /* Akzentfarbe an das Edivera-Logo angeglichen (kraeftiges Kobaltblau
     statt des fruehreren tuerkisfarbenen Cyan) - die Variable heisst
     weiterhin "--cyan" aus Kompatibilitaetsgruenden (24 Verwendungen im
     Stylesheet), der Farbwert selbst ist jetzt Logo-Blau. */
  --blue-deep:    #0a1628;
  --blue-mid:     #162d5a;
  --blue-bright:  #2563eb;
  --blue-light:   #4fa8e8;
  --cyan:         #2f7dff;
  --cyan-glow:    rgba(47,125,255,0.35);
  --cyan-soft:    rgba(47,125,255,0.12);
  --white:        #ffffff;
  --white-dim:    rgba(255,255,255,0.70);
  --white-faint:  rgba(255,255,255,0.08);
  --white-border: rgba(255,255,255,0.14);

  --color-error:        #ff6b7a;
  --color-error-soft:   rgba(255,107,122,0.13);
  --color-warning:      #ffc46b;
  --color-warning-soft: rgba(255,196,107,0.13);
  --color-success:      #4dffa6;
  --color-success-soft: rgba(77,255,166,0.10);
  --color-info:         #7eb8ff;
  --color-info-soft:    rgba(126,184,255,0.13);

  --type-orders: #7eb8ff;
  --type-ordrsp: #5ef0d0;
  --type-desadv: #ffb07e;
  --type-invoic: #e87eff;
  --type-xrechnung: #ffd166;
  --type-zugferd: #ff8fa3;
  --type-peppol: #06d6a0;
  --type-generic: #b8b8ff;

  --font-display: "Space Grotesk", "Helvetica Neue", sans-serif;
  --font-body:    "Inter", "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --max-width: 980px;

  --glass:        rgba(255,255,255,0.07);
  --glass-strong: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.14);
  --glass-shadow: 0 8px 40px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.1);
}

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

body {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.6;
  color: var(--white);
  background: var(--blue-deep);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- Hintergrund ----
   v4: keine schwebenden Glow-Orbs mehr (typisches "KI-generiertes SaaS"-
   Merkmal) - stattdessen ein ruhiger, statischer Flaechenton mit sehr
   feiner Gitter-Textur, wie bei etablierten Enterprise-Dashboards. */

.bg-canvas {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: var(--blue-deep);
}

.bg-orb { display: none; }

/* ---- Feine Gitter-Textur ---- */
.bg-canvas::after {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---- Page-Wrapper ---- */
.page {
  position: relative; z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 80px;
  animation: page-fade 0.55s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes page-fade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Topbar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0 32px;
  border-bottom: 1px solid var(--white-border);
  margin-bottom: 44px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }

/* Logo-Mark (backend/static/logo-mark.svg) - dieselbe gefaltete "E"-Form
   und derselbe Blauverlauf wie im Edivera-Logo, statt des fruehreren
   Text-Kuerzels "EV" in einer eckigen Box. */
.brand-mark {
  width: 34px; height: 34px;
  background-image: url("logo-mark.svg");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 2px 6px rgba(47,125,255,0.25));
  transition: filter 0.2s;
}

.brand:hover .brand-mark {
  filter: drop-shadow(0 2px 10px rgba(47,125,255,0.45));
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 17px; color: var(--white);
}

/* Zweifarbige Wortmarke wie im Logo: "Edi" weiss, "vera" in Markenblau. */
.brand-name .wm-vera { color: var(--cyan); }

/* ---- User-Menu mit animierten Links ---- */
.user-menu {
  display: flex; align-items: center; gap: 20px;
  font-size: 13.5px;
}

.user-menu span { color: var(--white-dim); }

.user-menu a {
  position: relative;
  color: var(--white-dim);
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 2px;
  transition: color 0.2s;
}

.user-menu a::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: linear-gradient(90deg, var(--cyan), var(--blue-light));
  transition: width 0.25s cubic-bezier(0.34,1.56,0.64,1);
  border-radius: 2px;
}

.user-menu a:hover { color: var(--white); }
.user-menu a:hover::after { width: 100%; }

/* ---- Hero ---- */
.hero { margin-bottom: 44px; }

.hero h1 {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.15;
  margin-bottom: 14px;
}

.accent-text {
  color: var(--cyan);
}

.hero p { color: var(--white-dim); font-size: 16px; max-width: 560px; }

/* ---- Karte ----
   v4: deutlich weniger Weichzeichnung (8px statt 24px) und ein neutraler,
   dunkler Schatten statt eines farbigen Glow-Schattens - wirkt naeher an
   einem etablierten Dashboard-Produkt als an einem Glow-Glassmorphism-Demo. */
.glass-card, .upload-card {
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  transition: border-color 0.2s;
}

.upload-card { padding: 40px; }

/* ---- Dropzone ---- */
.dropzone {
  border: 1.5px dashed rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
  padding: 48px 24px; text-align: center;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}

.dropzone:hover { border-color: rgba(0,212,255,0.4); background: var(--cyan-soft); }
.dropzone.is-dragover { border-color: var(--cyan); background: var(--cyan-soft); }

.dropzone-icon {
  display: inline-flex;
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--cyan);
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.22);
  border-radius: var(--radius-sm);
  padding: 7px 14px; margin-bottom: 18px;
  transition: background 0.2s;
}

.dropzone-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.dropzone-hint  { color: var(--white-dim); font-size: 14px; margin-bottom: 22px; }
.file-name-display { margin-top: 14px; font-family: var(--font-mono); font-size: 13px; color: var(--cyan); min-height: 18px; }

/* ---- Primär-Button ----
   v4: ein einziger Markenton statt Regenbogen-Verlauf, kein Shimmer-
   Sweep und kein pulsierender Glow-Ring - ein ruhiger Hover-Zustand
   (dezent dunkler + minimaler Lift) wie bei etablierten SaaS-Produkten. */
.btn-primary {
  background: var(--blue-bright);
  color: var(--white);
  border: none;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
  padding: 13px 32px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: background 0.15s ease, transform 0.1s ease;
  letter-spacing: 0.01em;
}

.btn-primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.btn-primary:active  { transform: translateY(0); }
.btn-primary:disabled {
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.3);
  box-shadow: none; cursor: not-allowed; transform: none;
}

/* ---- Secondary-Button ---- */
.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--white);
  border: 1px solid var(--white-border);
  font-family: var(--font-body); font-size: 14.5px; font-weight: 500;
  padding: 12px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.28);
}

/* ---- File-Input Label ---- */
.file-input-label {
  display: inline-block; cursor: pointer;
  background: var(--glass-strong);
  border: 1px solid var(--white-border);
  color: var(--white);
  font-size: 14px; font-weight: 500;
  padding: 10px 22px;
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.file-input-label:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(0,212,255,0.4);
  box-shadow: 0 4px 16px rgba(0,212,255,0.18);
  transform: translateY(-1px);
}

input[type="file"] { display: none; }

.submit-row { display: flex; justify-content: flex-end; margin-top: 28px; gap: 12px; }

/* ---- Skip-Link (Barrierefreiheit) ---- */
.skip-link {
  position: absolute; top: -48px; left: 12px; z-index: 1000;
  background: var(--blue-deep); color: var(--white);
  border: 2px solid var(--cyan); border-radius: var(--radius-sm);
  padding: 10px 18px; font-size: 14px; font-weight: 600;
  text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ---- Fokus-Sichtbarkeit (WCAG 2.2 – 2px Kontur, klar erkennbar) ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Flash-Meldungen (zentral in base.html gerendert) ---- */
.flash-stack {
  position: sticky; top: 0; z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 24px 0; max-width: var(--max-width); margin: 0 auto;
}
.flash {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--color-error-soft);
  color: var(--color-error);
  border: 1px solid rgba(255,107,122,0.25);
  padding: 12px 14px 12px 16px; border-radius: var(--radius-md);
  font-size: 14px; line-height: 1.4;
  animation: flash-in 0.3s cubic-bezier(0.16,1,0.3,1) both;
  backdrop-filter: blur(8px);
}
.flash-icon {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.14); color: inherit;
}
.flash-text { flex: 1; }
.flash-close {
  flex-shrink: 0; background: none; border: none; color: inherit;
  font-size: 18px; line-height: 1; cursor: pointer; opacity: 0.6;
  padding: 0 2px;
}
.flash-close:hover { opacity: 1; }

.flash-success { background: var(--color-success-soft); color: var(--color-success); border-color: rgba(77,255,166,0.25); }
.flash-error   { background: var(--color-error-soft);   color: var(--color-error);   border-color: rgba(255,107,122,0.25); }
.flash-warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: rgba(255,196,107,0.25); }
.flash-info    { background: var(--color-info-soft);    color: var(--color-info);    border-color: rgba(126,184,255,0.25); }

@keyframes flash-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Passwort-Übereinstimmung (Live-Feedback) ---- */
.field-hint { font-size: 12.5px; margin-top: 4px; min-height: 16px; }
.field-hint.is-ok    { color: var(--color-success); }
.field-hint.is-error { color: var(--color-error); }

/* ---- Tabs mit Slide-Indikator ---- */
.tabs {
  display: flex; gap: 2px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--white-border);
  border-radius: 999px; padding: 4px;
  width: fit-content; margin-bottom: 20px;
  backdrop-filter: blur(8px);
  position: relative;
}

.tab-btn {
  border: none; background: transparent;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  color: var(--white-dim);
  padding: 8px 22px; border-radius: 999px; cursor: pointer;
  transition: color 0.2s;
  position: relative; z-index: 1;
}

.tab-btn.is-active { color: var(--white); font-weight: 600; }

.tab-btn::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0,212,255,0.18), rgba(37,99,235,0.2));
  border: 1px solid rgba(0,212,255,0.25);
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  z-index: -1;
}

.tab-btn.is-active::before { opacity: 1; transform: scale(1); }
.tab-btn:hover:not(.is-active) { color: rgba(255,255,255,0.8); }

/* ---- Format-Badges ---- */
.format-note {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--white-border);
  font-size: 13px; color: var(--white-dim);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

.format-badges { display: flex; gap: 8px; flex-wrap: wrap; }

.type-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; border: 1px solid;
  letter-spacing: 0.02em;
}

.type-badge.type-orders { color: var(--type-orders); border-color: rgba(126,184,255,0.3); background: rgba(126,184,255,0.08); }
.type-badge.type-ordrsp { color: var(--type-ordrsp); border-color: rgba(94,240,208,0.3); background: rgba(94,240,208,0.08); }
.type-badge.type-desadv { color: var(--type-desadv); border-color: rgba(255,176,126,0.3); background: rgba(255,176,126,0.08); }
.type-badge.type-invoic { color: var(--type-invoic); border-color: rgba(232,126,255,0.3); background: rgba(232,126,255,0.08); }
.type-badge.type-unknown { color: var(--white-dim); border-color: var(--white-border); background: var(--white-faint); }
.type-badge.type-xrechnung_ubl, .type-badge.type-xrechnung_cii { color: var(--type-xrechnung); border-color: rgba(255,209,102,0.3); background: rgba(255,209,102,0.08); }
.type-badge.type-zugferd_facturx { color: var(--type-zugferd); border-color: rgba(255,143,163,0.3); background: rgba(255,143,163,0.08); }
.type-badge.type-peppol_bis { color: var(--type-peppol); border-color: rgba(6,214,160,0.3); background: rgba(6,214,160,0.08); }
.type-badge.type-ubl_generic, .type-badge.type-cii_generic { color: var(--type-generic); border-color: rgba(184,184,255,0.3); background: rgba(184,184,255,0.08); }
.type-badge.type-batch { color: var(--white-dim); border-color: var(--white-border); background: var(--white-faint); }
.type-badge.type-custom { color: var(--cyan); border-color: var(--cyan-soft); background: var(--cyan-glow); }

/* ---- Ergebnis-Header ---- */
.results-header { margin-bottom: 32px; }
.results-header .filename { font-family: var(--font-mono); font-size: 13px; color: var(--white-dim); margin-bottom: 6px; }
.results-header h1 { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.meta-line { color: var(--white-dim); font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Summary-Grid ---- */
.summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 36px; }

.summary-card {
  background: var(--glass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  animation: card-in 0.45s cubic-bezier(0.16,1,0.3,1) both;
  transition: transform 0.2s, box-shadow 0.2s;
}

.summary-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.summary-card:nth-child(2) { animation-delay: 0.07s; }
.summary-card:nth-child(3) { animation-delay: 0.14s; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.summary-card .num  { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1; }
.summary-card .label { font-size: 13px; color: var(--white-dim); margin-top: 7px; }
.summary-card.is-error .num   { color: var(--color-error); }
.summary-card.is-warning .num { color: var(--color-warning); }
.summary-card.is-ok .num      { color: var(--color-success); }

/* ---- Automatische Korrektur (Autofix-Angebot) ---- */
.autofix-banner {
  background: var(--color-success-soft);
  border: 1px solid rgba(77,255,166,0.35);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 28px;
  animation: card-in 0.45s cubic-bezier(0.16,1,0.3,1) both;
}
.autofix-banner h2 {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  color: var(--color-success); margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.autofix-banner p { font-size: 13px; color: var(--white-dim); margin-bottom: 10px; }
.autofix-banner ul { margin: 0 0 14px 0; padding-left: 20px; }
.autofix-banner li { font-size: 13px; color: var(--white-dim); margin-bottom: 4px; }
.autofix-banner .btn-primary { text-decoration: none; display: inline-block; }

/* ---- Sektionen & Tabellen ---- */
.section { margin-bottom: 36px; animation: card-in 0.45s cubic-bezier(0.16,1,0.3,1) both; }

.section h2 {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}

.section h2 .count {
  font-family: var(--font-mono); font-size: 11px; color: var(--white-dim);
  background: var(--white-faint); border: 1px solid var(--white-border);
  border-radius: 999px; padding: 2px 8px;
}

.data-table {
  width: 100%; border-collapse: collapse;
  background: var(--glass); backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
}

@media (max-width: 700px) {
  .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.data-table details summary {
  cursor: pointer; color: var(--white); font-size: 14px; list-style: none;
}
.data-table details summary::-webkit-details-marker { display: none; }
.data-table details summary::before { content: '▸ '; color: var(--cyan); }
.data-table details[open] summary::before { content: '▾ '; }
.data-table .seg-tag { font-weight: 700; color: #7d93ff; }

.data-table th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--white-dim); font-weight: 600;
  padding: 12px 16px;
  background: rgba(0,0,0,0.15);
  border-bottom: 1px solid var(--glass-border);
}

.data-table td { padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 14px; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.15s; }
.data-table tbody tr:hover td { background: rgba(255,255,255,0.04); }

.mono { font-family: var(--font-mono); font-size: 13px; }
.row-error td { background: var(--color-error-soft) !important; }
.row-warning td { background: var(--color-warning-soft) !important; }

.severity-tag {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; border: 1px solid;
}

.severity-tag.error   { background: var(--color-error-soft);   color: var(--color-error);   border-color: rgba(255,107,122,0.28); }
.severity-tag.warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: rgba(255,196,107,0.28); }
.severity-tag.success { background: var(--color-success-soft); color: var(--color-success); border-color: rgba(77,255,166,0.28); }

/* ---- Priorität (intelligente Fehleranalyse) ---- */
.priority-badge {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid; margin-left: 8px;
}
.priority-badge.prio-kritisch { background: rgba(255,59,92,0.14);  color: #ff3b5c; border-color: rgba(255,59,92,0.35); }
.priority-badge.prio-hoch     { background: var(--color-error-soft);   color: var(--color-error);   border-color: rgba(255,107,122,0.28); }
.priority-badge.prio-mittel   { background: var(--color-warning-soft); color: var(--color-warning); border-color: rgba(255,196,107,0.28); }
.priority-badge.prio-niedrig  { background: var(--white-faint); color: var(--white-dim); border-color: var(--white-border); }

.finding-detail { margin-top: 8px; }
.finding-detail p { margin-top: 6px; font-size: 13px; color: var(--white-dim); line-height: 1.5; }
.finding-detail p:first-child { margin-top: 8px; }
.finding-detail .finding-fix { color: var(--cyan); }
.finding-detail .finding-prevention { color: var(--color-success); }

/* ---- Historie: Eintragskarten (statt schmaler Tabellenspalte) ----
   Ein <table>-Layout zwang die aufklappbaren Details in eine schmale
   Spalte am rechten Rand. Karten nutzen die volle Seitenbreite, sowohl
   in der Kopfzeile (die bei Bedarf umbricht) als auch im aufgeklappten
   Detailbereich (Dateien eines Batches als Grid nebeneinander statt
   einer schmalen, langen Spalte). */
.history-entry { padding: 18px 22px; margin-bottom: 12px; }

.history-entry-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

.history-entry-main {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0;
}

.history-entry-time { font-size: 12.5px; color: var(--white-dim); white-space: nowrap; }
.history-entry-kind { font-size: 12.5px; color: var(--white-dim); white-space: nowrap; }
.history-entry-label { font-size: 14px; }

.history-entry-stats {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.history-entry-details { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--white-border); }
.history-entry-details summary {
  cursor: pointer; color: var(--cyan); font-size: 13px; list-style: none;
}
.history-entry-details summary::-webkit-details-marker { display: none; }
.history-entry-details summary::before { content: '▸ '; }
.history-entry-details[open] summary::before { content: '▾ '; }

/* Batch-Dateien nebeneinander statt untereinander - nutzt Breite auf großen Screens */
.batch-file-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px; margin-top: 12px;
}

.batch-file-card {
  background: rgba(0,0,0,0.18); border: 1px solid var(--white-border);
  border-radius: var(--radius-md); padding: 14px 16px;
}

.batch-file-card .finding-item {
  margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--white-border);
}

.check-findings-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px; margin-top: 12px; align-items: start;
}

.check-findings-list .finding-item {
  background: rgba(0,0,0,0.18); border: 1px solid var(--white-border);
  border-radius: var(--radius-md); padding: 14px 16px;
}

/* ---- Geltungsbereich-Hinweis (welche Funktion gilt für welches Format) ---- */
.scope-badge {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 999px; margin-left: 10px;
  background: var(--white-faint); color: var(--white-dim); border: 1px solid var(--white-border);
}

.empty-state {
  text-align: center; padding: 40px;
  background: var(--color-success-soft);
  border: 1px solid rgba(77,255,166,0.18);
  border-radius: var(--radius-lg);
  color: var(--color-success); font-size: 14px;
}

/* ---- Rohsegmente ---- */
.raw-segments {
  background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: 20px 22px;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 2;
  overflow-x: auto;
}

.raw-segments .seg-line { white-space: pre; }
.raw-segments .seg-tag { font-weight: 700; }
.raw-segments .seg-tag.tag-lin { color: #7d93ff; }
.raw-segments .seg-tag.tag-qty { color: #c4b5fd; }
.raw-segments .seg-tag.tag-pri { color: #5eead4; }
.raw-segments .seg-tag.tag-moa { color: #fda4af; }
.raw-segments .seg-rest { color: #6b7a9a; }

/* ---- Auth-Seiten ---- */
.auth-page {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}

.auth-box {
  width: 100%; max-width: 440px;
  background: var(--glass-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  padding: 48px 40px;
  animation: page-fade 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

.auth-brand { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 32px; }

.auth-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  margin-bottom: 28px; text-align: center; letter-spacing: -0.01em;
}

.auth-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--white-dim); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.05em;
}

.auth-input {
  width: 100%; padding: 12px 16px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--white-border);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font-body); font-size: 15px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  margin-bottom: 18px;
}

.auth-input:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(0,212,255,0.05);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.12);
}

.auth-input::placeholder { color: rgba(255,255,255,0.25); }

.auth-footer { margin-top: 22px; text-align: center; font-size: 13.5px; color: var(--white-dim); }
.auth-footer a { color: var(--cyan); text-decoration: none; font-weight: 500; }
.auth-footer a:hover { text-decoration: underline; }

/* ---- Pricing-Karten ---- */
.pricing-page-wrapper {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px 80px;
}

.pricing-page-inner { width: 100%; max-width: 900px; animation: page-fade 0.5s cubic-bezier(0.16,1,0.3,1) both; }

.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin: 36px 0; }

.pricing-card {
  background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 30px 26px;
  cursor: pointer; position: relative;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, border-color 0.25s;
  /* WICHTIG: kein overflow:hidden hier - das würde das nach oben
     herausragende .pricing-badge ("Beliebt") an der Kartenkante
     abschneiden. Die Glow-Sweep-Fläche (::before) bekommt stattdessen
     ihren eigenen border-radius, damit sie trotzdem nicht eckig über
     die abgerundete Karte hinausragt. */
}

/* Glow-Sweep beim Hover */
.pricing-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(0,212,255,0.12) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.pricing-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.pricing-card:hover::before { opacity: 1; }

.pricing-card.is-selected {
  border-color: var(--cyan);
  background: rgba(0,212,255,0.09);
  box-shadow: 0 0 0 2px rgba(0,212,255,0.35);
}

.pricing-card.tier-pro {
  background: linear-gradient(145deg, rgba(0,212,255,0.08) 0%, rgba(37,99,235,0.06) 100%);
  border-color: rgba(0,212,255,0.22);
}

.pricing-card.tier-max {
  background: linear-gradient(145deg, rgba(124,58,237,0.1) 0%, rgba(232,126,255,0.06) 100%);
  border-color: rgba(124,58,237,0.25);
}

.pricing-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--cyan), #2563eb);
  color: var(--blue-deep);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 14px; border-radius: 999px;
  white-space: nowrap;
}

.pricing-check-indicator {
  display: none;
  position: absolute; top: 14px; right: 14px;
  width: 24px; height: 24px;
  background: linear-gradient(135deg, var(--cyan), #2563eb);
  color: var(--blue-deep);
  border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  box-shadow: 0 4px 12px var(--cyan-glow);
  animation: pop-in 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes pop-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.pricing-card.is-selected .pricing-check-indicator { display: flex; }

.pricing-tier {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--white-dim); text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 10px;
}

.pricing-price {
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  color: var(--white); margin-bottom: 4px;
  display: flex; align-items: baseline; gap: 6px;
}

.pricing-price span { font-size: 13.5px; font-weight: 400; color: var(--white-dim); }

.pricing-desc { font-size: 13px; color: var(--white-dim); margin: 10px 0 16px; line-height: 1.5; }

.pricing-features { list-style: none; }

.pricing-features li {
  font-size: 13px; color: var(--white-dim);
  padding: 4px 0;
  display: flex; align-items: flex-start; gap: 9px;
}

.pricing-features li::before {
  content: "✓"; color: var(--cyan);
  font-weight: 700; font-size: 12px;
  flex-shrink: 0; margin-top: 1px;
}

/* ---- Mitgliedschafts-Badge ---- */
.member-badge {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em;
  border: 1px solid;
}

.member-badge.standard { background: var(--white-faint); color: var(--white-dim); border-color: var(--white-border); }
.member-badge.pro      { background: rgba(0,212,255,0.12); color: var(--cyan); border-color: rgba(0,212,255,0.3); }
.member-badge.max      { background: rgba(124,58,237,0.15); color: #c084fc; border-color: rgba(124,58,237,0.35); }

/* ---- Max-Einrichtungsseite ---- */
.max-page {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto;
  padding: 80px 24px;
  animation: page-fade 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

.max-card {
  background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 16px rgba(0,0,0,0.3);
  padding: 52px 48px;
}

.max-icon {
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 28px;
  box-shadow: 0 8px 28px rgba(124,58,237,0.4);
}

.max-card h1 {
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 12px;
}

.max-card .subtitle { color: var(--white-dim); font-size: 15px; margin-bottom: 36px; }

.setup-fee-box {
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.28);
  border-radius: var(--radius-lg);
  padding: 24px 28px; margin-bottom: 36px;
  display: flex; align-items: center; justify-content: space-between;
}

.setup-fee-box .fee-amount {
  font-family: var(--font-display); font-size: 36px; font-weight: 700;
  background: linear-gradient(135deg, #c084fc, #e87eff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.setup-fee-box .fee-label { font-size: 13px; color: var(--white-dim); margin-top: 4px; }

.setup-fee-includes h3 { font-size: 13.5px; font-weight: 600; color: var(--white); margin-bottom: 8px; }

.setup-fee-includes ul { list-style: none; }
.setup-fee-includes li { font-size: 13px; color: var(--white-dim); padding: 3px 0; display: flex; gap: 8px; }
.setup-fee-includes li::before { content: "✓"; color: #c084fc; font-weight: 700; }

.contact-box {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--white-border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
}

.contact-box h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 16px; }

.contact-row {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--white-border);
}

.contact-row:last-child { border-bottom: none; }

.contact-label { font-size: 12px; font-weight: 600; color: var(--white-dim); text-transform: uppercase; letter-spacing: 0.04em; min-width: 80px; }

.contact-value { font-family: var(--font-mono); font-size: 13.5px; color: var(--cyan); }

/* ---- Back-Link ---- */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 28px; font-size: 14px; font-weight: 500;
  color: var(--white-dim); text-decoration: none;
  transition: color 0.2s, gap 0.2s;
}

.back-link:hover { color: var(--cyan); gap: 10px; }

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .upload-card { padding: 24px; }
  .summary-grid, .pricing-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 26px; }
  .max-card { padding: 32px 24px; }
  .setup-fee-box { flex-direction: column; gap: 20px; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .user-menu { flex-wrap: wrap; gap: 12px 16px; row-gap: 10px; }
  .page { padding: 0 16px 60px; }
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---- Accessibility ---- */
a:focus-visible, button:focus-visible, .file-input-label:focus-visible, input:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, .bg-orb, .accent-text { animation: none !important; transition: none !important; }
}

/* ============================================
   Enterprise-Einrichtungsassistent (Max-Tarif)
   /max-setup/onboarding/* — bewusst als eigener, breiterer Zweispalten-
   Bereich (Fortschritts-Sidebar + Inhalt), damit sich der Assistent auch
   optisch als hochwertiges, geführtes Onboarding von den übrigen, eher
   dokumentbezogenen Seiten der Anwendung abhebt.
   ============================================ */

.onboarding-page {
  position: relative; z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.onboarding-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 28px;
}

.onboarding-sidebar {
  position: sticky; top: 24px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.onboarding-progress-track {
  height: 6px; border-radius: 4px; background: var(--white-faint);
  overflow: hidden; margin-bottom: 6px;
}
.onboarding-progress-fill {
  height: 100%; background: var(--cyan); border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}
.onboarding-progress-label {
  font-size: 12px; color: var(--white-dim); margin-bottom: 18px;
}

.onboarding-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--white-dim); font-size: 13.5px;
  transition: background 0.15s, color 0.15s;
}
.onboarding-nav-item:hover { background: var(--white-faint); color: var(--white); }
.onboarding-nav-item.is-active { background: var(--cyan-soft); color: var(--white); font-weight: 600; }
.onboarding-nav-item .step-dot {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
  border: 1.5px solid var(--white-border); color: var(--white-dim);
}
.onboarding-nav-item.is-done .step-dot {
  background: var(--color-success); border-color: var(--color-success); color: var(--blue-deep);
}
.onboarding-nav-divider {
  height: 1px; background: var(--white-border); margin: 14px 0;
}

.onboarding-content { min-width: 0; }

.onboarding-step-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 6px; flex-wrap: wrap;
}
.onboarding-step-header h1 { font-size: 24px; }
.onboarding-step-kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 6px;
}
.onboarding-step-desc { color: var(--white-dim); font-size: 14.5px; max-width: 640px; margin-bottom: 28px; }

.onboarding-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 32px; gap: 12px; flex-wrap: wrap;
}

.readonly-note {
  background: var(--color-info-soft); color: var(--color-info);
  border: 1px solid rgba(126,184,255,0.3); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 13px; margin-bottom: 20px;
}

.golive-verdict {
  border-radius: var(--radius-lg); padding: 26px 28px; margin-bottom: 28px;
  border: 1px solid var(--glass-border);
}
.golive-verdict.is-ready { background: var(--color-success-soft); border-color: rgba(77,255,166,0.3); }
.golive-verdict.is-notes { background: var(--color-warning-soft); border-color: rgba(255,196,107,0.3); }
.golive-verdict.is-blocked { background: var(--color-error-soft); border-color: rgba(255,107,122,0.3); }
.golive-verdict h2 { font-size: 18px; margin-bottom: 8px; }
.golive-verdict p { font-size: 14px; color: var(--white); }

.step-check-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.step-check-row:last-child { border-bottom: none; }
.step-check-row .step-dot {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--white-border); color: var(--white-dim);
}
.step-check-row.is-done .step-dot {
  background: var(--color-success); border-color: var(--color-success); color: var(--blue-deep);
}
.step-check-row .step-info { flex: 1; }
.step-check-row .step-info .step-name { font-weight: 600; font-size: 14px; }
.step-check-row .step-info .step-detail { font-size: 12.5px; color: var(--white-dim); margin-top: 2px; }

.doc-type-group { margin-bottom: 22px; }
.doc-type-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white-dim); margin-bottom: 10px; }
.doc-type-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 10px; }
.doc-type-check {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--white-border); background: rgba(255,255,255,0.03);
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.doc-type-check:has(input:checked) { border-color: var(--cyan); background: var(--cyan-soft); }
.doc-type-check input { accent-color: var(--cyan); }

.role-pill {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.role-pill.admin { background: var(--cyan-soft); color: var(--cyan); }
.role-pill.user { background: var(--white-faint); color: var(--white-dim); }
.role-pill.technical { background: var(--color-warning-soft); color: var(--color-warning); }

.template-choice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--white-border); background: rgba(255,255,255,0.03);
  cursor: pointer; margin-bottom: 12px;
}
.template-choice:has(input:checked) { border-color: var(--cyan); background: var(--cyan-soft); }
.template-choice input { margin-top: 3px; accent-color: var(--cyan); }
.template-choice .template-label { font-weight: 600; font-size: 14px; }
.template-choice .template-desc { font-size: 12.5px; color: var(--white-dim); margin-top: 2px; }

.faq-item { margin-bottom: 18px; }
.faq-item summary { font-weight: 600; font-size: 14.5px; cursor: pointer; padding: 4px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '▸ '; color: var(--cyan); }
.faq-item[open] summary::before { content: '▾ '; }
.faq-item .faq-answer { font-size: 13.5px; color: var(--white-dim); margin-top: 8px; line-height: 1.6; padding-left: 18px; }

@media (max-width: 860px) {
  .onboarding-grid { grid-template-columns: 1fr; }
  .onboarding-sidebar { position: static; }
}

/* ---- Admin-Unternavigation ---- */
/* Sitzt unter der einheitlichen Hauptnavigation (_topbar.html), damit alle
   Admin-Seiten dieselbe Kopfzeile wie der Rest der Anwendung haben. */
.admin-subnav {
  display: flex; gap: 4px; margin-bottom: 36px;
  border-bottom: 1px solid var(--white-border);
}
.admin-subnav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; text-decoration: none;
  color: var(--white-dim); font-size: 13.5px; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.admin-subnav a:hover { color: var(--white); }
.admin-subnav a.is-active { color: var(--white); border-bottom-color: var(--cyan); font-weight: 600; }
.admin-subnav-beta-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-warning);
  display: inline-block;
}

/* ---- Admin-Beta-Diagnose (nur intern, /admin/beta) ---- */
.beta-warning-banner {
  padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 28px;
  background: rgba(255,184,0,0.08); border: 1px solid rgba(255,184,0,0.25);
  color: var(--color-warning); font-size: 13.5px; font-weight: 500;
}
.beta-feedback-form textarea {
  width: 100%; min-height: 80px; resize: vertical;
  background: rgba(255,255,255,0.04); border: 1px solid var(--white-border);
  border-radius: var(--radius-sm); color: var(--white); padding: 10px 12px;
  font-family: inherit; font-size: 13.5px;
}
.beta-feedback-item {
  padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--white-border);
}
.beta-severity-pill {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.beta-severity-pill.notiz { background: rgba(255,255,255,0.08); color: var(--white-dim); }
.beta-severity-pill.beobachtung { background: rgba(96,200,255,0.12); color: var(--cyan); }
.beta-severity-pill.problem { background: var(--color-error-soft); color: var(--color-error); }