/* =========================================================================
   ServiceHub — Re-Design PTE Rows (pte-rows2)  ·  REIN OPTISCH, additiv
   Bereich: Positions-Table-Engine — Spaltenkopf, Item-Zeilen, Zeilen-Aktionen.
   Quelle: position-table-engine.css (Struktur) + sh/app.css .pos-tbl/.pe-* (Look).
   Markup-Anker (position-table-engine.js):
     .pte-header-row .pte-th        — Spaltenkopf
     .pte-row .pte-cell             — Item-Zeile + Zellen
     .pte-cell--actions             — Zeilen-Aktionsspalte (rechts)
     .pte-btn--icon                 — Aktions-Icons (Plus, Duplizieren, Loeschen, Mehr)
     .pte-gr-acts                   — Aktions-Cluster im Gruppen-Header
   --------------------------------------------------------------------------
   - ERGAENZT sh-redesign-pte.css — verfeinert nur, dupliziert NICHT.
   - Nur Optik: Farbe, Rahmen, Radius, Schatten, Mono-Ziffern, Hover, Fokus.
   - NICHTS Funktionales versteckt (kein display:none auf Buttons/Zeilen/Feldern).
   - Funktionale Status-Farben (DB negativ, Marge rot, NB violett) bleiben unberuehrt.
   - Tokens lokal auf .pte-wrap gescoped (eigener --sex-Namensraum) -> ladereihen-
     folge-unabhaengig. Light + Dark via [data-theme="dark"].
   ========================================================================= */

/* ---------- Tokens (Light) — eigener Namensraum, gescoped auf .pte-wrap -- */
.pte-wrap{
  --sex-accent:#E73D25; --sex-accent-700:#C5331E;
  --sex-accent-soft:#FCEDE7;
  --sex-honey:#D99A2B;
  --sex-ok:#16A34A; --sex-warn:#C7791A; --sex-info:#2F6BD6;
  --sex-surface:#FFFFFF; --sex-surf-2:#F6F1EB; --sex-surf-3:#EFE8E0;
  --sex-ink:#231C17; --sex-text:#463D35; --sex-text-2:#6B6157; --sex-muted:#9A8F84;
  --sex-border:#EEE5DC; --sex-border-2:#E3D9CE;
  --sex-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --sex-body:'Figtree',system-ui,sans-serif;
  --sex-mono:'Space Mono',ui-monospace,monospace;
  --sex-r-xs:7px; --sex-r-sm:9px;
  --sex-tr:.16s cubic-bezier(.2,.7,.3,1);
  --sex-ring:0 0 0 3px var(--sex-accent-soft);
}
[data-theme="dark"] .pte-wrap{
  --sex-accent:#F2543B; --sex-accent-700:#E0432B;
  --sex-accent-soft:rgba(242,84,59,.16);
  --sex-honey:#E6AE4A;
  --sex-ok:#3BC07A; --sex-warn:#E5A33C; --sex-info:#5C8FE8;
  --sex-surface:#1E1A16; --sex-surf-2:#241F1A; --sex-surf-3:#2C2620;
  --sex-ink:#F6F1EC; --sex-text:#E2D8CE; --sex-text-2:#B3A99E; --sex-muted:#8C8175;
  --sex-border:#2E2822; --sex-border-2:#3A332B;
}

/* =========================================================================
   1) SPALTENKOPF (.pte-header-row / .pte-th)
   Uppercase, muted, leichter Buchstabenabstand, ruhiger Mono-Unterton fuer
   Zahlen-Spalten-Koepfe. Verfeinert nur Typo + Rahmen — keine Layout-Aenderung.
   ========================================================================= */
