/* preview.css – nur für die Vorschau; keine globalen Overrides */

/* ---------- Vorschau-Dialog (basiert auf .modal-card) ---------- */
.modal .pv-card{
  /* runde Ecken + Shadow kommen bereits aus ui-messages.css; wir ergänzen nur */
  border-radius: var(--radiusLG, 14px);
  overflow: auto;
  resize: both;               /* CSS-Resize; zusätzlich JS-Handle */
  /* keine feste width/height -> ui-messages setzt Startgröße; Inline-Styles vom JS haben Vorrang */
}

/* sichtbarer Resize-Handle – nur in der Preview-Karte */
.modal .pv-card .modal-resizer{
  position:absolute; right:8px; bottom:8px;
  width:16px; height:16px; cursor:se-resize; opacity:.6;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.25) 0 2px, rgba(0,0,0,.1) 2px 4px);
  border-radius:4px;
}

/* ---------- Tabellen-Wrapper nur in der Preview ---------- */
#pv-body .pv-wrap{
  /* nutzt bestehende .table-wrap-Optik aus ui-core.css, aber kapselt die Ecken */
  border-radius: var(--radius, 12px);
  overflow: hidden;           /* Kopf bündig; Ecken sichtbar */
  margin: 10px 0;
}

/* ---------- Nur die Preview-Tabelle bekommt collapse, damit der Kopf bündig ist ---------- */
.pv-table.contacts{
  border-collapse: collapse; border-spacing: 0;  /* verhindert "weiße Zeile" */
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}

/* Spaltenverteilung (nur Preview) */
.pv-table{
  --pv-field:   45%;
  --pv-value:   45%;
  --pv-sys:      0%;
  --pv-actions: 10%;
}
.pv-table.has-sys{
  --pv-field:   30%;
  --pv-value:   30%;
  --pv-sys:     30%;
  --pv-actions: 10%;
}
.pv-table col.col-field    { width: var(--pv-field); }
.pv-table col.col-value    { width: var(--pv-value); }
.pv-table col.col-sysfield { width: var(--pv-sys); }
.pv-table col.col-actions  { width: var(--pv-actions); }

/* Spaltenköpfe fett, aber nur hier */
.pv-table thead th{ font-weight:600; }

/* 70% weniger vertikaler Abstand & einheitliche Control-Höhe */
.pv-table th, .pv-table td{
  padding: 2px 3px;
  vertical-align: middle;
}
.pv-table input.pv-input,
.pv-table select.pv-field{
  width:100%;
  height:34px;
  line-height:32px;
  padding:0 2px;
  border:1px solid var(--input-border, rgba(0,0,0,.12));
  border-radius:12px;
  background: var(--input-bg, #fff);
  color: inherit;
  outline:none;
  appearance:none;
}

/* Systemfeld-Code + Checkbox-Label nur in der Preview-Tabelle */
.pv-table .syscode{ font-size:12px; opacity:.8; }
.pv-table .pv-show-sys.in-head{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.pv-table .pv-show-sys.in-head span{ font-size:13px; font-weight:500; }

/* Wenn Sys-Spalte ausgeblendet ist, Label als Overlay rechts im Kopf platzieren – nur hier */
.pv-table thead tr{ position:relative; }
.pv-table:not(.has-sys) th.col-sysfield{
  position:absolute; right: calc(var(--pv-actions) + 8px); top:0; height:100%;
  display:flex; align-items:center; justify-content:flex-end; padding-right:0; width:auto;
}

/* Action-Buttons rechts (fixe 10%) */
.pv-table .btn-icon{ border:none; background:transparent; padding:6px 8px; cursor:pointer; line-height:1; }

/* Add-Zeile unten wie Datenzeilen */
.pv-add-row td{ background: var(--bg-card, #fff); }

/* ---------- Dublettenliste nur in der Preview ---------- */
.pv-card #pv-dups .table-wrap{ border-radius: var(--radius, 12px); overflow: hidden; }
.pv-card #pv-dups .contacts{ border-collapse: collapse; border-spacing:0; width:100%; }
.pv-card #pv-dups .contacts thead th{ font-weight:600; }
.pv-card .dup-actions{ display:flex; justify-content:flex-end; padding:12px; border-top:1px solid var(--border); }

/* ---------- Abgerundete Scrollbars nur in Preview ---------- */
.pv-card, #pv-body .pv-wrap{
  scrollbar-width: thin;                      /* Firefox */
  scrollbar-color: rgba(0,0,0,.25) transparent;
}
.pv-card::-webkit-scrollbar, #pv-body .pv-wrap::-webkit-scrollbar{
  width:10px; height:10px;
}
.pv-card::-webkit-scrollbar-track, #pv-body .pv-wrap::-webkit-scrollbar-track{
  background: transparent; border-radius:12px;
}
.pv-card::-webkit-scrollbar-thumb, #pv-body .pv-wrap::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.25); border-radius:12px;
}

