/* ── TABLE IMPORT (step 1 «Einfügen» · Tabelle) ────────────────────────────────
   Same language as the workspace: paper cards, ghost borders, btn/accent buttons,
   footer row 68 px. Colours only via tokens.css (--lysi-*).
   #tab-table-inner sits between the adopted #tab-anonymize and #tableSplitView /
   the trailing .btn-row — it must carry the flex chain (else .split-view's flex:1
   collapses to content height and pushes the button row off the frame). The
   [hidden] attribute still wins via the global forced-hidden rule in popup.css. */
#tab-table-inner {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
  padding: 0 var(--lysi-s-28); gap: var(--lysi-s-10); color: var(--lysi-ink);
}

/* ── INPUT ZONE (two paper cards) ── */
.table-input-zone { display: flex; gap: var(--lysi-s-12); flex: 1; min-height: 0; margin: 0; }
.table-input-card {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--lysi-s-8);
  padding: var(--lysi-s-24); background: var(--lysi-paper); color: var(--lysi-paper-ink3);
  border: 1px solid var(--lysi-paper-border); border-radius: var(--lysi-r-10);
  font-size: var(--lysi-fs-13); transition: border-color .15s, background .15s;
}
.table-input-card svg { opacity: .55; flex-shrink: 0; color: var(--lysi-ink3); }
.table-input-label { font-size: var(--lysi-fs-13); font-weight: 600; color: var(--lysi-paper-ink); text-align: center; }
[data-theme="light"] #tab-table-inner .table-input-label { color: var(--lysi-paper-ink) !important; /* override: popup.css light-theme span rule */ }

/* ── DROP ZONE card ── */
.table-drop-zone { cursor: pointer; justify-content: center; border-style: dashed; border-color: var(--lysi-ghost); }
.table-drop-zone:hover, .table-drop-zone.drag-over { border-color: var(--lysi-accent); background: var(--lysi-panel); }

/* ── PASTE INPUT ── */
.ws #tab-table-inner .table-paste-input {
  width: 100%; flex: 1; min-height: 72px; max-height: none; height: auto; resize: none; box-sizing: border-box;
  border: 1px solid var(--lysi-ghost); border-radius: var(--lysi-r-6); background: var(--lysi-card);
  color: var(--lysi-ink); font: 13px/1.5 var(--lysi-font-mono); padding: var(--lysi-s-8) var(--lysi-s-10);
  outline: none; transition: border-color .15s;
}
.ws #tab-table-inner .table-paste-input::placeholder { color: var(--lysi-ink3); font: var(--lysi-fs-15)/29px var(--lysi-font-sans); }
.ws #tab-table-inner .table-paste-input:focus { border-color: var(--lysi-ink3); }

/* ── NEW FILE LINK ── */
.table-new-file-link {
  display: block; text-align: right; font-size: var(--lysi-fs-12-5); font-weight: 500;
  color: var(--lysi-accent-text); text-decoration: none;
}
.table-new-file-link:hover { text-decoration: underline; }

/* ── COLUMN PICKER ── */
.table-col-picker { display: flex; flex-wrap: wrap; gap: var(--lysi-s-6); align-items: center; padding: 0; flex: none; }
.table-col-btn, .table-col-chip {
  padding: var(--lysi-s-4) var(--lysi-s-10); border-radius: var(--lysi-r-6); font: 500 12.5px var(--lysi-font-sans);
  border: 1px solid var(--lysi-ghost); background: var(--lysi-card); color: var(--lysi-ink2); cursor: pointer;
  transition: border-color .12s, color .12s;
}
.table-col-btn { background: var(--lysi-seg); border-color: transparent; }
.table-col-btn:hover, .table-col-chip:hover { border-color: var(--lysi-ink3); color: var(--lysi-ink); }
.table-col-chip.active { border-color: var(--lysi-accent); color: var(--lysi-accent-text); background: var(--lysi-ok-bg); }
.table-col-chip-wrap { display: inline-flex; align-items: center; gap: var(--lysi-s-2); }
.table-cat-sel {
  font: 12px var(--lysi-font-mono); padding: var(--lysi-s-2) var(--lysi-s-4); border-radius: var(--lysi-r-4);
  border: 1px solid var(--lysi-ghost); background: var(--lysi-card); color: var(--lysi-ink2); cursor: pointer; max-width: 90px;
}

