/* 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: var(--fs-title);
  font-weight: 600;
}

/* 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: var(--fs-ui);
  font-weight: 500;
  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: var(--fs-ui);
  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); }

/* ============================================================
   PR1.359 #573 — Meldefenster „Status melden" im Redesign
   ============================================================
   Das Fenster ist EINS fuer beide Shells (modals/status-report-modal.js); Geruest und
   Abstaende stehen in style.css (.srm-*). Hier nur die Farben auf die Redesign-Tokens,
   damit kein Alt-Cyan/-Gruen in der neuen Shell aufblitzt (Konvention 20, „ein Look").
   Ampel-Marker in den -700-Stufen, gewaehlter Knopf mit Tint + Schrift in -900. */
.crm .modal-overlay .srm-row { border-color: var(--border); border-radius: var(--r-lg); }
.crm .modal-overlay .srm-row--missing,
.crm .modal-overlay .srm-text[aria-invalid="true"] { border-color: var(--ad-red-700); }
.crm .modal-overlay .srm-color { border-color: var(--border-strong); color: var(--text-2); }
.crm .modal-overlay .srm-color:hover { background: var(--bg-hover); }
.crm .modal-overlay .srm-color:focus-visible,
.crm .modal-overlay .srm-text:focus-visible { outline-color: var(--focus); }
.crm .modal-overlay .srm-color-ok .srm-pip { background: var(--ad-green-700); }
.crm .modal-overlay .srm-color-warn .srm-pip { background: var(--ad-orange-700); }
.crm .modal-overlay .srm-color-bad .srm-pip { background: var(--ad-red-700); }
.crm .modal-overlay .srm-color-ok[aria-checked="true"]   { background: var(--tint-green); color: var(--ad-green-900);  border-color: var(--ad-green-700); }
.crm .modal-overlay .srm-color-warn[aria-checked="true"] { background: var(--tint-warn);  color: var(--ad-orange-900); border-color: var(--ad-orange-700); }
.crm .modal-overlay .srm-color-bad[aria-checked="true"]  { background: var(--tint-red);   color: var(--ad-red-700);    border-color: var(--ad-red-700); }
.crm.dark .modal-overlay .srm-color-ok[aria-checked="true"],   html[data-theme="dark"] .crm .modal-overlay .srm-color-ok[aria-checked="true"]   { color: var(--ad-green); }
.crm.dark .modal-overlay .srm-color-warn[aria-checked="true"], html[data-theme="dark"] .crm .modal-overlay .srm-color-warn[aria-checked="true"] { color: var(--ad-orange); }
.crm.dark .modal-overlay .srm-color-bad[aria-checked="true"],  html[data-theme="dark"] .crm .modal-overlay .srm-color-bad[aria-checked="true"]  { color: var(--ad-red-300); }
.crm .modal-overlay .srm-error { color: var(--ad-red-700); background: var(--tint-red); border-color: color-mix(in srgb, var(--ad-red-700) 45%, transparent); }
.crm.dark .modal-overlay .srm-error, html[data-theme="dark"] .crm .modal-overlay .srm-error { color: var(--ad-red-300); }
.crm .modal-overlay .srm-confirm { background: var(--tint-warn); border-top-color: var(--border); }
.crm .modal-overlay .srm-confirm-text { color: var(--text-1); }
.crm .modal-overlay .srm-hint,
.crm .modal-overlay .srm-sub,
.crm .modal-overlay .srm-last,
.crm .modal-overlay .srm-legend { color: var(--text-3); }
.crm .modal-overlay .srm-hint { color: var(--text-2); }
.crm .modal-overlay .srm-dim { color: var(--text-1); }
/* PR1.479 #737 — Leitfragen, „Wie zuletzt", Vorschau Projektstatus: Redesign-Tokens. */
.crm .modal-overlay .srm-legend,
.crm .modal-overlay .srm-guide,
.crm .modal-overlay .srm-text--taken { background: var(--bg-surface-2, var(--bg-hover)); }
.crm .modal-overlay .srm-guide { color: var(--text-2); border-radius: var(--r-sm); }
.crm .modal-overlay .srm-guide-q,
.crm .modal-overlay .srm-dim-col { color: var(--text-1); }
.crm .modal-overlay .srm-pip-ok { background: var(--ad-green-700); }
.crm .modal-overlay .srm-pip-warn { background: var(--ad-orange-700); }
.crm .modal-overlay .srm-pip-bad { background: var(--ad-red-700); }
.crm .modal-overlay .srm-same { border-color: var(--border-strong); color: var(--accent-text, var(--ad-blue-700)); border-radius: var(--r-md); }
.crm .modal-overlay .srm-same[aria-pressed="true"] { background: var(--tint-blue); border-color: var(--ad-blue); }
.crm .modal-overlay .srm-same:focus-visible { outline-color: var(--focus); }
.crm .modal-overlay .srm-kbd { border-color: var(--border-strong); color: var(--text-3); }
.crm .modal-overlay .srm-row-error { color: var(--ad-red-700); }
.crm.dark .modal-overlay .srm-row-error, html[data-theme="dark"] .crm .modal-overlay .srm-row-error { color: var(--ad-red-300); }
.crm .modal-overlay .srm-status-ok { background: var(--tint-green); color: var(--ad-green-900); }
.crm .modal-overlay .srm-status-warn { background: var(--tint-warn); color: var(--ad-orange-900); }
.crm .modal-overlay .srm-status-bad { background: var(--tint-red); color: var(--ad-red-700); }
.crm.dark .modal-overlay .srm-status-ok, html[data-theme="dark"] .crm .modal-overlay .srm-status-ok { color: var(--ad-green); }
.crm.dark .modal-overlay .srm-status-warn, html[data-theme="dark"] .crm .modal-overlay .srm-status-warn { color: var(--ad-orange); }
.crm.dark .modal-overlay .srm-status-bad, html[data-theme="dark"] .crm .modal-overlay .srm-status-bad { color: var(--ad-red-300); }
/* PR1.361 #575 — Fenster „Monitoring abschalten": nur Farben, Abstaende in style.css. */
.crm .modal-overlay .mof-label { color: var(--text-1); }
.crm .modal-overlay .mof-req { color: var(--text-3); }
/* PR1.560 #842 — Konflikt-Dialog: nur Farben, Abstaende in style.css. */
.crm .modal-overlay .scd-intro,
.crm .modal-overlay .scd-table td,
.crm .modal-overlay .scd-empty,
.crm .modal-overlay .scd-status { color: var(--text-2); }
.crm .modal-overlay .scd-who,
.crm .modal-overlay .scd-table tbody th { color: var(--text-1); }
.crm .modal-overlay .scd-name,
.crm .modal-overlay .scd-table thead th { color: var(--text-3); }
.crm .modal-overlay .scd-entry + .scd-entry,
.crm .modal-overlay .scd-table th,
.crm .modal-overlay .scd-table td { border-color: var(--border); }
.crm .modal-overlay .scd-error { color: var(--ad-red-700); background: var(--tint-red); border-radius: var(--r-sm); }
.crm.dark .modal-overlay .scd-error, html[data-theme="dark"] .crm .modal-overlay .scd-error { color: var(--ad-red-300); }
.crm .modal-overlay .scd .btn:focus-visible { outline-color: var(--focus); }
/* PR1.391 #618 — Warn-Hinweistext in Masken (Projektname-Echo, Projektleitung): --warning ist
   hier --ad-orange-700 (3:1) — fuer kleinen Text zu blass. Textstufe -900 hell, Grundton dunkel. */