/* ---------- Header: Navigator mittig, Titel rechts – nur in Preview ---------- */
.modal-header.pv-header-flex{ display:flex; align-items:center; gap:12px; }
#pv-nav{ margin:0 auto; display:flex; align-items:center; gap:8px; }
.modal-header.pv-header-flex > h3{ margin-left:auto; text-align:right; }

/* === PREVIEW: scoped Ergänzungen (kein globaler Override) ================= */

/* Karte nur in der Preview erkennbar machen: runde Ecken, optionaler Resize-Handle */
.modal .modal-card.pv-card{ border-radius: var(--radiusLG,14px); overflow:auto; resize: both; }
.modal .modal-card.pv-card .modal-resizer{
  position:absolute; right:8px; bottom:8px; width:16px; height:16px;
  cursor:se-resize; opacity:.6;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.25) 0 2px, rgba(0,0,0,.1) 2px 4px);
  border-radius:4px;
}

/* Wrapper nur in der Preview: Scrollbar wieder einblenden, runde Ecken, bündig */
#pv-body .table-wrap.pv-wrap{
  border-radius: var(--radius,12px);
  overflow: auto;                 /* überschreibt ui-core .table-wrap (hidden) */
  max-height: 70vh;               /* sichtbarer Feld-Scrollbereich */
  margin: 10px 0;
}

/* Nur die Preview-Tabelle bekommt collapse => keine weiße Leerzeile */
.pv-table.contacts{ border-collapse: collapse; border-spacing: 0; }

/* Einheitliche, kompakte Zeilen & Felder (~70% weniger vertikal) */
.pv-table th, .pv-table td{ padding: 3px 8px; vertical-align: middle; }
.pv-table input.pv-input,
.pv-table select.pv-field{
  height:34px; line-height:32px; padding:0 10px; border-radius:12px;
}

/* Überschrift-Leiste für „Mögliche Dubletten“ im selben Stil wie Tabellenkopf */
.pv-section-head{
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  font-weight:600;
  color: var(--muted);
  background: var(--bg-pane);
}
:root[data-theme="light"] .pv-section-head{
  background:#f2f5fb; color:#46526b; /* wie ui-core .contacts thead th (light) */
}

/* Kopf/Label rechts (Systemfelder) bleibt sichtbar, schneidet nichts ab */
.pv-table .pv-show-sys.in-head{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }

/* === Preview-spezifische Feinheiten (scoped) ===================== */

/* Wrapper nur in der Preview: Scrollbar im Feldbereich, runde Ecken */
#pv-body .table-wrap.pv-wrap{
  border-radius: var(--radius,12px);
  overflow: auto;                 /* zeigt Scrollbar im Listenteil */
  max-height: 70vh;               /* begrenzte Höhe im Modal */
  margin: 8px 0;
}

/* Kopf bündig – keine weiße Leerzeile (nur Preview-Tabelle) */
.pv-table.contacts{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}

/* Spaltenverteilung wie gehabt */
.pv-table{
  --pv-field:   45%;
  --pv-value:   45%;
  --pv-sys:      0%;
  --pv-actions: 10%;
}
.pv-table.has-sys{
  --pv-field:   30%;
  --pv-value:   30%;
  --pv-sys:     30%;
  --pv-actions: 10%;
}
.pv-table col.col-field    { width: var(--pv-field); }
.pv-table col.col-value    { width: var(--pv-value); }
.pv-table col.col-sysfield { width: var(--pv-sys); }
.pv-table col.col-actions  { width: var(--pv-actions); }

