/* ─────────────────────────────────────────────────────────────────────────
   Projektanfragen – Anordnung und Maße.

   Wird vor app.css geladen. Dialogregeln sind bewusst auf die Anfrage
   begrenzt, damit allgemeine Dialog- und Eingabestile sie nicht verdrängen.
   ───────────────────────────────────────────────────────────────────── */

/* ── Menü ──────────────────────────────────────────────────────────── */

/* Briefumschlag. Die anderen Symbole liegen in app.css bei den übrigen
   Bereichen; dort steht für „anfragen“ noch nichts. */
.seitenleiste nav a[data-bereich=anfragen]>span {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6 8.5-6'/%3E%3C/g%3E%3C/svg%3E");
}

/* Die Zahl wartender Vorgänge.
   Bewusst ein <b> und kein <span>: jedes direkte span-Kind im Menüanker
   ist in app.css die Symbolmaske – 30x30, schriftlos, durchsichtig. Ein
   Badge darin wäre unsichtbar. */
.seitenleiste nav a .nav-zahl {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #b3261e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ── Liste ─────────────────────────────────────────────────────────── */

.anfragen-tabelle td .marke { display: inline-block; }

/* „Arbeitsstelle angelegt“ unter der Standmarke, nicht daneben:
   in der Spalte ist kein Platz für zwei Dinge nebeneinander. */
.anfrage-hinweis-klein {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    opacity: 0.75;
}

/* ── Vorgangsdialog ────────────────────────────────────────────────── */

.anfrage-dialog .app-dialog-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: none;
}

.anfrage-dialog h3 {
    margin: 0 0 6px;
    font-size: 0.95rem;
}

.anfrage-stand-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.anfrage-stand-zeile label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.anfrage-uebernommen { font-size: 0.85rem; opacity: 0.75; }

/* Anfragender und Arbeitsstelle nebeneinander – man vergleicht die beiden
   Anschriften ständig. Auf schmalen Geräten untereinander. */
.anfrage-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.anfrage-angaben {
    display: grid;
    grid-template-columns: minmax(100px, auto) 1fr;
    gap: 4px 14px;
    margin: 0;
}

.anfrage-angaben dt { font-size: 0.85rem; opacity: 0.7; }

/* Umbrüche aus der Beschreibung bleiben stehen: was jemand als Absatz
   geschrieben hat, war als Absatz gemeint. */
.anfrage-angaben dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* ── Unterlagen ────────────────────────────────────────────────────── */

.anfrage-dateien { list-style: none; margin: 0; padding: 0; }
.anfrage-dateien li { margin-bottom: 4px; }
.anfrage-dateien small { margin-left: 6px; opacity: 0.7; }
.anfrage-leer { font-size: 0.88rem; opacity: 0.75; }

/* ── Angebote im Vorgang ───────────────────────────────────────────── */

.anfrage-angebote { list-style: none; margin: 0; padding: 0; }

.anfrage-angebot {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.anfrage-angebot:last-child { border-bottom: 0; }

.anfrage-angebot-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 4px;
}

/* Der Betrag rechts: danach sucht das Auge zuerst. */
.anfrage-angebot-betrag { margin-left: auto; font-variant-numeric: tabular-nums; }

.anfrage-angebot-zeilen { margin: 0 0 6px; font-size: 0.85rem; opacity: 0.75; }

/* ── Verlauf ───────────────────────────────────────────────────────── */

.anfrage-verlauf {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.anfrage-verlauf-eintrag {
    padding: 8px 12px;
    margin-bottom: 8px;
    border-left: 3px solid currentColor;
    border-radius: 6px;
}

.anfrage-verlauf-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 4px;
    font-size: 0.85rem;
}

