/* ═══════════════════════════════════════════════════════════════
   Pacioli · Buchhaltungsversand + Lohnzettel + Prämien
═══════════════════════════════════════════════════════════════ */

/* ── Hero subtitle ──────────────────────────────────────── */
.pc-hero-sub {
  color: var(--tx-1);
  font-size: 13px;
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ── Tabs ───────────────────────────────────────────────── */
.pc-tabs {
  display: flex; gap: 4px;
  margin: 4px 0 20px;
  padding: 4px;
  background: var(--bg-el);
  border-radius: 10px;
  overflow-x: auto;
}
.pc-tab {
  appearance: none; border: 0; background: transparent;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 7px;
  color: var(--tx-1);
  font: 500 12.5px/1 var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out-quint), color var(--dur-fast) var(--ease-out-quint);
}
.pc-tab:hover { color: var(--tx-0); }
.pc-tab.on {
  background: var(--bg-surface);
  color: var(--tx-0);
  box-shadow: 0 1px 2px rgba(40,35,20,0.06), 0 0 0 1px var(--bdr-def);
}
.pc-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--wa);
  color: #fff;
  border-radius: 999px;
  font: 600 10px/1 var(--font-mono);
  margin-left: 4px;
}

/* ── Versand-State-Dots ─────────────────────────────────── */
.pc-state {
  display: inline-block;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tx-2);
}
.pc-state-ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.pc-state-warning { background: var(--wa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa) 22%, transparent); }
.pc-state-error   { background: var(--er); box-shadow: 0 0 0 3px color-mix(in srgb, var(--er) 22%, transparent); }

/* ── Learning-Cards ─────────────────────────────────────── */
.pc-learn-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}
.pc-learn-card {
  padding: 16px 18px 14px;
  border: 1px solid var(--bdr-def);
  border-left: 3px solid var(--inf);
  border-radius: 10px;
  background: color-mix(in srgb, var(--inf) 3%, var(--bg-surface));
  transition: transform var(--dur-base) var(--ease-out-quint), box-shadow var(--dur-base) var(--ease-out-quint);
}
.pc-learn-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -16px rgba(40,35,20,0.32);
}
.pc-learn-h {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.pc-learn-nr {
  font: 700 18px/1 var(--font-mono);
  color: var(--inf);
  letter-spacing: -0.01em;
}
.pc-learn-name {
  font: 600 14px/1.3 var(--font-ui);
  color: var(--tx-0);
  flex: 1;
}
.pc-learn-rate {
  display: flex; flex-direction: column; align-items: flex-end;
}
.pc-learn-rate-v {
  font: 700 16px/1 var(--font-mono);
  color: var(--ok);
}
.pc-learn-rate-l {
  font: 500 10px/1 var(--font-mono);
  color: var(--tx-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.pc-learn-meta {
  display: flex; gap: 14px;
  font: 500 11.5px/1 var(--font-mono);
  color: var(--tx-2);
  margin-bottom: 6px;
}
.pc-learn-meta strong { color: var(--tx-0); }
.pc-learn-sample {
  font-size: 12.5px;
  color: var(--tx-1);
  line-height: 1.5;
  padding: 8px 10px;
  background: var(--bg-el);
  border-radius: 6px;
  margin-bottom: 10px;
}
.pc-learn-a {
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ── Drop-Zone ──────────────────────────────────────────── */
.pc-drop {
  margin-top: 10px;
  border: 2px dashed var(--bdr-def);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  background: var(--bg-el);
  transition: border-color var(--dur-base) var(--ease-out-quint), background var(--dur-base) var(--ease-out-quint);
}
.pc-drop.is-over {
  border-color: var(--inf);
  background: color-mix(in srgb, var(--inf) 5%, var(--bg-el));
}
.pc-drop-ico {
  display: inline-flex;
  width: 64px; height: 64px;
  align-items: center; justify-content: center;
  background: var(--bg-surface);
  border-radius: 50%;
  margin-bottom: 12px;
  color: var(--tx-1);
}
.pc-drop.is-over .pc-drop-ico { color: var(--inf); animation: pcDropBounce 0.6s ease-in-out infinite; }
@keyframes pcDropBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.pc-drop-t { font-size: 14px; font-weight: 600; color: var(--tx-0); margin-bottom: 4px; }
.pc-drop-s { font-size: 12px; color: var(--tx-2); margin-bottom: 14px; }
.pc-drop-btn { display: inline-flex; cursor: pointer; }

/* ── File-Status-List ───────────────────────────────────── */
.pc-files { margin-top: 16px; }
.pc-files-h {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--tx-1);
}
.pc-file {
  display: grid;
  grid-template-columns: 24px 1fr 80px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--bdr-faint);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--bg-surface);
  transition: border-color var(--dur-base) var(--ease-out-quint);
}
.pc-file-ico { color: var(--tx-2); }
.pc-file-n { font-size: 13px; color: var(--tx-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-file-s { font-size: 11.5px; color: var(--tx-2); }
.pc-stage {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11.5px/1 var(--font-mono);
  padding: 4px 9px;
  border-radius: 999px;
}
.pc-stage.queued   { background: var(--bg-el); color: var(--tx-2); }
.pc-stage.parsing  { background: color-mix(in srgb, var(--inf) 12%, transparent); color: var(--inf); }
.pc-stage.parsing::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--inf); animation: archPulse 1.4s ease-in-out infinite; }
.pc-stage.matching { background: color-mix(in srgb, var(--wa) 12%, transparent); color: var(--wa); }
.pc-stage.matching::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wa); animation: archPulse 1.4s ease-in-out infinite; }
.pc-stage.done     { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.pc-stage.done::before { content: "✓"; font-weight: 600; }

/* ── Stat-Chart ─────────────────────────────────────────── */
.pc-chart-wrap {
  padding: 8px;
  background: var(--bg-el);
  border-radius: 10px;
  border: 1px solid var(--bdr-faint);
}

/* ── Top-Konten Bars ───────────────────────────────────── */
.pc-topk { display: flex; flex-direction: column; gap: 8px; }
.pc-topk-row {
  display: grid;
  grid-template-columns: 60px 1fr 200px 60px 50px;
  gap: 14px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background var(--dur-fast) var(--ease-out-quint);
}
.pc-topk-row:hover { background: var(--bg-el); }
.pc-topk-nr { font-weight: 600; color: var(--tx-0); }
.pc-topk-n { font-size: 13px; color: var(--tx-1); }
.pc-topk-bar {
  height: 8px; border-radius: 999px;
  background: var(--bg-el);
  overflow: hidden;
}
.pc-topk-bar-f {
  height: 100%;
  background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 60%, var(--inf)));
  border-radius: 999px;
  animation: pcBarGrow 0.7s var(--ease-out-quint);
  transform-origin: left;
}
@keyframes pcBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pc-topk-v { text-align: right; color: var(--tx-0); }
.pc-topk-r { text-align: right; font-size: 11.5px; }