/* kompaktes Padding (≈ -70%) und einheitliche Control-Höhe */
.pv-table thead th{ font-weight:600; }
.pv-table th, .pv-table td{ padding: 3px 8px; vertical-align: middle; }
.pv-table input.pv-input,
.pv-table select.pv-field{
  height:34px; line-height:32px; padding:0 10px; border-radius:12px;
}

/* Sys-Spalte komplett ausblenden, wenn off – auch im Footer */
.pv-table:not(.has-sys) th.col-sysfield,
.pv-table:not(.has-sys) td.col-sysfield{ display:none; }

/* Add-Zeile bündig, keine Linie neben dem Plus */
.pv-table tfoot td{ border-bottom: none; }

/* === PREVIEW Hotfix (scoped, ohne globale Seiteneffekte) ================= */

/* 1) Dubletten-Kasten: Rahmen/Background entfernen (nur hier) */
.pv-card #pv-dups .table-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* === Preview: Data-Head vollflächig und nahtlos ====================== */
/* Kopf (thead + th) im Datenbereich durchgängig einfärben */
#pv-body .pv-table.contacts thead,
#pv-body .pv-table.contacts thead tr,
#pv-body .pv-table.contacts thead th{
  background: var(--bg-pane) !important;
  border-bottom: 1px solid var(--border) !important;
  background-clip: border-box;            /* verhindert helle Kante */
}
:root[data-theme="light"] #pv-body .pv-table.contacts thead,
:root[data-theme="light"] #pv-body .pv-table.contacts thead tr,
:root[data-theme="light"] #pv-body .pv-table.contacts thead th{
  background: #f2f5fb !important;
  border-bottom: 1px solid #d8deee !important;
}

/* Erste Datenzeile bündig zum Kopf (keine helle Linie dazwischen) */
#pv-body .pv-table.contacts tbody tr:first-child td{
  border-top: none !important;
}

/* Sicherheitsnetz gegen weiße Linien bei unterschiedlichen Engines */
#pv-body .pv-table.contacts{
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}



/* 2) Datenbereich: weißer Balken entfernen + Header fixieren */
#pv-body .pv-wrap{ overflow: auto !important; } /* Scroll nur im Datenbereich */
#pv-body .pv-table.contacts{
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
#pv-body .pv-table.contacts thead th{
  position: sticky; top: 0; z-index: 3;
  /* gleiche Kopf-Farbe wie global .contacts */
  background: var(--bg-pane);
}
:root[data-theme="light"] #pv-body .pv-table.contacts thead th{
  background: #f2f5fb; /* wie ui-core.css */
}

/* 3) Kompakte Zeilen + gleiche Feldhöhe (übersteuert globale Paddings/Min-Höhen) */
#pv-body .pv-table.contacts thead th{ padding: 6px 8px !important; }
#pv-body .pv-table.contacts tbody td{ padding: 4px 8px !important; }

#pv-body .pv-table .pv-input,
#pv-body .pv-table .pv-field{
  min-height: 0 !important;     /* globales Minimum neutralisieren */
  height: 32px !important;
  line-height: 30px !important;
  padding: 0 8px !important;
  border-radius: 10px;
}

/* 4) Checkbox „Systemfelder“: immer sichtbar im Kopf, Spalte selbst ausblenden */
#pv-body .pv-table thead tr{ position: relative; }
#pv-body .pv-table:not(.has-sys) td.col-sysfield{ display: none !important; }
/* WICHTIG: th NICHT verstecken – als Overlay rechts im Kopf anzeigen */
#pv-body .pv-table:not(.has-sys) th.col-sysfield{
  display: flex !important;
  position: absolute; right: calc(var(--pv-actions) + 8px); top: 0; height: 100%;
  align-items: center; justify-content: flex-end;
  border: 0; background: transparent;
}