.pte-wrap .pte-header-row{
  background:var(--sex-surf-2);
}
.pte-wrap .pte-th{
  color:var(--sex-muted);
  font-family:var(--sex-body);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.055em;
  text-transform:uppercase;
  border-bottom:1px solid var(--sex-border-2);
}
/* Zahlen-/Mengen-Spaltenkoepfe rechtsbuendig — folgt den Zellen */
.pte-wrap .pte-th[data-col-key="unitPriceNet"],
.pte-wrap .pte-th[data-col-key="listPriceNet"],
.pte-wrap .pte-th[data-col-key="purchasePriceNet"],
.pte-wrap .pte-th[data-col-key="lineTotalNet"],
.pte-wrap .pte-th[data-col-key="lineTotalGross"],
.pte-wrap .pte-th[data-col-key="contribution"],
.pte-wrap .pte-th[data-col-key="quantity"],
.pte-wrap .pte-th[data-col-key="quantityOrdered"],
.pte-wrap .pte-th[data-col-key="quantityDelivered"],
.pte-wrap .pte-th[data-col-key="quantityOpen"],
.pte-wrap .pte-th[data-col-key="markupPercent"],
.pte-wrap .pte-th[data-col-key="supplierDiscountPercent"],
.pte-wrap .pte-th[data-col-key="discountPercent"],
.pte-wrap .pte-th[data-col-key="taxRate"]{
  text-align:right;
}
/* Aktions-Spaltenkopf bleibt unauffaellig leer */
.pte-wrap .pte-col-actions{ background:var(--sex-surf-2); }

/* =========================================================================
   2) ITEM-ZEILEN (.pte-row / .pte-cell)
   Ruhiger Hover auf surf-2, dezente Zebra, sauberer Fokus-Ring.
   Generische Item-Zeilen — Status-/Gruppen-/NB-Varianten bleiben sh-redesign-pte.
   ========================================================================= */
.pte-wrap .pte-row{
  border-bottom:1px solid var(--sex-border);
  transition:background var(--sex-tr);
}
.pte-wrap .pte-row:hover{
  background:var(--sex-surf-2);
}
.pte-wrap .pte-cell{
  color:var(--sex-text);
}

/* Zahl-Spalten in Mono, rechtsbuendig, tabellarische Ziffern (Beträge ablesbar).
   Nur Optik — die funktionale Faerbung (z.B. negativer DB) kommt aus dem Bestand. */
.pte-wrap .pte-cell--unitPriceNet,
.pte-wrap .pte-cell--listPriceNet,
.pte-wrap .pte-cell--purchasePriceNet,
.pte-wrap .pte-cell--lineTotalNet,
.pte-wrap .pte-cell--lineTotalGross,
.pte-wrap .pte-cell--contribution,
.pte-wrap .pte-cell--quantity,
.pte-wrap .pte-cell--quantityOrdered,
.pte-wrap .pte-cell--quantityDelivered,
.pte-wrap .pte-cell--quantityOpen,
.pte-wrap .pte-cell--markupPercent,
.pte-wrap .pte-cell--supplierDiscountPercent,
.pte-wrap .pte-cell--discountPercent,
.pte-wrap .pte-cell--taxRate{
  font-family:var(--sex-mono);
  font-variant-numeric:tabular-nums;
  text-align:right;
  letter-spacing:-.01em;
}
/* Gesamt-Spalte einen Tick kraeftiger — der Blickanker je Zeile */
.pte-wrap .pte-cell--lineTotalNet,
.pte-wrap .pte-cell--lineTotalGross{
  color:var(--sex-ink);
  font-weight:700;
}

/* Editierbare Zelle — leiser Hover-Hint + klarer Fokus-Ring (additiv) */
.pte-wrap .pte-cell--editable:hover{
  background:var(--sex-surf-2);
  border-radius:var(--sex-r-xs);
}
.pte-wrap .pte-cell--editable:focus{
  outline:2px solid var(--sex-accent);
  outline-offset:-2px;
  border-radius:3px;
  background:var(--sex-surface);
  box-shadow:inset 0 0 0 1px var(--sex-accent);
}