/* ── Settings-Cards ─────────────────────────────────────── */
.pc-set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.pc-set-card {
  padding: 18px 20px 20px;
  border: 1px solid var(--bdr-def);
  border-radius: 10px;
  background: var(--bg-surface);
  display: flex; flex-direction: column; gap: 12px;
}
.pc-set-card h3 {
  margin: 0 0 4px;
  font: 600 14px/1.2 var(--font-ui);
  letter-spacing: -0.005em;
}
.pc-set-toggle-list { display: flex; flex-direction: column; gap: 8px; }
.pc-set-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--tx-0);
  cursor: pointer;
}
.pc-set-toggle input { accent-color: var(--inf); width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════
   Lohnzettel + Prämien
═══════════════════════════════════════════════════════════════ */

/* ── DN-Tabs ───────────────────────────────────────────── */
.pc-dn-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.pc-dn-tab {
  appearance: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--bdr-def);
  border-radius: 10px;
  background: var(--bg-surface);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-quint), border-color var(--dur-fast) var(--ease-out-quint), box-shadow var(--dur-fast) var(--ease-out-quint);
  text-align: left;
}
.pc-dn-tab:hover { transform: translateY(-1px); border-color: var(--bdr-str); }
.pc-dn-tab.on {
  border-width: 2px;
  padding: 9px 11px;
  box-shadow: 0 6px 16px -12px rgba(40,35,20,0.3);
}
.pc-dn-tab-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--font-ui);
  flex-shrink: 0;
}
.pc-dn-tab-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-dn-tab-n { font: 600 13.5px/1.2 var(--font-ui); color: var(--tx-0); }
.pc-dn-tab-r { font: 500 11px/1.2 var(--font-mono); color: var(--tx-2); letter-spacing: 0.02em; }