/* 5) Add-Zeile bündig; „Haarlinie“ am + entfernen */
#pv-body .pv-table tfoot td{ border: 0 !important; }
#pv-body .pv-table tfoot .col-actions{ text-align: right; }

/* 6) Für alle Fälle: keine Top-Grenze an der ersten Datenzeile */
#pv-body .pv-table.contacts tbody tr:first-child td{ border-top: none !important; }

/* === Preview: Kopf ohne "weiße Zeile" + fixiert, Row-Spacing kompakt (scoped) === */



/* Kopf fixieren – bleibt beim Scrollen stehen */
#pv-body .pv-table.contacts thead th{ position: sticky; top: 0; z-index: 3; }

/* B) Erste Datenzeile bündig – keine Top-Grenze */
#pv-body .pv-table.contacts tbody tr:first-child td,
#pv-dups  .contacts tbody tr:first-child td{
  border-top: none !important;
}

/* C) Zeilenabstand ~70% kleiner + gleiche Feldhöhe (übersteuert ui-core) */
#pv-body .pv-table.contacts thead th{ padding: 6px 8px !important; }
#pv-body .pv-table.contacts tbody td{ padding: 4px 8px !important; }

#pv-body .pv-table .pv-input,
#pv-body .pv-table .pv-field{
  min-height: 0 !important;
  height: 32px !important;
  line-height: 30px !important;
  padding: 0 8px !important;
  border-radius: 10px;
}

/* D) "Mögliche Dubletten": den table-wrap-Rahmen gezielt entfernen */
.pv-card #pv-dups .table-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* === Preview: Kopfzeile im Datenanzeigebereich fix vollflächig einfärben === */
#pv-body .pv-table.contacts thead {
  background: var(--bg-pane) !important;
}
:root[data-theme="light"] #pv-body .pv-table.contacts thead {
  background: #f2f5fb !important;
}

/* th-Zellen komplett einfärben (falls Zellenhöhe kleiner als Hintergrund) */
#pv-body .pv-table.contacts thead th {
  background: inherit !important;
  border-bottom: 1px solid var(--border) !important;
}
:root[data-theme="light"] #pv-body .pv-table.contacts thead th {
  background: inherit !important;
  border-bottom: 1px solid #d8deee !important; /* wie in ui-core.css light */
}

/* === PREVIEW: Daten-Kopf nahtlos & vollflächig einfärben ================= */

/* Tabellenmodell absolut eindeutig setzen (sonst mischt ui-core eine separate-Collapse Kombi rein) */
#pv-body .pv-table.contacts{
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* Kopfzeile kleben + komplett einfärben (thead + tr + th) */
#pv-body .pv-table.contacts thead,
#pv-body .pv-table.contacts thead tr,
#pv-body .pv-table.contacts thead th{
  position: sticky; top: 0; z-index: 5;      /* sticky am Scrollcontainer #pv-body .pv-wrap */
  background: var(--bg-pane) !important;
}
:root[data-theme="light"] #pv-body .pv-table.contacts thead,
:root[data-theme="light"] #pv-body .pv-table.contacts thead tr,
:root[data-theme="light"] #pv-body .pv-table.contacts thead th{
  background: #f2f5fb !important;            /* exakt wie ui-core */
}

/* Sauberer Abschluss zum Body (kein "weißer Strich" mehr) */
#pv-body .pv-table.contacts thead th{
  background-clip: border-box;               /* verhindert 1px-Antialias-Fuge */
  border-bottom: 1px solid var(--border) !important;
}
:root[data-theme="light"] #pv-body .pv-table.contacts thead th{
  border-bottom: 1px solid #d8deee !important;
}

/* Erste Datenzeile bündig an den Kopf anschließen */
#pv-body .pv-table.contacts tbody tr:first-child td{
  border-top: 0 !important;
}

/* Sicherheitsnetz: kein fremder Hintergrund im Wrapper oberhalb des thead */
#pv-body .table-wrap.pv-wrap{
  /* der Wrapper selbst soll uns nichts "hineinleuchten" */
  background: transparent !important;
}