/*
 * Repair Café Dashboard - eigene Status-Farben
 *
 * Bewusst unabhängig von den Bootstrap-Semantikfarben (bg-primary/bg-success/...),
 * damit die Statusfarben unabhängig vom restlichen Theme frei nach Dringlichkeit
 * vergeben werden können - orientiert am Ampel-Prinzip:
 *
 *   rc-badge-urgent    knallrot             - höchste Dringlichkeit, noch nicht zugewiesen
 *   rc-badge-progress  orange               - zugewiesen, Uhrzeit/Mail fehlt noch
 *   rc-badge-waiting   gelb, schwarze Schrift - wartet auf Rückmeldung Gerätebesitzer
 *   rc-badge-done      grün                 - Kommunikation mit GB abgeschlossen
 *   rc-badge-archived  grau                 - Vorgang komplett abgeschlossen
 *   rc-badge-declined  rot, nur Umrandung   - abgesagt, keine Aktion nötig
 *
 * Farbrollen im Dashboard:
 *   Knallrot  - nur Status "Angemeldet" (höchste Dringlichkeit)
 *   Darkred   - statische/nicht-klickbare Elemente (Kopfzeilen, CI-Branding)
 *   Petrol    - alles Klickbare (Speichern, Zuweisen, Sperren/Öffnen ...),
 *               bewusst kühl und damit klar von der warmen Status-Ampel abgesetzt
 */

