/*
 * TCG Keeper
 * Copyright (c) Mario Löser. Alle Rechte vorbehalten.
 * Dieses Skript und der gesamte Quellcode von TCG Keeper sind geistiges
 * Eigentum von Mario Löser und dürfen ohne ausdrückliche
 * Zustimmung nicht ohne diesen Hinweis weiterverwendet oder verbreitet
 * werden.
 */
/*
 * Kauf & Verkauf, Verkaufs-/Suchlisten und Gastansicht (16.10.2026).
 * Alle Farben über die Theme-Variablen (hell/dunkel automatisch).
 */

/* ---------- Reiter, Schilder, Beträge ---------- */
.kv-tabs { margin: 0 0 16px; }
.kv-kind { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--paper-sunken); color: var(--ink-soft); border: 1px solid var(--line); white-space: nowrap; }
.kv-kind-buy { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.kv-kind-sell { background: var(--good-soft); color: var(--good); border-color: transparent; }
.kv-kind-trade { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.kv-kind-open { background: var(--gold-soft); color: var(--ink); border-color: transparent; }
.kv-money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kv-money.kv-ok { color: var(--good); font-weight: 600; }
.kv-money.kv-bad { color: var(--danger); font-weight: 600; }
.kv-money.is-none { color: var(--ink-faint); }
.kv-status { white-space: nowrap; }

/* ---------- Tabellen ---------- */
.kv-table td, .kv-table th { vertical-align: middle; }
.kv-table td.num, .kv-table th.num { text-align: right; }
.kv-row-cancelled td { opacity: .55; text-decoration: line-through; text-decoration-color: var(--ink-faint); }
.kv-row-cancelled td:last-child { text-decoration: none; }
.kv-row-done td { opacity: .6; }
.kv-items .kv-dir-out td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.kv-items .kv-dir-in td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.kv-amount-form { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.kv-ek-input { width: 6.5em; text-align: right; padding: 4px 6px; }
.kv-qty-input { width: 4.2em; text-align: right; padding: 4px 6px; }
.kv-fixed { color: var(--accent); }
.kv-actions { white-space: nowrap; text-align: right; }
.kv-actions form { display: inline; }
.kv-small-check { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }

/* ---------- Kartenbild klein ---------- */
.kv-thumb { width: 34px; height: 47px; object-fit: cover; border-radius: 3px; background: var(--paper-sunken); flex: 0 0 auto; display: inline-block; vertical-align: middle; }
/* Fix 16.10.2026 (Eintrag 147): .kv-thumb ist meist ein <span> um das Kartenbild — das Bild selbst muss mitbegrenzt werden. */
span.kv-thumb { overflow: hidden; line-height: 0; }
.kv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.kv-receipt img { max-width: 220px; max-height: 300px; width: auto; height: auto; border-radius: 8px; border: 1px solid var(--line); display: block; }
.kv-thumb-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-faint); border: 1px dashed var(--line); }

/* ---------- Formulare ---------- */
.kv-form { margin-bottom: 16px; }
.kv-filter .copy-form-grid { margin-bottom: 8px; }
.kv-field-wide { grid-column: 1 / -1; }
.kv-fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.kv-fieldset legend { padding: 0 6px; font-weight: 600; color: var(--ink-soft); }
.kv-check { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; cursor: pointer; }
.kv-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.kv-contact-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kv-contact-pick .form-input, .kv-contact-pick .form-select { flex: 1 1 180px; }
.kv-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.kv-add-block { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--paper-raised); }
.kv-add-block h3, .kv-add-block h4 { margin: 0 0 8px; font-size: 1rem; display: flex; align-items: center; gap: 6px; }
.kv-price-tool { margin: 8px 0 12px; }
.kv-danger-zone { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); }
.kv-receipt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Exemplar-Auswahl */
.kv-copy-pick { display: grid; gap: 4px; margin: 6px 0 10px; }
.kv-copy-pick-scroll { max-height: 340px; overflow: auto; padding-right: 4px; }
.kv-copy-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--paper-raised); }
.kv-copy-opt:hover { border-color: var(--accent); }
.kv-copy-opt input { flex: 0 0 auto; }
.kv-copy-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* Kartensuche (deals.js) */
.kv-search { margin: 6px 0 10px; }
.kv-search-label { display: flex; align-items: center; gap: 6px; }
.kv-search-label .form-input { flex: 1 1 auto; }
.kv-search-results { display: grid; gap: 4px; margin-top: 6px; max-height: 360px; overflow: auto; }
.kv-search-results:empty { display: none; }
.kv-search-hit { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper-raised); color: var(--ink); cursor: pointer; font: inherit; }
.kv-search-hit:hover, .kv-search-hit:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.kv-search-hit small { color: var(--ink-soft); display: block; }
.kv-search-hit .kv-owned { margin-left: auto; font-size: .75rem; color: var(--good); white-space: nowrap; }
.kv-search-note { font-size: .85rem; color: var(--ink-faint); padding: 4px 2px; }

/* ---------- Chips (Exemplare, Kacheln) ---------- */
.kv-copy-money { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .76rem; line-height: 1.5;
  border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink-soft); text-decoration: none; cursor: pointer; font-family: inherit; }
