/* =========================================================================
   ServiceHub Redesign — BEREICH ed-rowactions
   0b-Block 15: PTE Zeilen-Aktionen (+ / Duplizieren / Loeschen / Mehr-Menue)
   --------------------------------------------------------------------------
   REIN OPTISCH. Keine Logik, keine Felder, keine Endpunkte, keine Events,
   keine Rechte. Nichts wird entfernt oder versteckt. Nur Farbe / Rahmen /
   Radius / Schatten der Icon-Buttons je Positionszeile + des Kontext-Menues.

   Ziel-Markup (position-table-engine.js):
     td.pte-cell--actions  > button.pte-btn.pte-btn--icon  (+ / Dupl. / Mehr)
     td.pte-cell--actions  > button.pte-btn.pte-btn--icon.pte-btn--danger (X Loeschen)
     div.pte-gr-acts       > button.pte-btn.pte-btn--icon  (Gruppen-Akt. + / Menue)
     div.pte-ctx-menu      > button.pte-ctx-item            (Mehr-Menue / Gruppenmenue)

   Tokens lokal auf die jeweiligen Container gescoped -> ladereihenfolge-
   unabhaengig. Das Kontext-Menue wird per JS an document.body angehaengt,
   liegt also ausserhalb von .pte-wrap -> eigener Token-Scope auf .pte-ctx-menu.
   Light + Dark via [data-theme="dark"].
   ========================================================================= */

/* ---------- Tokens (Light) auf die Zeilen-Aktions-Container ---------- */
.pte-cell--actions,
.pte-gr-acts,
.pte-ctx-menu{
  --rd-accent:#E73D25;
  --rd-accent-700:#C5331E;
  --rd-accent-soft:#FCEDE7;
  --rd-danger:#E73D25;
  --rd-danger-soft:#FCEDE7;
  --rd-honey:#D99A2B;
  --rd-violet:#7C5BD6;
  --rd-violet-soft:#F0ECFB;
  --rd-surface:#FFFFFF;
  --rd-surf-2:#F6F1EB;
  --rd-ink:#231C17;
  --rd-text:#463D35;
  --rd-muted:#9A8F84;
  --rd-border:#EEE5DC;
  --rd-border-2:#E3D9CE;
  --rd-r-sm:9px;
  --rd-r-md:12px;
  --rd-shadow:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --rd-shadow-lg:0 14px 34px rgba(120,80,50,.14);
  --rd-ring:0 0 0 3px var(--rd-accent-soft);
  --rd-tr:.16s cubic-bezier(.2,.7,.3,1);
  --rd-font-body:'Figtree',system-ui,sans-serif;
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .pte-cell--actions,
[data-theme="dark"] .pte-gr-acts,
[data-theme="dark"] .pte-ctx-menu{
  --rd-accent:#F2543B;
  --rd-accent-700:#E0432B;
  --rd-accent-soft:rgba(242,84,59,.16);
  --rd-danger:#F2543B;
  --rd-danger-soft:rgba(242,84,59,.16);
  --rd-honey:#E6AE4A;
  --rd-violet:#9D82E6;
  --rd-violet-soft:rgba(157,130,230,.16);
  --rd-surface:#1E1A16;
  --rd-surf-2:#241F1A;
  --rd-ink:#F6F1EC;
  --rd-text:#E2D8CE;
  --rd-muted:#8C8175;
  --rd-border:#2E2822;
  --rd-border-2:#3A332B;
  --rd-shadow:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --rd-shadow-lg:0 14px 34px rgba(0,0,0,.5);
}

/* =========================================================================
   1) Zeilen-Aktions-Icon-Buttons (+ / Duplizieren / Mehr)
   Container: td.pte-cell--actions und Gruppen-Aktionen div.pte-gr-acts
   Ruhezustand: zurueckhaltend (muted, transparent). Hover: warm -> accent.
   ========================================================================= */
.pte-cell--actions .pte-btn--icon,
.pte-gr-acts .pte-btn--icon{
  color:var(--rd-muted);
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--rd-r-sm);
  min-width:28px;
  line-height:1;
  font-family:var(--rd-font-body);
  transition:color var(--rd-tr),background-color var(--rd-tr),
             border-color var(--rd-tr),box-shadow var(--rd-tr),
             transform var(--rd-tr);
}