.rc-badge {
    display: inline-block;
    padding: 0.35em 0.75em;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.rc-badge-urgent {
    background-color: #E02020 !important;
    color: #FFF3F3 !important;
}

.rc-badge-progress {
    background-color: #C9691B !important;
    color: #FCEBDB !important;
}

.rc-badge-waiting {
    background-color: #F0C419 !important;
    color: #2C2C2A !important;
}

.rc-badge-done {
    background-color: #3B7A1E !important;
    color: #E9F5E0 !important;
}

.rc-badge-archived {
    background-color: #5A5A56 !important;
    color: #EDEDEA !important;
}

.rc-badge-declined {
    background-color: transparent !important;
    color: #A32D2D !important;
    border: 1.5px solid #A32D2D !important;
}

/*
 * Aktionsfarbe (Petrol) - für alle klickbaren Elemente im Dashboard.
 * Ergänzt Bootstraps "btn btn-sm" (Größe/Grundform bleibt erhalten),
 * überschreibt nur die Farbe.
 */
.rc-btn-action {
    background-color: #1B6B73 !important;
    border-color: #1B6B73 !important;
    color: #EAF6F6 !important;
}

.rc-btn-action:hover,
.rc-btn-action:focus {
    background-color: #154F55 !important;
    border-color: #154F55 !important;
    color: #FFFFFF !important;
}

/* Close-"×" fürs Kommentar-Icon: deutlich größer als vorher (1.4rem war neben
   dem 32px-Icon zu klein/unscheinbar), petrolfarben statt Standard-Linkblau,
   damit es sich klar als Teil desselben Buttons zu erkennen gibt. */
.rc-icon-close {
    font-size: 2rem;
    line-height: 1;
    color: #1B6B73;
    font-weight: 400;
}

/* Kommentar-Button: feste Breite/Höhe (32px, wie das Icon-Bild), damit beim
   Umschalten zwischen Icon und "×" (die von Natur aus unterschiedlich breit
   sind) keine Nachbar-Elemente (Auge-Icon, Badge) horizontal verrutschen. */
.rc-comment-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

/* Ganze Karte (Gerätezeile + Kommentarbereich) hervorheben, solange der
   Kommentarbereich aufgeklappt ist - sonst ist beim Scrollen durch eine
   längere Liste nicht erkennbar, zu welchem Gerät der offene Kommentar-
   bereich eigentlich gehört. */
.rc-card-active {
    background-color: rgba(27, 107, 115, 0.06);
    border-color: #1B6B73 !important;
}

.rc-btn-action-outline {
    background-color: transparent !important;
    border: 1.5px solid #1B6B73 !important;
    color: #1B6B73 !important;
}

.rc-btn-action-outline:hover,
.rc-btn-action-outline:focus {
    background-color: #1B6B73 !important;
    color: #EAF6F6 !important;
}

/* Petrol als reiner Textlink (z.B. "Anderen Reparateur zuweisen") */
.rc-text-action {
    color: #1B6B73 !important;
}

.rc-text-action:hover,
.rc-text-action:focus {
    color: #154F55 !important;
}

/* Darkred-Rahmen (ersetzt border-primary), z.B. Gerätekopf-Karte */
.rc-border-brand {
    border-color: #8B1E1E !important;
}

/*
 * Rollenabhängige, ruhigere Status-Darstellung:
 * - Orga-Ansicht: nur "Angemeldet" (rc-badge-urgent) und "Bestätigt" (rc-badge-done)
 *   behalten volle Signalfarbe; "Zugewiesen"/"Uhrzeit mitgeteilt" werden zurückhaltender
 *   dargestellt (weißer Hintergrund, Darkred-Rahmen) -> rc-badge-outline-brand
 * - Reparateur-Ansicht: alle Stati einheitlich neutral (weiß/grau) -> rc-badge-outline-neutral
 */
.rc-badge-outline-brand {
    background-color: #FFFFFF !important;
    color: #8B1E1E !important;
    border: 1.5px solid #8B1E1E !important;
}

.rc-badge-outline-neutral {
    background-color: #FFFFFF !important;
    color: #5A5A56 !important;
    border: 1.5px solid #9B9B94 !important;
}

/* Kommentarbereich: abwechselnd weiß/hellgrau statt Darkred-Tönung für "eigene" Kommentare */
.rc-comment-alt {
    background-color: #F5F4F1 !important;
}

/* Deutlich abgesetzter Kasten für das Eingabefeld eines neuen Kommentars,
   damit er sich klar von der Liste bestehender Kommentare unterscheidet. */
.rc-comment-new-box {
    background-color: rgba(27, 107, 115, 0.06) !important;
    border: 1px solid rgba(27, 107, 115, 0.25) !important;
    border-radius: 6px;
    padding: 0.9rem;
}

/* Reiner weicher Petrol-Hintergrund (ohne Rahmen/Padding) - z.B. für ganze
   Kartenbereiche, die bereits ihre eigene Card-Umrandung mitbringen. */
.rc-bg-action-subtle {
    background-color: rgba(27, 107, 115, 0.06) !important;
}

/*
 * Ersatz für die restlichen Bootstrap-Semantikfarben (bg-success/bg-primary/
 * text-success), die im Dashboard nicht mehr verwendet werden sollen:
 *
 *   rc-bg-brand         Darkred-Fläche  - Kopfzeilen, Kennzeichnungen, nicht klickbar
 *   rc-bg-brand-subtle   dezente Darkred-Tönung - z.B. Hervorhebung "eigener" Kommentar
 *   rc-text-brand        Darkred-Text    - Textbetonung (z.B. vereinbarte Uhrzeit)
 *   rc-badge-count       Darkred-Zähler-Badge - reine Anzahl-Pills ("Alle Anmeldungen (6)" etc.)
 *   rc-badge-neutral     weiß/schwarz    - z.B. "Organisations-Ansicht"
 *   rc-section-highlight neutrale, dezente Flächenfarbe für Abschnitts-Hervorhebungen
 *   rc-tag               neutrale graue Kennzeichnung (Geräte-Merkmale, Namens-Tags)
 */
.rc-bg-brand {
    background-color: #8B1E1E !important;
    color: #FBE8E8 !important;
}

.rc-bg-brand-subtle {
    background-color: rgba(139, 30, 30, 0.08) !important;
}

.rc-text-brand {
    color: #8B1E1E !important;
}

.rc-badge-count {
    display: inline-block;
    padding: 0.25em 0.65em;
    border-radius: 999px;
    background-color: #8B1E1E !important;
    color: #FBE8E8 !important;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

/* Icon "inaktiv": Vorgang ist abgesagt bzw. Termin vorbei - Aktion nicht mehr
   möglich, aber Verlauf weiterhin einsehbar (z.B. GB-Kommunikations-Icon bei
   abgesagten Geräten). Badge bleibt in normaler Farbe, nur das Icon selbst
   wird ausgegraut. */
.rc-icon-inactive {
    filter: grayscale(1);
    opacity: 0.45;
}

/* Uhrzeit-Mail: die editierbare Textarea und der readonly-Kasten mit den fest
   ergänzten Feldern (Termin/Uhrzeit/Gerät/Ticket/Ort/Bestätigungslink) sollen
   wie EIN durchgehendes Feld wirken, unten "read-only" endend - daher Textarea
   ohne unteren Radius/Rand und der Kasten direkt darunter ohne oberen Rand. */
.rc-mail-editable-top {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: 0 !important;
}
.rc-mail-fixed-preview {
    border: 1px solid #ced4da;
    border-top: none;
    border-bottom-left-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
    background: #f8f9fa;
    padding: 8px 12px 10px;
    margin-bottom: 10px;
    font-size: 0.82rem;
}
.rc-mail-fixed-header {
    font-weight: 600;
    color: #8B1E1E;
    margin-bottom: 4px;
}
.rc-mail-fixed-row {
    display: flex;
    gap: 6px;
    padding: 1px 0;
}
.rc-mail-fixed-label {
    min-width: 120px;
    flex-shrink: 0;
    color: #666666;
}
.rc-mail-fixed-link {
    font-style: italic;
    color: #8B1E1E;
}

.rc-badge-neutral {
    display: inline-block;
    padding: 0.35em 0.75em;
    border-radius: 999px;
    background-color: #FFFFFF !important;
    color: #2C2C2A !important;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.rc-section-highlight {
    background-color: #F2F0EC !important;
}

/* Dezentes Gelb für Korrektur-/Nachbesserungs-Bereiche (z.B. Reparaturdaten-Korrektur durch Orga) */
.rc-bg-caution-subtle {
    background-color: rgba(240, 196, 25, 0.14) !important;
}

.rc-tag {
    display: inline-block;
    padding: 0.3em 0.65em;
    border-radius: 4px;
    background-color: #EDEDEA !important;
    color: #2C2C2A !important;
    font-size: 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Freie Lücke im Reparateur-Belegungsplan: bewusst zurückhaltend (gestrichelt,
   heller) statt einer "Erfolgsfarbe" wie Grün - es ist eine Information, kein
   Ereignis, das gefeiert werden muss. */
.rc-tag-free {
    background-color: transparent !important;
    color: #6c757d !important;
    border: 1px dashed rgba(0, 0, 0, 0.25) !important;
}

/*
 * "Reparatur fertig"-Kennzeichnung: unabhängig vom Anmeldungs-Status, zeigt nur
 * an, dass Fehlerbefund + Ergebnis im Reparaturprotokoll ausgefüllt sind.
 * Bewusst ein anderes, kräftigeres Grün als rc-badge-done (Status "Bestätigt")
 * und klar von Petrol getrennt, damit keine Verwechslungsgefahr entsteht.
 */
.rc-badge-repair-done {
    display: inline-block;
    padding: 0.25em 0.65em;
    border-radius: 999px;
    background-color: #1F9D55 !important;
    color: #EAFBF1 !important;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Helle grüne Kartenhintergrund-Tönung, wenn eine Reparatur fertig ist -
   ein Erfolgserlebnis darf ruhig etwas auffälliger sein. */
.rc-bg-repair-done-subtle {
    background-color: rgba(31, 157, 85, 0.12) !important;
}

/*
 * ── Workflow-Übersicht (Hilfe-Seite "So funktioniert der Ablauf") ──────────
 * Einfache HTML/CSS-Kette statt SVG, damit sie leicht wartbar bleibt: jede
 * Box ist ein Collapse-Trigger für eine Detailerklärung darunter, Pfeile sind
 * reine Text-/CSS-Elemente. Petrol = laufender Vorgang, Grau = Endzustand,
 * Darkred = offener/ungeklärter Punkt (gleiche Farbe wie rc-badge-count).
 */
.rc-workflow-chain {
    max-width: 560px;
}
.rc-workflow-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
}
.rc-workflow-step {
    position: relative;
    flex: 1 1 auto;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    padding: 0.85em 1em;
    text-align: left;
    color: #FFFFFF !important;
    background-color: #1B6B73;
    width: 100%;
}
.rc-workflow-step:hover {
    filter: brightness(1.08);
}
.rc-workflow-step.rc-workflow-terminal {
    background-color: #5F5E5A;
}
.rc-workflow-role {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background-color: rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    padding: 0.1em 0.5em;
    margin-bottom: 0.35em;
}
.rc-workflow-title {
    font-weight: 600;
    margin-bottom: 0.15em;
}
.rc-workflow-sub {
    font-size: 0.8rem;
    opacity: 0.9;
}
.rc-workflow-open-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 5;
    background-color: #8B1E1E;
    color: #FBE8E8;
    border-radius: 999px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}
.rc-workflow-arrow {
    text-align: center;
    color: #888780;
    font-size: 1.3rem;
    line-height: 1;
    margin: 2px 0;
    padding-left: 0;
}
.rc-workflow-branch-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888780;
    font-size: 1.1rem;
    padding: 0 4px;
}
.rc-workflow-detail {
    background-color: #F1EFE8;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0.9em 1.1em;
    margin: 6px 0 2px;
    font-size: 0.9rem;
}
.rc-workflow-detail.rc-workflow-detail-open {
    border-left: 3px solid #8B1E1E;
    border-radius: 0 8px 8px 0;
}
.rc-workflow-detail ul {
    margin: 0;
    padding-left: 1.1em;
}
.rc-workflow-detail li {
    margin-bottom: 0.4em;
}
.rc-workflow-detail li:last-child {
    margin-bottom: 0;
}