.kv-chip:hover { border-color: var(--accent); color: var(--ink); }
.kv-chip-buy { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.kv-chip-sell { background: var(--good-soft); color: var(--good); border-color: transparent; }
.kv-chip-empty { border-style: dashed; color: var(--ink-faint); }
/* Einkaufswagen-Symbol in der Symbolleiste der Kachel (17.10.2026, Eintrag 149) — gleiche Kapsel-Optik wie Lupe/Drucker
   (app-3-layout-kacheln.css). Grau = kein EK, lila = EK erfasst, goldener Punkt = verkaufte Exemplare. */
.tile-ek-btn { position: relative; width: 22px; height: 22px; padding: 0; margin: 0; border: none; background: rgba(0,0,0,.35); box-shadow: none;
  border-radius: 999px; color: rgba(255,255,255,.92); font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tile-ek-btn .dash-icon { width: 1.15em; height: 1.15em; }
.tile-ek-btn:hover { background: rgba(0,0,0,.5); color: var(--accent); }
.tile-ek-btn.has-ek { background: var(--accent); color: var(--accent-ink, #fff); }
.tile-ek-btn.has-ek:hover { filter: brightness(1.12); color: var(--accent-ink, #fff); }
.tile-ek-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #E0A526; border: 1.5px solid var(--paper-raised); pointer-events: none; }
.view-mode-large .tile-ek-btn { width: 26px; height: 26px; font-size: 14px; }
.view-mode-compact .tile-ek-btn { width: 18px; height: 18px; font-size: 9px; }
.view-mode-compact .tile-ek-dot { width: 6px; height: 6px; }
.view-mode-list .card-tile .tile-ek-btn { width: 26px; height: 26px; font-size: 13px; border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink-soft); }
.view-mode-list .card-tile .tile-ek-btn.has-ek { background: var(--accent); color: var(--accent-ink, #fff); border-color: transparent; }
/* „EK …“ neben dem Marktpreis (nur wenn in der Seitenanpassung zugeschaltet) */
.deal-tile-ek { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .92em; white-space: nowrap; }

/* ---------- Karten-Box (card.php) & archivierte Exemplare ---------- */
.kv-cardbox .kv-mini-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 10px; }
.kv-mini-kpis > * { padding: 8px 10px; border-radius: 10px; background: var(--paper-sunken); }
.kv-mini-kpis b { display: block; font-size: 1.05rem; }
.kv-mini-kpis span { font-size: .78rem; color: var(--ink-soft); }
.kv-archived-copies { margin-top: 12px; }
.kv-copy-archived { opacity: .55; filter: grayscale(.85); }
.kv-copy-archived:hover { opacity: .85; }

/* ---------- Protokoll im Vorgang ---------- */
.kv-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kv-log li { display: flex; gap: 8px; align-items: baseline; font-size: .88rem; padding: 4px 0; border-bottom: 1px dotted var(--line); }
.kv-log li:last-child { border-bottom: 0; }

/* ---------- Wirtschaftlichkeit ---------- */
.kv-legend { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-soft); margin-bottom: 6px; }
.kv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.kv-dot-in, .kv-bar-in { background: var(--danger); }
.kv-dot-out, .kv-bar-out { background: var(--good); }
.kv-bars { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding: 6px 2px 0; overflow-x: auto; border-bottom: 1px solid var(--line); }
.kv-bar-col { flex: 1 0 22px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.kv-bar-pair { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.kv-bar { width: 42%; max-width: 14px; min-height: 1px; border-radius: 3px 3px 0 0; }
.kv-bar-label { font-size: .66rem; color: var(--ink-faint); padding-top: 3px; white-space: nowrap; }
.kv-top-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.kv-toplist { list-style: none; margin: 0; padding: 0; }
.kv-toplist li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 5px 0; border-bottom: 1px dotted var(--line); font-size: .88rem; }
.kv-top-val { white-space: nowrap; }
.kv-thresholds { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.kv-threshold { display: grid; gap: 3px; padding: 10px; border-radius: 10px; background: var(--paper-sunken); font-size: .85rem; }
.kv-meter { display: block; height: 7px; border-radius: 99px; background: var(--paper); overflow: hidden; border: 1px solid var(--line); }
.kv-meter > span { display: block; height: 100%; background: var(--good); border-radius: 99px; }
.kv-meter > span.is-warn { background: var(--danger); }

/* ---------- Listen ---------- */
.kv-list-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.kv-list-card { display: grid; gap: 6px; text-decoration: none; color: inherit; padding: 12px 14px; transition: border-color .15s, transform .15s; }
.kv-list-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.kv-list-card-head { display: flex; align-items: center; gap: 6px; }
.kv-share-link { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.kv-share-link .form-input { flex: 1 1 260px; font-family: var(--font-mono); font-size: .85rem; }
.kv-share-form { margin-top: 12px; }
.kv-qr-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.kv-qr { width: 132px; height: 132px; background: #fff; border-radius: 8px; padding: 4px; border: 1px solid var(--line); }
.kv-qr svg { width: 100%; height: 100%; display: block; }
.kv-requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kv-requests > li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--paper-raised); }
.kv-req-items { margin: 6px 0; padding-left: 18px; font-size: .88rem; }
.kv-req-msg { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--paper-sunken); white-space: normal; }

/* ---------- Gastansicht (liste.php) ---------- */
.kv-guest-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: flex-end; padding: 22px 22px 18px; margin-bottom: 14px;
  border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, #1b1530) 100%); box-shadow: var(--shadow); }
.kv-guest-head h1 { margin: 2px 0 4px; color: #fff; font-size: clamp(1.4rem, 3.4vw, 2rem); }
.kv-guest-kicker { margin: 0; font-size: .85rem; opacity: .9; display: flex; align-items: center; gap: 6px; }
.kv-guest-desc { margin: 4px 0 0; max-width: 62ch; opacity: .95; }
.kv-guest-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.kv-guest-facts span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .85rem; white-space: nowrap; }
.kv-guest-tools { margin-bottom: 14px; }
.kv-guest-tools .form-input { flex: 1 1 200px; }
.kv-guest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.kv-guest-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--paper-raised); border: 1px solid var(--line);
  box-shadow: var(--shadow); transition: transform .15s; }
.kv-guest-card:hover { transform: translateY(-2px); }
.kv-guest-card.is-done { opacity: .55; filter: grayscale(.8); }
.kv-guest-img { position: relative; aspect-ratio: 63 / 88; background: var(--paper-sunken); display: flex; align-items: center; justify-content: center; }
.kv-guest-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kv-guest-photos { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: .72rem; }
.kv-guest-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.kv-guest-body h3 { margin: 0; font-size: .98rem; line-height: 1.25; }
.kv-guest-sub { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.kv-guest-note { margin: 4px 0 0; font-size: .8rem; color: var(--ink-soft); font-style: italic; }
.kv-guest-foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.kv-guest-price { font-size: 1.05rem; font-weight: 700; color: var(--accent); }
.kv-guest-contact { margin-top: 20px; }
.kv-guest-contact h2 { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.kv-guest-contact-info { padding: 10px 12px; border-radius: 10px; background: var(--paper-sunken); }
.kv-guest-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 14px; max-height: 260px; overflow: auto; }
.kv-guest-lock { max-width: 420px; margin: 40px auto; text-align: center; }
.kv-guest-lock-icon { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 10px; }
.kv-guest-lock form { display: grid; gap: 8px; margin-top: 12px; }
.share-foot { text-align: center; color: var(--ink-faint); font-size: .8rem; margin: 24px 0 8px; }

/* ---------- Schnelleingabe (pcDealQuick) ---------- */
/* Fenster ist ein normales .lightbox-scrim/.lightbox-panel (app-4-sets-karten.css) und wird von pcwindow.js
   am Desktop zum verschiebbaren Fenster (17.10.2026, Eintrag 149). */
.kv-quick { width: min(560px, 92vw); }
.kv-quick-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kv-quick-top h3 { margin: 0; font-size: 1.05rem; flex: 1 1 auto; }
html.pcwin-on .kv-quick-top { display: none; }
.kv-quick-head { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.kv-quick-head img { width: 52px; height: 72px; object-fit: contain; border-radius: 4px; background: var(--paper-sunken); }
.kv-quick-head h4 { margin: 0; font-size: 1rem; }
.kv-quick-head p { margin: 2px 0 0; font-size: .82rem; color: var(--ink-soft); }
.kv-quick-list { display: grid; gap: 8px; }
.kv-quick-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.kv-quick-row small { color: var(--ink-soft); display: block; }
.kv-quick-row form { display: flex; gap: 4px; align-items: center; }
.kv-quick-row .kv-ek-input { width: 6em; }
.kv-quick-row.is-saved { border-color: var(--good); background: var(--good-soft); }
.kv-quick-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.kv-quick-foot { padding-top: 10px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); }
.kv-quick-msg { font-size: .85rem; min-height: 1.2em; margin: 0 0 4px; }
.kv-quick-msg.is-error { color: var(--danger); }
.kv-quick-msg.is-ok { color: var(--good); }

@media (max-width: 560px) {
  .kv-guest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kv-guest-head { padding: 16px; }
  .kv-quick-row { grid-template-columns: 1fr; }
}
@media print {
  .kv-guest-tools, .kv-guest-contact, .kv-tabs, .tile-ek-btn { display: none !important; }
  .kv-guest-head { color: #000; background: none; box-shadow: none; border: 1px solid #999; }
  .kv-guest-head h1 { color: #000; }
}

/* ---------- Abgegebene Karten auf „Meine Sammlung“ (Einstellung „ausgegraut“) ---------- */
.kv-sold-section { margin-top: 18px; }
.kv-sold-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0; font-size: 1.1rem; }
.kv-tile-sold { opacity: .5; filter: grayscale(1); }
.kv-tile-sold:hover { opacity: .85; filter: grayscale(.4); }


/* Hinweise der Wirtschaftlichkeit (Textfluss-Fix für .vp-help in app-10-wert.css, Eintrag 147) */
.kv-hints .kv-thresholds { margin-top: 8px; }