/* =========================================================================
   ServiceHub Redesign — Block 11: PTE Spaltenkopf + Konfig/Reset/Excel/CSV
   Bereich: ed-colconfig
   ──────────────────────────────────────────────────────────────────────────
   REIN OPTISCH. Restyled NUR:
     - den Spalten-Kopf der Position-Table-Engine (.pte-header-row / .pte-th)
     - die Toolbar-Buttons Spalten-Konfig / Reset / Excel / CSV
       (data-pte-action: columns-config | columns-reset | export-excel | export-csv)
     - das Spalten-Konfig-Menue (#pte-col-config-dialog)
   KEINE Logik, keine Felder, keine Routen, keine Events, keine Rechte.
   Nichts wird versteckt; alle Buttons/Zeilen bleiben sichtbar + klickbar.

   Tokens: eigene --rd-* lokal gescoped auf die Bereichs-Container, damit die
   Datei ladereihenfolge-unabhaengig ist. Werte gespiegelt aus theme.css (warm).
   Light + Dark via [data-theme="dark"]. Nur Tokens, keine Hardcodes im Stil.
   ========================================================================= */

/* ---------- Tokens (Light) — auf alle Bereichs-Container gescoped ---------- */
.pte-toolbar,
.pte-header-row,
#pte-col-config-dialog{
  --rd-accent:#E73D25;
  --rd-accent-700:#C5331E;
  --rd-accent-soft:#FCEDE7;
  --rd-honey:#D99A2B;
  --rd-ok:#16A34A;
  --rd-warn:#C7791A;
  --rd-info:#2F6BD6;
  --rd-violet:#7C5BD6;

  --rd-bg:#FAF6F2;
  --rd-surface:#FFFFFF;
  --rd-surf-2:#F6F1EB;
  --rd-surf-3:#EFE8E0;

  --rd-ink:#231C17;
  --rd-text:#463D35;
  --rd-text-2:#6B6157;
  --rd-muted:#9A8F84;

  --rd-border:#EEE5DC;
  --rd-border-2:#E3D9CE;
  --rd-field:#F6F1EB;

  --rd-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --rd-font-body:'Figtree',system-ui,sans-serif;
  --rd-font-mono:'Space Mono',ui-monospace,monospace;

  --rd-r-xs:7px;
  --rd-r-sm:9px;
  --rd-r-md:12px;
  --rd-r-lg:16px;
  --rd-r-pill:999px;

  --rd-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --rd-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --rd-sh-lg:0 18px 44px rgba(120,80,50,.14);
  --rd-ring:0 0 0 3px var(--rd-accent-soft);
  --rd-tr:.16s cubic-bezier(.2,.7,.3,1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .pte-toolbar,
[data-theme="dark"] .pte-header-row,
[data-theme="dark"] #pte-col-config-dialog{
  --rd-accent:#F2543B;
  --rd-accent-700:#E0432B;
  --rd-accent-soft:rgba(242,84,59,.16);
  --rd-honey:#E6AE4A;
  --rd-ok:#3BC07A;
  --rd-warn:#E5A33C;
  --rd-info:#5C8FE8;
  --rd-violet:#9D82E6;

  --rd-bg:#15120F;
  --rd-surface:#1E1A16;
  --rd-surf-2:#241F1A;
  --rd-surf-3:#2C2620;

  --rd-ink:#F6F1EC;
  --rd-text:#E2D8CE;
  --rd-text-2:#B3A99E;
  --rd-muted:#8C8175;

  --rd-border:#2E2822;
  --rd-border-2:#3A332B;
  --rd-field:#241F1A;

  --rd-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --rd-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --rd-sh-lg:0 18px 44px rgba(0,0,0,.5);
}

/* =========================================================================
   1) SPALTENKOPF  (.pte-header-row / .pte-th)
   ========================================================================= */
.pte-header-row{
  background:var(--rd-surf-2);
}

.pte-th{
  font-family:var(--rd-font-head);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rd-muted);
  border-bottom:1px solid var(--rd-border-2);
  padding:9px 10px;
}

/* Drag-Zustaende warm umgefaerbt */
.pte-th--dragging{
  opacity:.4;
  background:var(--rd-surf-3) !important;
}
.pte-th--drag-over{
  background:var(--rd-accent-soft) !important;
  box-shadow:inset 0 0 0 2px var(--rd-accent);
  border-radius:var(--rd-r-xs);
}

/* Resize-Griff in Akzentfarbe */
.pte-col-resize:hover{ background:var(--rd-accent); opacity:.45; }
.pte-col-resize:active{ background:var(--rd-accent); opacity:.8; }

/* =========================================================================
   2) TOOLBAR-BUTTONS  Spalten-Konfig / Reset / Excel / CSV
   Nur die vier Block-11-Buttons treffen — ueber data-pte-action selektiert,
   damit + Position / Gruppe / Text usw. unangetastet bleiben.
   ========================================================================= */