/* ── Prämien-Sätze ──────────────────────────────────────── */
.pc-praem-status {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  margin: 8px 0 16px;
  background: var(--bg-el);
  border: 1px solid var(--bdr-faint);
  border-left: 3px solid var(--tx-2);
  border-radius: var(--r-md);
}
.pc-praem-status.is-forecast { border-left-color: var(--inf); }
.pc-praem-status-pill {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  background: var(--bg-surface);
  border: 1px solid var(--bdr-def);
  border-radius: 999px;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-2);
  flex-shrink: 0;
  margin-top: 1px;
}
.pc-praem-status-pill.is-forecast {
  color: var(--inf);
  border-color: color-mix(in srgb, var(--inf) 30%, transparent);
  background: color-mix(in srgb, var(--inf) 8%, var(--bg-surface));
}
.pc-praem-status-t {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; flex: 1;
}
.pc-praem-status-t strong {
  font: 600 14px/1.3 var(--font-ui);
  color: var(--tx-0);
}
.pc-praem-status-s {
  font-size: 12.5px; color: var(--tx-1); line-height: 1.5;
}
.pc-praem-reset {
  appearance: none; background: none; border: none; padding: 0;
  cursor: pointer; font: inherit;
}

.pc-praem-slider {
  display: flex; gap: 16px; align-items: center;
  padding: 12px;
  background: var(--bg-el);
  border-radius: 10px;
}
.pc-praem-slider input { flex: 1; }
.pc-praem-slider-v {
  font: 700 22px/1 var(--font-mono);
  color: var(--tx-0);
  min-width: 80px;
  text-align: right;
}
.pc-praem-f {
  width: 70px;
  padding: 5px 6px !important;
  text-align: right !important;
  font-size: 12px !important;
}
.pc-praem-dn {
  display: flex; align-items: center; gap: 10px;
}

/* ── Lohnzettel · Mitarbeiterübersicht ────────────────────── */
.pc-dn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.pc-dn-card {
  appearance: none;
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 16px 18px 14px;
  border: 1px solid var(--bdr-def);
  border-radius: 12px;
  background: var(--bg-surface);
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur-base) var(--ease-out-quint), border-color var(--dur-base) var(--ease-out-quint), box-shadow var(--dur-base) var(--ease-out-quint);
}
.pc-dn-card:hover {
  transform: translateY(-2px);
  border-color: var(--bdr-str);
  box-shadow: 0 10px 24px -18px rgba(40,35,20,0.32);
}
.pc-dn-card-h {
  display: flex; align-items: center; gap: 12px;
}
.pc-dn-card-n { font: 600 14.5px/1.2 var(--font-ui); color: var(--tx-0); }
.pc-dn-card-r { font: 500 11.5px/1.2 var(--font-mono); color: var(--tx-2); letter-spacing: 0.02em; margin-top: 2px; }
.pc-dn-card-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.pc-dn-card-stat { display: flex; flex-direction: column; gap: 2px; }
.pc-dn-card-l { font: 500 10px/1 var(--font-mono); color: var(--tx-2); letter-spacing: 0.06em; text-transform: uppercase; }
.pc-dn-card-v { font: 700 14px/1 var(--font-ui); color: var(--tx-0); letter-spacing: -0.01em; }
.pc-dn-card-spark {
  width: 100%;
  height: 30px;
}
.pc-dn-card-f {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px dashed var(--bdr-faint);
  padding-top: 8px;
}
.pc-dn-card-cta {
  font: 500 12px/1 var(--font-ui);
  color: var(--tx-0);
  transition: transform var(--dur-fast) var(--ease-out-quint);
}
.pc-dn-card:hover .pc-dn-card-cta { transform: translateX(3px); }

.pc-back-btn {
  display: inline-flex !important;
  align-items: center; gap: 6px;
}

/* ── Bulk-PDF Pipeline ──────────────────────────────────── */
.pc-bulk { display: flex; flex-direction: column; gap: 14px; }
.pc-bulk-h {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  background: var(--bg-el);
  border-radius: 8px;
}
.pc-bulk-file {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--tx-0);
  font-size: 13px;
}
.pc-bulk-actions { display: flex; gap: 8px; }
.pc-bulk-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px;
  background: var(--bg-el);
  border-radius: 8px;
  position: relative;
}
.pc-bulk-step {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--bdr-faint);
  transition: border-color var(--dur-base) var(--ease-out-quint), background var(--dur-base) var(--ease-out-quint);
}
.pc-bulk-step-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--tx-2);
  margin-top: 4px;
  flex-shrink: 0;
}
.pc-bulk-step-t { font: 600 12.5px/1.3 var(--font-ui); color: var(--tx-0); }
.pc-bulk-step-s { font: 500 11px/1.3 var(--font-mono); color: var(--tx-2); margin-top: 2px; }
.pc-bulk-step-done .pc-bulk-step-dot {
  background: var(--ok);
}
.pc-bulk-step-done {
  border-color: color-mix(in srgb, var(--ok) 22%, var(--bdr-faint));
}
.pc-bulk-step-active {
  border-color: var(--inf);
  background: color-mix(in srgb, var(--inf) 4%, var(--bg-surface));
}
.pc-bulk-step-active .pc-bulk-step-dot {
  background: var(--inf);
  animation: archPulse 1.4s ease-in-out infinite;
}
.pc-bulk-step-pending { opacity: 0.55; }
.pc-bulk-preview {
  margin-top: 6px;
  border: 1px solid var(--bdr-def);
  border-radius: 10px;
  background: var(--bg-surface);
  padding: 14px 16px;
}
.pc-bulk-preview-h {
  font: 600 13px/1.3 var(--font-ui);
  color: var(--tx-0);
  margin-bottom: 8px;
}
.pc-bulk-confidence {
  font: 600 12px/1 var(--font-mono);
}