/* =========================================================================
   3) ZEILEN-AKTIONEN (.pte-cell--actions, .pte-btn--icon, .pte-gr-acts)
   Icon-Buttons Plus / Duplizieren / Loeschen / Mehr: ruhend muted, dezent
   sichtbar, beim Zeilen-Hover hervortretend, Hover/Fokus -> accent.
   ========================================================================= */
.pte-wrap .pte-cell--actions{
  text-align:right;
  white-space:nowrap;
}

/* Aktions-Icons im Ruhezustand: gedaempft, leicht transparent */
.pte-wrap .pte-cell--actions .pte-btn--icon{
  border:1px solid transparent;
  background:transparent;
  color:var(--sex-muted);
  border-radius:var(--sex-r-xs);
  opacity:.55;
  transition:opacity var(--sex-tr),color var(--sex-tr),
             background var(--sex-tr),border-color var(--sex-tr);
}
/* Beim Ueberfahren der Zeile treten die Aktionen klar hervor */
.pte-wrap .pte-row:hover .pte-cell--actions .pte-btn--icon{
  opacity:1;
}
/* Einzelnes Icon: warmer Akzent-Hint */
.pte-wrap .pte-cell--actions .pte-btn--icon:hover{
  background:var(--sex-accent-soft);
  border-color:var(--sex-accent);
  color:var(--sex-accent);
  opacity:1;
}
.pte-wrap .pte-cell--actions .pte-btn--icon:focus-visible{
  outline:none;
  box-shadow:var(--sex-ring);
  color:var(--sex-accent);
  opacity:1;
}
.pte-wrap .pte-cell--actions .pte-btn--icon:active{
  transform:scale(.92);
}

/* Loeschen-Icon: erst beim Hover roter Akzent (kein Dauer-Alarm in der Zeile) */
.pte-wrap .pte-cell--actions .pte-btn--icon.pte-btn--danger:hover{
  background:var(--sex-accent-soft);
  border-color:var(--sex-accent);
  color:var(--sex-accent-700);
}

/* Gruppen-Header-Aktionen (Aufklappen / Gruppenmenue): folgen demselben Muster.
   Sichtbarkeit (opacity 0 -> 1 beim Gruppen-Hover) steuert der Bestand. */
.pte-wrap .pte-gr-acts .pte-btn--icon{
  border:1px solid transparent;
  background:transparent;
  color:var(--sex-muted);
  border-radius:var(--sex-r-xs);
  transition:color var(--sex-tr),background var(--sex-tr),border-color var(--sex-tr);
}
.pte-wrap .pte-gr-acts .pte-btn--icon:hover{
  background:var(--sex-accent-soft);
  border-color:var(--sex-accent);
  color:var(--sex-accent);
}
.pte-wrap .pte-gr-acts .pte-btn--icon:focus-visible{
  outline:none;
  box-shadow:var(--sex-ring);
  color:var(--sex-accent);
}

/* Add-Bar-Icon-Buttons in Systemgruppen (Aufklappen etc.) — dezent angeglichen */
.pte-wrap .pte-row--system-group .pte-btn--icon:hover,
.pte-wrap .pte-cell--system-group .pte-btn--icon:hover{
  background:var(--sex-accent-soft);
  border-color:var(--sex-accent);
  color:var(--sex-accent);
}

/* Drag-Handle in der Zeile: ruhend kaum sichtbar, beim Zeilen-Hover spuerbar */
.pte-wrap .pte-cell--drag .pte-drag-handle{
  color:var(--sex-border-2);
  border-radius:var(--sex-r-xs);
  transition:color var(--sex-tr),background var(--sex-tr);
}
.pte-wrap .pte-row:hover .pte-cell--drag .pte-drag-handle{
  color:var(--sex-muted);
}
.pte-wrap .pte-cell--drag .pte-drag-handle:hover{
  color:var(--sex-accent);
  background:var(--sex-accent-soft);
}