/* ── PREVIEW: one paper card, Original | Anonymisiert ── */
#tableSplitView {
  background: var(--lysi-paper); border: 1px solid var(--lysi-paper-border); border-radius: var(--lysi-r-10);
  overflow: hidden;
}
#tableSplitView .split-header { background: transparent; border-color: var(--lysi-paper-border); height: 40px; padding: 0 var(--lysi-s-16); }
#tableSplitView .split-header label {
  font-size: var(--lysi-fs-11-5); letter-spacing: .06em; font-weight: 600; color: var(--lysi-paper-ink3);
}
#tableSplitView .split-header.anon label { color: var(--lysi-accent-text); }
#tableSplitView .split-col { background: var(--lysi-paper); }
#tableSplitView .split-col + .split-col { border-left-color: var(--lysi-paper-border); }
#tableSplitView .scan-progress.scanning::after { background: linear-gradient(90deg, transparent, var(--lysi-accent), transparent); }

/* ── TABLE VIEW ──────────────────────────────────────────────────────────────── */
.table-view {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.78rem;
}

.table-view th {
  padding: 5px 10px;
  background: var(--bg-card);
  color: var(--text-muted);
  border-bottom: 1px solid var(--btn-border);
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table-view td {
  height: var(--space-5);
  padding: 4px 10px;
  border-bottom: 1px solid var(--bg-input);
  color: var(--text);
  vertical-align: top;
  word-break: break-word;
  max-width: 220px;
}

.table-view tr:hover td {
  background: var(--bg-input);
}

/* ── TABLE VIEW in the import preview (the generic .table-view above also serves step 4) ── */
#tableSplitView .table-view { border-collapse: collapse; width: 100%; font-size: var(--lysi-fs-13); color: var(--lysi-paper-ink); }
#tableSplitView .table-view th {
  padding: var(--lysi-s-6) var(--lysi-s-10); background: var(--lysi-paper); color: var(--lysi-paper-ink3);
  border-bottom: 1px solid var(--lysi-paper-border); text-align: left; white-space: nowrap;
  position: sticky; top: 0; z-index: 1; font-size: var(--lysi-fs-11-5); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
#tableSplitView .table-view td {
  height: var(--space-5); padding: var(--lysi-s-4) var(--lysi-s-10); border-bottom: 1px solid var(--lysi-paper-border);
  color: var(--lysi-paper-ink); vertical-align: top; word-break: break-word; max-width: 220px;
}
#tableSplitView .table-view td.sv-anon { font-family: var(--lysi-font-mono); font-size: var(--lysi-fs-12-5); color: var(--lysi-accent-text); }
#tableSplitView .table-view tr:hover td { background: var(--lysi-row-on); }

/* ── FOOTER ROW (68 px, like the step-2 footer) ── */
#tab-table-inner .btn-row {
  flex-shrink: 0; height: 68px; margin: 0; display: flex; align-items: center; gap: var(--lysi-s-12);
}
#tab-table-inner .btn-row .scan-btn {
  margin: 0; width: auto; flex: none; display: inline-flex; align-items: center; gap: var(--lysi-s-6);
  background: var(--lysi-accent); color: var(--lysi-on-accent); border: 0; box-shadow: none;
  padding: var(--lysi-s-10) var(--lysi-s-18); border-radius: var(--lysi-r-8); font: 600 14px var(--lysi-font-sans);
}
#tab-table-inner .btn-row #tableScanBtn { margin-left: auto; }
#tab-table-inner .btn-row .scan-btn:hover { background: var(--lysi-accent); opacity: .92; }
#tab-table-inner .btn-row .scan-btn:disabled { background: var(--lysi-disabled); color: var(--lysi-disabled-ink); }
.table-export-row { display: flex; gap: var(--lysi-s-8); margin-left: auto; }
#tab-table-inner .btn-row .table-export-btn {
  background: var(--lysi-card); color: var(--lysi-ink); border: 1px solid var(--lysi-ghost);
  padding: var(--lysi-s-6) var(--lysi-s-12); font-size: var(--lysi-fs-13); font-weight: 500;
}
#tab-table-inner .btn-row .table-export-btn:hover { background: var(--lysi-row-on); opacity: 1; }
#tab-table-inner .share-btn { width: 36px; height: 36px; border: 1px solid var(--lysi-ghost); color: var(--lysi-ink2); border-radius: var(--lysi-r-8); }
#tab-table-inner .reset-btn { order: -1; color: var(--lysi-ink3); font-size: var(--lysi-fs-13-5); padding: 0; }
#tab-table-inner .reset-btn:hover { color: var(--lysi-ink); }