@media (max-width: 720px) {
  .pc-bulk-pipeline { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   STB-Reports — Verlaufsgrafik, Filter-Chips, Tfoot-Separator
═══════════════════════════════════════════════════════════════ */

/* ── Filter-Chips ────────────────────────────────────────── */
.stb-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 4px 0 16px;
}
.stb-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--bdr-def);
  background: var(--bg-surface);
  color: var(--tx-1);
  border-radius: 999px;
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out-quint),
    background var(--dur-fast) var(--ease-out-quint),
    border-color var(--dur-fast) var(--ease-out-quint),
    transform var(--dur-fast) var(--ease-out-quint);
}
.stb-tag:hover {
  border-color: var(--bdr-str);
  color: var(--tx-0);
  transform: translateY(-1px);
}
.stb-tag.is-on {
  background: var(--tx-0);
  color: var(--bg-surface);
  border-color: var(--tx-0);
}
.stb-tag-c {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tx-2) 14%, transparent);
  color: var(--tx-1);
  font: 600 10.5px/1 var(--font-mono);
}
.stb-tag.is-on .stb-tag-c {
  background: color-mix(in srgb, var(--bg-surface) 22%, transparent);
  color: var(--bg-surface);
}

/* ── Verlaufsgrafik ─────────────────────────────────────── */
.stb-chart-card {
  margin-top: 4px;
  padding: 18px 18px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--bdr-def);
  border-radius: 10px;
}
.stb-chart-legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-bottom: 10px;
  font: 500 11.5px/1 var(--font-mono);
  color: var(--tx-2);
  letter-spacing: 0.02em;
}
.stb-leg { display: inline-flex; align-items: center; gap: 8px; }
.stb-leg-sw {
  display: inline-block;
  width: 14px; height: 10px; border-radius: 2px;
}
.stb-leg-line {
  width: 18px; height: 3px; border-radius: 3px;
}
.stb-chart-svg {
  display: block; width: 100%; height: auto;
  max-height: 320px;
}
.stb-chart-empty {
  padding: 32px;
  color: var(--tx-2);
  text-align: center;
  font-size: 13px;
}

/* ── Tabellenfuß: bessere optische Trennung ─────────────── */
.fz-tbl tfoot td {
  padding: 14px 10px 10px;
  border-top: 2px solid var(--bdr-str);
  background: color-mix(in srgb, var(--bdr-faint) 35%, transparent);
  color: var(--tx-0);
  font-size: 13px;
}
.fz-tbl tfoot tr:first-child td {
  border-top: 2px solid var(--bdr-str);
}

/* ── Interpolierte Monatszeilen ────────────────────────── */
.stb-row-interp td:nth-child(n+2) {
  color: color-mix(in srgb, var(--tx-0) 78%, transparent);
}
.stb-interp-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border: 1px dashed var(--bdr-def);
  border-radius: 999px;
  font: 500 10.5px/1 var(--font-mono);
  color: var(--tx-2);
  letter-spacing: 0.02em;
}

/* ── Year-Pill (in Tabellen) ────────────────────────────── */
.stb-year-pill {
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--bdr-def);
  border-radius: 4px;
  font: 500 10.5px/1.5 var(--font-mono);
  color: var(--tx-2);
}

/* ── Vorjahres-Δ-Anzeige (KPI + Monatstabelle) ─────────────── */
.stb-py-delta {
  display: inline-flex; align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  font: 500 10.5px/1.3 var(--font-mono);
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: help;
  font-variant-numeric: tabular-nums;
}
.stb-py-delta.is-pos {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
}
.stb-py-delta.is-neg {
  background: color-mix(in srgb, var(--er) 12%, transparent);
  color: var(--er);
}

/* ── Hero-Meta Polish · Pill statt nackter Text ─────────── */
.fz-page > .fz-hero .fz-hero-meta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--bdr-def);
  background: var(--bg-surface);
  border-radius: 999px;
  font: 500 12px/1 var(--font-mono);
  color: var(--tx-1);
  letter-spacing: 0.02em;
  white-space: nowrap;
}