.anfrage-verlauf-text {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Wer geschrieben hat, soll man sehen, bevor man liest. */
.anfrage-von-kunde   { border-left-color: #1a4f8a; }
.anfrage-von-betrieb { border-left-color: #6b7280; }
.anfrage-von-system  { border-left-color: transparent; font-size: 0.9rem; opacity: 0.8; }

.anfrage-schreiben textarea { width: 100%; }
.anfrage-schreiben .haken { margin: 6px 0; }

/* ── Anfragelink in den Einstellungen ──────────────────────────────── */

/* Der Schnipsel zum Kopieren. Nichtproportional, damit man sieht, dass es
   Code ist und nicht ein Satz, den man umformulieren soll. */
.anfragelink [data-anfragelink-html],
.anfragelink [data-anfragelink-url] {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.anfragelink [data-anfragelink-html] { resize: vertical; }

@media (max-width: 640px) {
    .anfrage-dialog .app-dialog-form { gap: 14px; }
    .anfrage-angaben { grid-template-columns: 1fr; gap: 2px; }
    .anfrage-angaben dd { margin-bottom: 8px; }
}

/* Gleiche Breite wie die Dokumentenakte, mit klar getrennten Lesebereichen. */
.app-dialog.anfrage-dialog {
    width: min(900px, calc(100vw - 28px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    background: #182127;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    scrollbar-gutter: stable;
}
.anfrage-dialog .app-dialog-form { padding: 24px; gap: 20px; }
.anfrage-dialog .app-dialog-kopf { gap: 14px; padding-bottom: 20px; }
.anfrage-dialog .app-dialog-kopf > div { flex: 1; min-width: 0; }
.anfrage-dialog .app-dialog-kopf h2 { font-size: 24px; letter-spacing: -.02em; }
.anfrage-dialog .app-dialog-kopf small { font-size: 11px; line-height: 1.6; }
.anfrage-dialog .app-dialog-kopf > button { flex-shrink: 0; }
.anfrage-dialog .anfrage-stand-zeile {
    padding: 14px 18px;
    border: 1px solid rgba(255, 174, 36, .22);
    border-radius: 10px;
    background: rgba(255, 174, 36, .045);
}
.anfrage-dialog .anfrage-stand-zeile label > span { margin: 0; font-size: 13px; }
.anfrage-dialog .anfrage-stand-zeile select {
    min-height: 42px;
    padding: 8px 32px 8px 12px;
    border: 1px solid #4b5861;
    border-radius: 8px;
    background-color: #141c21;
    color: #f3f5f6;
    font: inherit;
}
.anfrage-dialog .anfrage-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.anfrage-dialog section {
    min-width: 0;
    padding: 20px;
    border: 1px solid #39454e;
    border-radius: 12px;
    background: #202b32;
}
.anfrage-dialog h3 {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #3a454d;
    color: #f3f5f6;
    font-size: 16px;
    font-weight: 700;
}
.anfrage-dialog .anfrage-angaben { grid-template-columns: 128px minmax(0, 1fr); gap: 0 16px; }
.anfrage-dialog .anfrage-angaben dt,
.anfrage-dialog .anfrage-angaben dd { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.anfrage-dialog .anfrage-angaben dt { color: #b6c1c9; font-size: 13px; opacity: 1; }
.anfrage-dialog .anfrage-angaben dd { color: #f0f3f5; font-size: 14px; line-height: 1.65; }
.anfrage-dialog .anfrage-angaben dt:last-of-type,
.anfrage-dialog .anfrage-angaben dd:last-of-type { border-bottom: 0; }
.anfrage-dialog .anfrage-spalten .anfrage-angaben { grid-template-columns: 1fr; }
.anfrage-dialog .anfrage-spalten dt { padding: 9px 0 0; border: 0; font-size: 12px; }
.anfrage-dialog .anfrage-spalten dd { padding: 2px 0 9px; }
.anfrage-dialog .anfrage-dateien { display: grid; gap: 8px; }
.anfrage-dialog .anfrage-dateien li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 12px; border: 1px solid #3a4852; border-radius: 8px; background: #182127; }
.anfrage-dialog .anfrage-dateien small { margin: 0; color: #b6c1c9; opacity: 1; }
.anfrage-dialog .anfrage-dateien .knopf { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.anfrage-dialog .anfrage-verlauf { max-height: 380px; padding-right: 4px; }
.anfrage-dialog .anfrage-verlauf-eintrag { padding: 14px 16px; margin-bottom: 10px; background: #172127; border: 1px solid #36434c; border-left-width: 3px; border-radius: 8px; }
.anfrage-dialog .anfrage-von-kunde { border-left-color: #62afea; }
.anfrage-dialog .anfrage-von-betrieb { border-left-color: #ffb638; }
.anfrage-dialog .anfrage-von-system { border-left-color: #72838f; opacity: 1; color: #bbc6ce; }
.anfrage-dialog .anfrage-verlauf-kopf { gap: 6px 12px; font-size: 13px; }
.anfrage-dialog .anfrage-verlauf-kopf small { color: #aebcc6; font-size: 12px; }
.anfrage-dialog .anfrage-verlauf-text { font-size: 14px; line-height: 1.7; }
.anfrage-dialog .anfrage-schreiben { display: grid; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #43505a; }
.anfrage-dialog .anfrage-schreiben > label { color: #e7edf1; font-size: 13px; font-weight: 600; }
.anfrage-dialog .anfrage-schreiben textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 120px;
    padding: 14px;
    border: 1px solid #53626d;
    border-radius: 8px;
    background: #131d23;
    color: #f3f5f6;
    font: inherit;
    line-height: 1.6;
    resize: vertical;
}
.anfrage-dialog .anfrage-schreiben textarea::placeholder { color: #a2b0bb; opacity: 1; }
.anfrage-dialog .anfrage-schreiben .haken { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px; border-radius: 8px; background: #182127; cursor: pointer; }
.anfrage-dialog .anfrage-schreiben input[type="checkbox"] { appearance: auto; flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 3px 0 0; padding: 0; accent-color: #ffb638; }
.anfrage-dialog .anfrage-schreiben .haken > span { margin: 0; font-size: 13px; }
.anfrage-dialog .haken small { display: block; margin-top: 3px; color: #aebcc6; font-size: 12px; font-weight: 400; }
.anfrage-dialog :is(textarea, select, input[type="checkbox"]):focus-visible { outline: 2px solid #ffb638; outline-offset: 3px; }
.anfrage-dialog .app-dialog-aktionen { flex-wrap: wrap; padding-top: 20px; border-top: 1px solid #43505a; gap: 10px; }
.anfrage-dialog .knopf { font-size: 12px; min-height: 40px; }
.anfrage-dialog [data-anfrage-loeschen] { color: #f4a49c; border-color: rgba(239,106,94,.35); }

@media (max-width: 640px) {
    .app-dialog.anfrage-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
    .anfrage-dialog .app-dialog-form { padding: 14px; gap: 14px; }
    .anfrage-dialog .app-dialog-kopf { flex-wrap: wrap; }
    .anfrage-dialog .app-dialog-kopf h2 { font-size: 20px; }
    .anfrage-dialog .app-dialog-kopf small { font-size: 10px; }
    .anfrage-dialog .anfrage-spalten { grid-template-columns: 1fr; gap: 14px; }
    .anfrage-dialog section { padding: 16px; }
    .anfrage-dialog .anfrage-angaben { grid-template-columns: 1fr; gap: 0; }
    .anfrage-dialog .anfrage-angaben dt { border: 0; padding: 9px 0 0; }
    .anfrage-dialog .anfrage-angaben dd { margin: 0; padding: 2px 0 9px; }
    .anfrage-dialog .anfrage-schreiben textarea,
    .anfrage-dialog .anfrage-stand-zeile select { font-size: 16px; }
    .anfrage-dialog .app-dialog-aktionen { display: grid; grid-template-columns: 1fr; }
    .anfrage-dialog .app-dialog-aktionen .knopf { width: 100%; min-height: 44px; }
}