.pte-toolbar .pte-btn[data-pte-action="columns-config"],
.pte-toolbar .pte-btn[data-pte-action="columns-reset"],
.pte-toolbar .pte-btn[data-pte-action="export-excel"],
.pte-toolbar .pte-btn[data-pte-action="export-csv"]{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:var(--rd-r-pill);
  border:1px solid var(--rd-border-2);
  background:var(--rd-surface);
  color:var(--rd-text-2);
  font-family:var(--rd-font-body);
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:var(--rd-sh-sm);
  transition:var(--rd-tr);
}

.pte-toolbar .pte-btn[data-pte-action="columns-config"]:hover,
.pte-toolbar .pte-btn[data-pte-action="columns-reset"]:hover,
.pte-toolbar .pte-btn[data-pte-action="export-excel"]:hover,
.pte-toolbar .pte-btn[data-pte-action="export-csv"]:hover{
  border-color:var(--rd-accent);
  color:var(--rd-accent);
  background:var(--rd-accent-soft);
}

.pte-toolbar .pte-btn[data-pte-action="columns-config"]:focus-visible,
.pte-toolbar .pte-btn[data-pte-action="columns-reset"]:focus-visible,
.pte-toolbar .pte-btn[data-pte-action="export-excel"]:focus-visible,
.pte-toolbar .pte-btn[data-pte-action="export-csv"]:focus-visible{
  outline:none;
  box-shadow:var(--rd-ring);
  border-color:var(--rd-accent);
}

/* Export-Buttons (Excel/CSV) bekommen einen dezenten Honig-Akzent beim Hover */
.pte-toolbar .pte-btn[data-pte-action="export-excel"]:hover,
.pte-toolbar .pte-btn[data-pte-action="export-csv"]:hover{
  border-color:var(--rd-honey);
  color:var(--rd-honey);
  background:var(--rd-surf-2);
}

/* =========================================================================
   3) SPALTEN-KONFIG-MENUE  (#pte-col-config-dialog) — als weiche Karte
   Inline-Styles aus der JS-Erzeugung werden gezielt mit hoeherer Spezifitaet
   ueberschrieben (kein !important noetig, ID + Element traegt).
   ========================================================================= */
#pte-col-config-dialog{
  background:var(--rd-surface);
  color:var(--rd-text);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  box-shadow:var(--rd-sh-lg);
  padding:22px 24px;
  font-family:var(--rd-font-body);
}

/* Titel */
#pte-col-config-dialog h3{
  font-family:var(--rd-font-head);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--rd-ink);
}

/* Tabelle im Dialog */
#pte-col-config-dialog table{
  width:100%;
  border-collapse:collapse;
}
#pte-col-config-dialog thead th{
  font-family:var(--rd-font-head);
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rd-muted);
  text-align:left;
  padding:0 8px 8px;
  border-bottom:1px solid var(--rd-border);
}

/* Zeilen */
#pte-col-config-dialog tbody tr{
  border-bottom:1px solid var(--rd-border);
  border-radius:var(--rd-r-sm);
  transition:var(--rd-tr);
}
#pte-col-config-dialog tbody tr:last-child{ border-bottom:none; }
#pte-col-config-dialog tbody tr:hover{ background:var(--rd-surf-2); }
#pte-col-config-dialog tbody td{
  font-size:13px;
  color:var(--rd-text);
  vertical-align:middle;
}
/* Drag-Griff-Spalte + Pflicht-Hinweis dezenter */
#pte-col-config-dialog tbody td[title]{ color:var(--rd-muted); }
#pte-col-config-dialog tbody td span{ color:var(--rd-muted); }

/* Checkbox in Akzentfarbe */
#pte-col-config-dialog input[type="checkbox"]{
  accent-color:var(--rd-accent);
  cursor:pointer;
}
#pte-col-config-dialog input[type="checkbox"]:disabled{
  cursor:not-allowed;
  opacity:.6;
}

/* Dialog-Buttons (Abbrechen / Speichern) */
#pte-col-config-dialog .pte-btn{
  border-radius:var(--rd-r-pill);
  font-family:var(--rd-font-body);
  font-weight:600;
  transition:var(--rd-tr);
}
#pte-col-config-dialog .pte-btn--ghost{
  background:var(--rd-surface);
  border:1px solid var(--rd-border-2);
  color:var(--rd-text);
}
#pte-col-config-dialog .pte-btn--ghost:hover{
  border-color:var(--rd-accent);
  color:var(--rd-accent);
  background:var(--rd-accent-soft);
}
#pte-col-config-dialog .pte-btn--primary{
  background:var(--rd-accent);
  border:1px solid var(--rd-accent);
  color:#fff;
  box-shadow:0 5px 14px rgba(231,61,37,.28);
}
#pte-col-config-dialog .pte-btn--primary:hover{
  background:var(--rd-accent-700);
  border-color:var(--rd-accent-700);
  transform:translateY(-1px);
}
#pte-col-config-dialog .pte-btn:focus-visible{
  outline:none;
  box-shadow:var(--rd-ring);
}