/* PR4.17 #266 Phase 4 — Redesign-Restyle für die relocateten Legacy-Formular-Modals.
   HAND-GEPFLEGT (im Gegensatz zu style-redesign.css, das aus dem Design-Bundle GENERIERT
   wird — Generator nicht re-runbar). Präzedenz: public/fonts.css.

   Die statischen Formular-Modals (opportunity/employee/event/customer-history/admin-*)
   werden im Redesign per relocateModalForRedesign() nach #app-crm.crm verschoben. Dort
   greifen diese Regeln und gleichen die Legacy-Chrome (.modal-overlay/.modal-header/
   -title/-body/-footer/.modal-close) an den Executive-Look aus style-redesign.css an.

   Scoping: Alles unter `.crm .modal-overlay …`. NUR die relocateten Legacy-Modals tragen
   `.modal-overlay` (die konvertierten Overlay-Dialoge nutzen `.modal-veil`), daher trifft
   das exakt diese Container. Die Ancestor-Selektoren (Spezifität ≥ 0,3,0) schlagen die
   generierten `.crm .modal-body`/`.crm .modal`-Regeln (0,2,0) dort, wo Namen kollidieren.
   Alle Farben über Theme-Tokens → Light+Dark automatisch (der Veil ist bewusst in beiden
   Themes identisch, analog `.crm .modal-veil`). */

/* Veil — wie `.crm .modal-veil` (display bleibt vom `.open`-Toggle gesteuert). */
.crm .modal-overlay {
  background: rgba(15, 20, 30, .42);
  backdrop-filter: none;
  z-index: 90;
  padding: 24px;
}

/* Box — die generierte `.crm .modal` liefert bereits Radius/Border/Shadow/Surface;
   hier nur die Legacy-Animation auf die Redesign-Kurve ziehen. */
.crm .modal-overlay .modal {
  animation: cmdkIn .2s cubic-bezier(.2, .7, .3, 1);
}

/* Header — wie `.crm .modal-head`. */
.crm .modal-overlay .modal-header {
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
}

.crm .modal-overlay .modal-title {
  font-family: var(--f-cond);
  font-size: 20px;
  font-weight: 700;
}

/* Body — die generierte `.crm .modal-body` (0,2,0) schlägt das Legacy-`.modal-body`
   (0,1,0) und setzt selbst kein Padding → 0. Hier den Innenabstand wiederherstellen
   (Formulare brauchen ihn). */
.crm .modal-overlay .modal-body {
  padding: 22px 24px;
  flex: 1;
  overflow-y: auto;
}

/* Footer — wie `.crm .modal-foot`. */
.crm .modal-overlay .modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface-2);
}

/* Legacy-Close-Button (×) an den Redesign-`.icon-btn`-Look angleichen. */
.crm .modal-overlay .modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.crm .modal-overlay .modal-close:hover {
  background: var(--bg-surface-2);
  border-color: var(--border);
  color: var(--text-1);
}

/* ============================================================
   PR1.127 (#278) — Drag&Drop-Staffing (Redesign-Shell)
   Additiv, `.crm`-gescopt. Team-Card (.staffing-dropzone) ist Drop-Ziel für
   Kandidaten-Drag; Highlight beim Drüberziehen (.staffing-dropzone-over) via
   staffing-dnd.js (Maus + Touch). Klick-Zuweisung bleibt unberührt.
   Farben über Theme-Tokens → Light+Dark automatisch, WCAG-AA (blauer Rahmen
   + dezenter Tint auf Surface, kein reiner Farb-Träger für Information). */

/* Ruhezustand: dezent Drop-fähig signalisieren, ohne die Card-Optik zu stören. */
.crm .staffing-dropzone {
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

/* Highlight beim Drüberziehen: kräftiger adesso-Blau-Rahmen + Tint-Fläche. */
.crm .staffing-dropzone.staffing-dropzone-over {
  border-color: var(--ad-blue);
  box-shadow: 0 0 0 2px var(--ad-blue) inset;
  background: color-mix(in srgb, var(--ad-blue) 8%, transparent);
}

/* Card, die gerade gezogen wird (Touch-Polyfill setzt .dragging). */
.crm .staffing-dropzone [data-staffing-drag].dragging,
.crm [data-staffing-drag].dragging {
  opacity: .5;
}

/* „Verfügbare Kandidaten"-Sektion im Team-Tab — Drag-Quelle für die Dropzone. */
.crm .staffing-candidates {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ad-blue) 4%, transparent);
}

.crm .staffing-candidates .sc-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
}

.crm .staffing-candidates .sc-head .meta {
  font-weight: 400;
  color: var(--text-3);
  margin-left: 6px;
}