.crm .modal-overlay .pflichtfeld-warn-text { color: var(--ad-orange-900); }
.crm.dark .modal-overlay .pflichtfeld-warn-text, html[data-theme="dark"] .crm .modal-overlay .pflichtfeld-warn-text { color: var(--ad-orange); }

/* PR1.438 (#677) — Native <select> outside the relocated modals (role cards, Jira dialog, …)
   kept the browser default and showed dark text on a dark field in the dark theme
   (open finding from Evidenzen, PR1.2xx). Zero specificity: any component rule still wins. */
.crm :where(select) {
  background-color: var(--bg-surface);
  color: var(--text-1);
}
.crm :where(select option, select optgroup) {
  background-color: var(--bg-surface);
  color: var(--text-1);
}

/* PR1.513 (#779) — Kundenmaske in der neuen Ansicht. Layout kommt aus style.css
   (ein Markup, beide Shells); hier nur Flaechen, Linien, Schrift und Warnton
   der neuen Ansicht. */
.crm .modal-overlay .acc-logo-box { background: var(--bg-surface); border-color: var(--border); border-radius: .9rem; }
.crm .modal-overlay .acc-logo-cam,
.crm .modal-overlay .acc-logo-menu { background: var(--bg-surface); border-color: var(--border); }
.crm .modal-overlay .acc-logo-menu { box-shadow: 0 .75rem 1.9rem rgba(14, 23, 38, .16); border-radius: .75rem; }
.crm .modal-overlay .acc-logo-menu .is-danger { color: var(--ad-red-700); }
.crm .modal-overlay .acc-dup { background: var(--tint-warn); }
.crm .modal-overlay .acc-dup svg { color: var(--ad-orange-700); }
.crm .modal-overlay .acc-sec { border-radius: .75rem; }
.crm .modal-overlay .acc-sec-sum,
.crm .modal-overlay .acc-foot-hint { font-family: var(--f-cond, inherit); }
.crm .modal-overlay .acc-foot-hint.acc-logo-status-err { color: var(--ad-red-700); }
.crm .modal-overlay .acc-foot-hint.acc-logo-status-ok { color: var(--ad-green-700); }
.crm .modal-overlay .acc-create-opp { border-color: var(--border-strong); }

/* PR1.512 #778 — Abschnitte mit Frage-Marke (Raster und Abstaende in style.css). */
.crm .fw-sec { background: var(--bg-surface); border-color: var(--border-soft, var(--border)); border-radius: var(--r-md); }
.crm .fw-sec-ask { background: var(--tint-blue); color: var(--ad-blue); font-family: var(--f-cond); }
.crm.dark .fw-sec-ask, html[data-theme="dark"] .crm .fw-sec-ask { color: var(--text-1); }
.crm .fw-sec-title { font-family: var(--f-cond); color: var(--text-1); }
.crm .fw-sec-hint { color: var(--text-3); }
.crm .fw-sec-reset { color: var(--text-3); }
.crm .fw-sec-reset-link { color: var(--ad-blue); }
.crm.dark .fw-sec-reset-link, html[data-theme="dark"] .crm .fw-sec-reset-link { color: var(--ad-blue-300, var(--text-1)); }
.crm .fw-sec-reset:focus-visible { outline-color: var(--focus); }
.crm .fw-step-summary { color: var(--text-2); font-family: var(--f-mono); font-size: var(--fs-label); }