/* Globales Inline-Editing (Klick-zum-Bearbeiten).
   Verhalten/Logik: static/js/inline_edit.js. Serverseite: infdl_core/inline_edit.py.

   Idee: Ein .inline-edit-Element zeigt den Wert wie normaler Text an. Hover unterstreicht,
   Klick blendet an gleicher Stelle ein passendes Eingabe-Widget ein (gleiche Schrift/Größe),
   Verlassen speichert. */

.inline-edit {
    cursor: text;
    /* Umbruch erlauben (lange Kommentare), aber Whitespace des Wertes erhalten. */
    white-space: pre-wrap;
}

.inline-edit:hover {
    text-decoration: underline;
}

/* Leerer Wert -> dezenter Platzhalter (aus data-inline-empty). */
.inline-edit.inline-edit-empty {
    color: #6c757d;
    font-style: italic;
}

/* Während des Speicherns kurz ausgrauen + nicht erneut anklickbar. */
.inline-edit.inline-edit-saving {
    opacity: 0.5;
    pointer-events: none;
}

/* Das Eingabe-Widget erbt Schrift/Zeilenhöhe des Textes, damit es "gleich groß" wirkt. */
.inline-edit-input {
    font: inherit;
    color: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0 2px;
    border: 1px solid #007b9a;      /* h_da-Akzent */
    border-radius: 3px;
    background: #fff;
    box-sizing: content-box;         /* Breite = gemessene Textbreite, ohne Padding aufzuschlagen */
    vertical-align: top;
    max-width: 100%;
}

textarea.inline-edit-input {
    resize: vertical;
    overflow: hidden;                /* Höhe wird per JS an den Inhalt angepasst */
    white-space: pre-wrap;
}

.inline-edit-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 154, 0.2);
}