.crm .staffing-candidates .sc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Einzelne Kandidaten-Chip: kompakt, greifbar (grab-Cursor). */
.crm .staffing-candidate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-surface-1, var(--bg-surface-2));
  color: var(--text-1);
  font-size: 12.5px;
  cursor: grab;
  user-select: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.crm .staffing-candidate:hover {
  border-color: var(--ad-blue);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.crm .staffing-candidate:active { cursor: grabbing; }

.crm .staffing-candidate .sc-name {
  font-weight: 500;
  white-space: nowrap;
}

/* Tastatur-Fokus sichtbar (WCAG 2.4.7) — falls die Chips fokussierbar gemacht werden. */
.crm .staffing-candidate:focus-visible {
  outline: 2px solid var(--ad-blue);
  outline-offset: 2px;
}

/* ============================================================
   PR1.197 (#356) — Formularfelder in den verschobenen Modals
   ============================================================
   BEFUND aus der lokalen Sichtpruefung am 07.08.2026 (Pruefseite
   test/ui-harness/opp-mask.html, beide Shells nebeneinander):

   In der Redesign-Shell waren die Eingabefelder aller hierher verschobenen
   Legacy-Modals praktisch unlesbar — dunkler Text auf dunklem Grund. Die Ursache
   liegt in zwei Regeln, die sich nie begegnet sind: style.css setzt fuer jedes
   Formularfeld das globale `--bg-input` (dunkel), waehrend der .crm-Scope
   `--text-1` auf eine dunkle Schriftfarbe umstellt, weil das Redesign hell ist.
   Solange die Modals unter <body> hingen, passte beides zusammen; seit
   relocateModalForRedesign() sie nach #app-crm.crm verschiebt, nicht mehr.

   BESTANDSFEHLER, nicht von PR1.197 verursacht — die Felder tragen dieselben
   Klassen wie vorher. Er faellt hier auf, weil PR1.197 der erste Anlass ist, die
   Anlage-Maske im Redesign wirklich anzusehen. Behoben statt gemeldet, weil ein
   Feld, dessen Inhalt man nicht lesen kann, kein Produktionsreife-Niveau ist
   (Konvention 20) und die Maske ohne das ihr eigenes Akzeptanzkriterium reisst.

   Bewusst NICHT auf #opp-modal eingeschraenkt: dieselbe Datei ist ausdruecklich
   fuer alle verschobenen Formular-Modals zustaendig (Kopfkommentar), und eine
   Maske zu reparieren waehrend die Nachbarn kaputt bleiben, waere die schlechtere
   Haelfte der Loesung. */
.crm .modal-overlay .modal input[type="text"],
.crm .modal-overlay .modal input[type="number"],
.crm .modal-overlay .modal input[type="date"],
.crm .modal-overlay .modal input[type="url"],
.crm .modal-overlay .modal input[type="email"],
.crm .modal-overlay .modal input[type="password"],
/* PR1.237 #410 — `search` fehlte in dieser Liste. Aufgefallen am Suchfeld der
   Mitarbeiter-Auswahl (modals/project-staff-picker.js), gilt aber fuer jedes kuenftige
   Suchfeld in einem verschobenen Modal: ohne den Selektor bleibt es auf den
   Browser-Standardfarben und leuchtet hell aus dem Dialog heraus. Dieselbe Begruendung
   wie im Kommentar oben — die Nachbarn nicht kaputt lassen. */
.crm .modal-overlay .modal input[type="search"],
.crm .modal-overlay .modal select,
.crm .modal-overlay .modal textarea {
  background: var(--bg-surface);
  color: var(--text-1);
  border-color: var(--border);
}

.crm .modal-overlay .modal input::placeholder,
.crm .modal-overlay .modal textarea::placeholder {
  color: var(--text-3);
}

/* Die Beschriftungen kamen aus demselben Grund zu blass heraus. */
.crm .modal-overlay .modal .form-group > label {
  color: var(--text-2);
}

/* PR1.198 #357 — Der ⓘ steht neben dem Label in einer `.fh-row`. Damit ist das
   Label kein Direktkind der `.form-group` mehr und die Regel oben greift nicht
   mehr — die Beschriftung waere wieder zu blass. */
.crm .modal-overlay .modal .form-group .fh-row > label {
  color: var(--text-2);
}

/* ============================================================
   PR1.205 (#364) — Gesperrter Ausloeser im Redesign
   ============================================================
   BEFUND aus der lokalen Sichtpruefung am 10.08.2026 (Pruefseite
   test/ui-harness/opp-mask.html, beide Shells nebeneinander):

   „Vorschlaege erzeugen" startet gesperrt, solange zu wenig Text im Feld steht.
   In der klassischen Shell ist das sichtbar; im Redesign stand der Knopf in
   vollem adesso-Blau und sah damit aus wie jeder andere Primaer-Knopf — er lud
   zu einem Klick ein, der nichts tut. Die Regel in style.css verliert dort gegen
   den `.crm .btn-primary`-Scope, der spaeter geladen wird.

   Repariert in dieser Datei statt mit einer !important-Regel in style.css: hier
   liegen die `.crm`-Korrekturen der verschobenen Modals, und der Zustand braucht
   ohnehin Redesign-Tokens statt der Legacy-Flaechenleiter. */
.crm .opp-intake-run:disabled {
  background: var(--bg-surface-2);
  color: var(--text-3);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
}

.crm .opp-intake-run:disabled:hover {
  background: var(--bg-surface-2);
  transform: none;
}

/* PR1.205 (#364) — Zweitakzent der Vorschlags-Kennzeichnung.
   Die klassische Shell markiert Vorschlaege in ihrem Zweitakzent (Cyan). Das
   Redesign fuehrt dafuer adesso-Violett — die Shell-Trennungs-Regel aus DESIGN.md
   verbietet, den Legacy-Wert einfach durchzureichen. Nicht adesso-Blau: das ist
   die Interaktivfarbe und bleibt der Interaktion vorbehalten (Ein-Zweck-Regel). */
.crm { --suggest-accent: var(--ad-violet); }