/* Hover/Fokus: weicher accent-Teppich, Icon faerbt sich accent */
.pte-cell--actions .pte-btn--icon:hover,
.pte-gr-acts .pte-btn--icon:hover{
  color:var(--rd-accent);
  background:var(--rd-accent-soft);
  border-color:var(--rd-accent-soft);
}
.pte-cell--actions .pte-btn--icon:focus-visible,
.pte-gr-acts .pte-btn--icon:focus-visible{
  outline:none;
  color:var(--rd-accent);
  border-color:var(--rd-accent);
  box-shadow:var(--rd-ring);
}
.pte-cell--actions .pte-btn--icon:active,
.pte-gr-acts .pte-btn--icon:active{
  transform:translateY(.5px);
}

/* Loeschen (X): bleibt dezent in Ruhe, Hover = warmes Rot.
   Selektor deckt sowohl die normale Zeile als auch die Trennlinien-Zeile ab. */
.pte-cell--actions .pte-btn--icon.pte-btn--danger:hover,
.pte-cell--actions .pte-btn--danger.pte-btn--icon:hover{
  color:var(--rd-danger);
  background:var(--rd-danger-soft);
  border-color:var(--rd-danger-soft);
}
.pte-cell--actions .pte-btn--icon.pte-btn--danger:focus-visible{
  outline:none;
  color:var(--rd-danger);
  border-color:var(--rd-danger);
  box-shadow:var(--rd-ring);
}

/* =========================================================================
   2) Kontext-Menue (Mehr-Menue / Gruppenmenue) als weiche, warme Karte
   Container: div.pte-ctx-menu  (per JS an document.body angehaengt)
   ========================================================================= */
.pte-ctx-menu{
  background:var(--rd-surface);
  border:1px solid var(--rd-border-2);
  border-radius:var(--rd-r-md);
  box-shadow:var(--rd-shadow-lg);
  padding:6px;
  font-family:var(--rd-font-body);
}

/* Menue-Eintraege: weiche Pillen-Hover, warme Toene */
.pte-ctx-menu .pte-ctx-item{
  color:var(--rd-text);
  background:transparent;
  border:none;
  border-radius:var(--rd-r-sm);
  padding:8px 12px;
  transition:color var(--rd-tr),background-color var(--rd-tr);
}
.pte-ctx-menu .pte-ctx-item:hover{
  background:var(--rd-surf-2);
  color:var(--rd-ink);
}
.pte-ctx-menu .pte-ctx-item:focus-visible{
  outline:none;
  background:var(--rd-surf-2);
  color:var(--rd-ink);
  box-shadow:var(--rd-ring);
}

/* Loeschen-Eintrag (falls vorhanden): warmes Rot */
.pte-ctx-menu .pte-ctx-item--danger{
  color:var(--rd-danger);
}
.pte-ctx-menu .pte-ctx-item--danger:hover,
.pte-ctx-menu .pte-ctx-item--danger:focus-visible{
  background:var(--rd-danger-soft);
  color:var(--rd-danger);
}

/* KI-Eintrag: warmer Violett-Akzent statt kaltem Blau-Lila */
.pte-ctx-menu .pte-ctx-item--ai{
  color:var(--rd-violet);
  font-weight:600;
}
.pte-ctx-menu .pte-ctx-item--ai:hover,
.pte-ctx-menu .pte-ctx-item--ai:focus-visible{
  background:var(--rd-violet-soft);
  color:var(--rd-violet);
}

/* Die schmalen Inline-Trenner zwischen Menuegruppen (per JS als div mit
   hellem Background erzeugt) warm einfaerben — nur Optik. */
.pte-ctx-menu > div[style]{
  background:var(--rd-border) !important;
}