/* AUFTRAG-EVENTPROJ-DIRTY-WAECHTER-CC.md Paket B: der EINE Speichern-Knopf mit
   vier Zustaenden. Bewusst GLOBAL statt scoped (.razor.css): denselben Knopf
   tragen zwei sehr verschiedene Orte - ModifiedInfo (im <EditForm> aller ~40
   Backoffice-Edit-Seiten) und der Vollbild-Ablauf-Outliner. Zwei scoped Kopien
   waeren zwei Orte, an denen die Optik auseinanderlaufen kann.

   Farbwerte kommen aus ci.css (:root) und NICHT aus den --pos-*-Tokens: die
   liegen auf .pos-shell und sind im Backoffice-Inhaltsbereich gar nicht
   definiert. */

.tim-savebar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md Paket C.1: derselbe Knopf, aber in der
   klebenden Kopfzeile - dort traegt der Kopf den Abstand, nicht die Leiste. */
.tim-savebar-kopf {
    gap: var(--tim-space-2);
    margin: 0;
}

.tim-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--tim-radius);
    font-family: var(--tim-font);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    /* Sanfter Uebergang beim Umschalten - ausdruecklich KEIN Blinken und kein
       Pulsieren (Gruender 28.07.). */
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.tim-save:disabled {
    cursor: default;
}

/* Gespeichert: ruhig, gruen, Haken - es gibt nichts zu tun. */
.tim-save-gespeichert {
    background: var(--tim-minze-flaeche);
    border-color: var(--tim-minze-flaeche);
    color: var(--tim-minze-tief);
}

/* Ungespeichert: der einzige Zustand, der Aufmerksamkeit verlangt. */
.tim-save-ungespeichert {
    background: var(--tim-tomate);
    border-color: var(--tim-tomate);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(228, 87, 46, .28);
}

.tim-save-ungespeichert:hover,
.tim-save-ungespeichert:focus {
    background: var(--tim-tomate-tief);
    border-color: var(--tim-tomate-tief);
}

/* Speichert…: wie ungespeichert, nur mit Spinner und ohne Klick. */
.tim-save-speichert {
    background: var(--tim-tomate);
    border-color: var(--tim-tomate);
    color: #FFFFFF;
    opacity: .85;
}

/* Fehler: rot (das eigene Fehler-Rot, bewusst nicht Tomate) und klickbar -
   der erneute Versuch ist der ganze Ausweg, verworfen wird nichts. */
.tim-save-fehler {
    background: var(--tim-fehler);
    border-color: var(--tim-fehler);
    color: #FFFFFF;
}

.tim-savehint {
    font-size: 13px;
    color: var(--tim-tomate-tief);
}

.tim-save-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: tim-save-spin .8s linear infinite;
}

@keyframes tim-save-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tim-save {
        transition: none;
    }

    .tim-save-spinner {
        animation-duration: 2.4s;
    }
}

/* ==========================================================================
   Rundgang 11.08.2026, Paket 3: DIE QUITTUNG AM BEREICH

   "Feld verlassen = gespeichert" - und die Quittung sitzt am Bereich und
   BLEIBT stehen (Anordnung des Gruenders, 11.08.2026). Bis dahin blitzte auf
   zwei Seiten ein kleines gruenes "Gespeichert." auf und verschwand wieder,
   auf dreizehn weiteren kam gar nichts.

   Dieselben Zustandsnamen wie am Knopf daruber (ungespeichert / speichert /
   gespeichert / fehler) - damit es EINE Sprache bleibt und keine zweite
   entsteht. Kein Blinken, kein Pulsieren; das steht oben und gilt weiter.

   Die Farben kommen aus ci.css (:root) und NICHT aus den --pos-*-Tokens: die
   liegen auf .pos-shell und sind im Backoffice-Inhaltsbereich nicht definiert.
   ========================================================================== */

.tim-saveblock {
    position: relative;
    /* Der Balken sitzt LINKS am Bereich und nicht als Rahmen darum: Ein Rahmen
       zieht das Auge auf die Flaeche, ein Balken auf die Zeile daneben - und
       die Frage ist "welcher Bereich", nicht "welche Kachel". */
    padding-left: 12px;
    border-left: 3px solid transparent;
    border-radius: 0 var(--tim-radius) var(--tim-radius) 0;
    transition: border-color .25s ease, background-color .25s ease;
}

/* Unberuehrt: keine Farbe. Beim Betreten einer Seite ist noch nichts
   gespeichert worden - ein gruener Balken waere dort eine Behauptung. */
