/**
 * idf-inline-edit.css — generische Inline-Edit-Affordance
 *
 * Pen-Button + Hover-Logik für Inline-Edit-Cells (Titel, Datum, Zuständig,
 * Unternehmen, Zugehörig usw.). Aufgenommen ins Shared-Set per #81 — vorher
 * lag das CSS in `aufgaben.css` und `protokolle.css` parallel und ist
 * auseinandergelaufen (Protokoll hatte `.pl-row:hover` als Hover-Anker, was
 * alle Pens gleichzeitig einblendete).
 *
 * Konvergenz-Pflicht (Architektur-Prinzipien): Pen-Affordance gibt es
 * jetzt EINMAL hier; Module setzen die generischen Klassen am Markup,
 * eigene Pen-CSS-Blöcke entfallen.
 *
 * API:
 *   .idf-inline-edit-host    — Container, in dem der Pen sichtbar wird,
 *                              wenn der Cursor darüber schwebt. Modul kann
 *                              `is-editing` hinzufügen, solange die Cell
 *                              gerade als Editor dient — der Pen bleibt
 *                              dann ausgeblendet (`:not(.is-editing)` im
 *                              Hover-Selektor).
 *   .idf-inline-edit-btn     — der Pen-Button selbst.
 *
 * Markup-Beispiel (Titel-Cell mit Group-Wrapper):
 *   <div class="al-cell-titel">
 *     <span class="al-titel-group idf-inline-edit-host">
 *       <span class="al-titel-text">Titel</span>
 *       <button class="idf-inline-edit-btn" title="Titel bearbeiten">
 *         <i class="fa-regular fa-pen"></i>
 *       </button>
 *     </span>
 *   </div>
 *
 * Markup-Beispiel (Cell selbst ist Host, z.B. Datum):
 *   <div class="al-cell-faellig idf-inline-edit-host">
 *     <span class="al-cell-text">11.05.2026</span>
 *     <button class="idf-inline-edit-btn" title="Datum bearbeiten">
 *       <i class="fa-regular fa-pen"></i>
 *     </button>
 *   </div>
 */

.idf-inline-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Pen ans rechte Cell-Ende drücken — einheitlicher Listen-Standard über
     ALLE Module, unabhängig vom flex-Wert des Text-Spans. In einem voll
     breiten Host (Single-Line-Cell oder gestretchte Two-Line-Row) frisst
     margin-left:auto den Restraum links vom Pen; in content-breiten
     Wrapper-Gruppen (z.B. Aufgaben-Titel inline-flex) ist kein Restraum da
     → kein Effekt, Pen bleibt wie gehabt. */
  margin-left: auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--mid, #555);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

/* Pen erscheint, wenn der Host gehovered wird — aber NICHT, solange er
   selbst als Editor dient (`is-editing`). So kann eine Datum-Cell zugleich
   Host UND Editor-Container sein, ohne dass der Pen währenddessen mit dem
   Date-Picker konkurriert. */
.idf-inline-edit-host:not(.is-editing):hover .idf-inline-edit-btn {
  opacity: 1;
}

.idf-inline-edit-btn:hover {
  background: var(--shade-15);
  color: var(--ink, #111);
}

/* Während Edit den Host auf den verfügbaren Cell-Restraum expandieren —
   so kann das Input darin (`flex: 1 1 auto`) auf volle Breite wachsen,
   ohne dass das Modul-CSS dafür eine Sonderregel braucht. Default ist
   `flex: 0 1 auto` (siehe Modul-CSS), damit der Hover-Trigger im Default-
   Zustand kompakt bleibt (Text + Pen). Spezialfälle mit zusätzlichen
   Wrapper-Schichten (z.B. Aufgaben mit Stack) ergänzen das im Modul-CSS,
   überschreiben es aber nicht. */
.idf-inline-edit-host.is-editing {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* Inline-Input expandiert auf volle Verfügbare-Breite des Hosts — sonst
   bleibt das Input bei seiner Intrinsic-Breite (Text-Inhalt) und User
   kann nur am Titel-Anfang klicken, nicht in die ganze Cell. Galt schon
   früher als wiederkehrendes Problem in mehreren Listen — jetzt einmal
   im Shared, alle Module profitieren. */
.idf-inline-edit-host.is-editing .idf-inline-edit-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Generischer Skin für das Inline-Edit-Input selbst. Vorher hatte jedes
   Modul seinen eigenen Input-Look über `inputClassName`: Aufgaben und
   Protokolle waren per Copy-Paste konvergent (transparenter Hintergrund,
   Akzent-Border-Bottom, kein Radius), SafeGuard hatte einen gerahmten
   Box-Input gebaut und ist optisch ausgeschert. Der Skin lebt jetzt
   EINMAL hier; Module setzen `idf-inline-edit-input` ans Input und
   liefern im Modul-CSS nur noch Layout (flex/width/font-weight).
   Bewusst niedrige Spezifität (eine Klasse) — die Modul-Layout-Regeln
   haben höhere Spezifität und gewinnen für flex/width problemlos. */
.idf-inline-edit-input {
  font: inherit;
  color: var(--ink, #111);
  background: transparent;
  border: 0;
  /* Border-Bottom als dezenter „editierbar"-Indikator — liegt außerhalb
     der Content-Box, also kein vertikales Springen beim Wechsel
     Span ↔ Input. */
  border-bottom: 1.5px solid var(--accent, #167ea0);
  border-radius: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  outline: none;
  /* Ellipsis aus dem Anzeige-Span deaktivieren — im Input irreführend. */
  text-overflow: clip;
  white-space: nowrap;
}

.idf-inline-edit-input:focus {
  border-bottom-color: var(--primary, #c8134b);
}

/* Kalender-Icon (+ Spin/Clear) des date-Inputs ausblenden — es überlappt im
   schmalen Inline-Feld das Datum; der Picker öffnet ohnehin via showPicker()
   beim Pen-Klick. NUR die nativen Indikator-Pseudos verstecken
   (display:none + opacity:0/width:0 als Fallback). WICHTIG: KEIN
   appearance:none am Input selbst — das strippt die native lokalisierte
   Anzeige und das Feld zeigt dann die Roh-ISO (2026-05-30) statt 30.05.2026. */
.idf-inline-edit-input[type="date"]::-webkit-calendar-picker-indicator,
.idf-inline-edit-input[type="date"]::-webkit-inner-spin-button,
.idf-inline-edit-input[type="date"]::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
  opacity: 0;
  width: 0;
  margin: 0;
  pointer-events: none;
}