.tim-saveblock-unberuehrt {
    border-left-color: transparent;
}

.tim-saveblock-ungespeichert {
    border-left-color: var(--tim-tomate);
    background: var(--tim-tomate-flaeche);
}

.tim-saveblock-speichert {
    border-left-color: var(--tim-tomate);
    background: var(--tim-tomate-flaeche);
    opacity: .85;
}

/* Gespeichert: Minze - und sie BLEIBT, bis die Seite neu geladen wird. */
.tim-saveblock-gespeichert {
    border-left-color: var(--tim-minze);
    background: var(--tim-minze-flaeche);
}

.tim-saveblock-fehler {
    border-left-color: var(--tim-fehler);
    background: rgba(179, 38, 30, .08);
}

.tim-saveblock-note {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
    margin-top: 4px;
    font-size: 12px;
    color: var(--tim-minze-tief);
}

.tim-saveblock-note-fehler {
    color: var(--tim-fehler);
    font-weight: 600;
}

/* R3: Der Fehlerfall traegt seinen Ausweg als Knopf bei sich. */
.tim-saveblock-retry {
    border: 1px solid var(--tim-fehler);
    background: transparent;
    color: var(--tim-fehler);
    border-radius: var(--tim-radius);
    padding: 2px 10px;
    font-family: var(--tim-font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.tim-saveblock-retry:hover,
.tim-saveblock-retry:focus {
    background: var(--tim-fehler);
    color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Die Sammelzeile im Seitenkopf - EINE Zeile (Regel 12, Formregel).
   -------------------------------------------------------------------------- */

.tim-savescope-line {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
    min-height: 32px;
    padding: 4px 12px;
    margin-bottom: var(--tim-space-2);
    border-radius: var(--tim-radius);
    font-size: 13px;
    /* Sie waechst nicht mit dem Text mit: auf 360 Pixeln verschwindet die
       Begruendung, die Zeile bleibt eine Zeile. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tim-savescope-unberuehrt {
    background: var(--tim-flaeche, #F5F5F4);
    color: var(--tim-text-leise, #6B6B6B);
}

.tim-savescope-offen {
    background: var(--tim-tomate-flaeche);
    color: var(--tim-tomate-tief);
}

.tim-savescope-gespeichert {
    background: var(--tim-minze-flaeche);
    color: var(--tim-minze-tief);
}

.tim-savescope-fehler {
    background: rgba(179, 38, 30, .10);
    color: var(--tim-fehler);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .tim-saveblock {
        transition: none;
    }
}

/* Rundgang 11.08.2026 (Bildschirmpruefung): "geaendert" und "wird gerade
   geschrieben" sind zwei Zustaende, nicht einer - die Zeile behauptete sonst
   eine Handlung, die waehrend des Tippens nicht stattfindet. */
.tim-savescope-speichert {
    background: var(--tim-tomate-flaeche);
    color: var(--tim-tomate-tief);
    opacity: .85;
}

/* --------------------------------------------------------------------------
   AUFTRAG-SPEICHERN-UND-DATENORTE-CC.md Etappe 1: DIE ABSAGE.

   "Diese Angaben wurden inzwischen an anderer Stelle geaendert. [Neu laden]"

   Sie sieht aus wie die Sammelzeile und ist doch eine andere Aussage: Die
   Zeile sagt, ob etwas offen ist; dieses Band sagt, dass etwas NICHT
   geschrieben wurde und was jetzt zu tun ist. Deshalb dieselbe Form, andere
   Farbe - und ein Knopf, denn ein Zustand ohne Ausweg ist nach Regel 11 keine
   Meldung (R3).
   -------------------------------------------------------------------------- */

.tim-savescope-konflikt {
    background: rgba(179, 38, 30, .10);
    color: var(--tim-fehler);
    font-weight: 600;
}

/* Die beiden Knoepfe der Zeile - Ausweg und Griff. Textknoepfe, keine
   gefuellten Flaechen (Doc 30 Kap. 4: gefuellt ist die EINE primaere Aktion
   einer Zone, und die steht nicht in einer Statuszeile). */
.tim-savescope-neuladen,
.tim-savescope-jetzt {
    margin-left: auto;
    flex: none;
    border: 1px solid currentColor;
    border-radius: var(--tim-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    padding: 2px 10px;
    cursor: pointer;
}

.tim-savescope-neuladen:hover,
.tim-savescope-neuladen:focus,
.tim-savescope-jetzt:hover,
.tim-savescope-jetzt:focus {
    background: rgba(0, 0, 0, .06);
}