/* ═══════════════════════════════════════════════════════════════════
   task_dialogs.css — Aufgabe anlegen (qc-) und bearbeiten (te-)
   ───────────────────────────────────────────────────────────────────
   Zwei Fenster, ein gemeinsamer Formenkanon: gleiche Radien, gleiche
   Feldhöhen, gleiche Chips. Sie stehen bewusst in EINER Datei — die
   beiden Dialoge werden fast immer zusammen angefasst, und getrennte
   Dateien liefen bisher in Details auseinander.

   Farben kommen aus den Theme-Variablen (--theme-modal-bg,
   --theme-input-bg, --theme-input-border). Dadurch tragen Hell-,
   Weiß- und Dunkelmodus ohne eigene Regelsätze.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --td-radius:      16px;
    --td-radius-sm:   10px;
    --td-field-h:     40px;
    --td-accent:      #0066DD;
    --td-text:        #1d1d1f;
    --td-text-muted:  rgba(29, 29, 31, 0.55);
    --td-text-faint:  rgba(29, 29, 31, 0.38);
    --td-line:        rgba(0, 0, 0, 0.09);
    --td-surface:     #ffffff;
    --td-field-bg:    #f5f7fa;
    --td-field-line:  rgba(0, 0, 0, 0.10);
    --td-chip-bg:     #ffffff;
    --td-hover:       rgba(0, 0, 0, 0.045);
}

[data-theme="dark"] {
    --td-text:        #E8EAF0;
    --td-text-muted:  rgba(232, 234, 240, 0.58);
    --td-text-faint:  rgba(232, 234, 240, 0.38);
    --td-line:        rgba(255, 255, 255, 0.10);
    --td-surface:     #1C2333;
    --td-field-bg:    rgba(255, 255, 255, 0.05);
    --td-field-line:  rgba(255, 255, 255, 0.12);
    --td-chip-bg:     rgba(255, 255, 255, 0.04);
    --td-hover:       rgba(255, 255, 255, 0.07);
}

/* ═══════════════════════════════════════════════════════════════════
   GEMEINSAME BAUSTEINE
   ═══════════════════════════════════════════════════════════════════ */

.qc-input,
.te-input,
.te-rangeinput {
    width: 100%;
    min-height: var(--td-field-h);
    padding: 9px 12px;
    border-radius: var(--td-radius-sm);
    border: 1px solid var(--td-field-line);
    background: var(--td-field-bg);
    color: var(--td-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.qc-input:focus,
.te-input:focus,
.te-rangeinput:focus {
    border-color: var(--td-accent);
    background: var(--td-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--td-accent) 15%, transparent);
}
.qc-input::placeholder,
.te-input::placeholder,
.te-rangeinput::placeholder { color: var(--td-text-faint); }

.qc-select, .te-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    /* Pfeil als Hintergrundbild statt eigenem Element — ein <select>
       darf keine Kindelemente ausser <option> haben. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
    padding-right: 30px;
}

.qc-textarea, .te-textarea {
    resize: vertical;
    line-height: 1.55;
    min-height: 76px;
}

/* Kleine Beschriftung über einem Feld */
.qc-minilabel, .te-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--td-text-muted);
    margin-bottom: 6px;
}

/* Betrag + Währung nebeneinander */
.qc-costwrap, .te-costwrap { display: flex; gap: 6px; }
.qc-cost-amount, .te-cost-amount { flex: 1 1 auto; min-width: 0; }
.qc-cost-currency, .te-cost-currency { flex: 0 0 96px; width: 96px; }

/* ═══════════════════════════════════════════════════════════════════
   SCHNELLANLEGEN
   ═══════════════════════════════════════════════════════════════════ */

.qc-card {
    width: 100%;
    max-width: 460px;
    margin: 20px;
    background: var(--td-surface);
    color: var(--td-text);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    transform: scale(0.96) translateY(8px);
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
}
.editor-modal-overlay.show .qc-card { transform: scale(1) translateY(0); }

.qc-head { padding: 18px 20px 12px; }

/* Der Kopf des Terminfensters trägt beide Klassen. calendar.css
   stellt ihn auf `display: flex; justify-content: space-between` —
   dadurch standen Beschriftung und Titeleingabe NEBENeinander,
   während sie in der Projektplanung untereinander stehen. Zwei
   Klassen, spätere Datei: gewinnt gegen die eine aus calendar.css. */
.cal-event-modal-header.qc-head {
    display: block;
    border-bottom: 1px solid var(--td-line);
}
.qc-context {
    font-size: 12px;
    color: var(--td-text-muted);
    margin-bottom: 10px;
}
.qc-context strong { color: var(--td-text); font-weight: 700; }

.qc-titlerow { display: flex; align-items: center; gap: 10px; }

.qc-colordot, .te-colordot {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: #f4a8b0;
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow 0.15s, transform 0.12s;
}
.qc-colordot:hover, .te-colordot:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 4px var(--td-hover);
}

.qc-title {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--td-text);
    padding: 2px 0;
}
.qc-title::placeholder { color: var(--td-text-faint); font-weight: 600; }

/* Der mittlere Bereich scrollt, Kopf und Fuss bleiben stehen. Er wächst
   mit jedem eingeblendeten optionalen Feld — ohne eigenen Scrollbereich
   würde die Karte sonst über den Bildschirmrand hinauswachsen und die
   Knöpfe wären nicht mehr erreichbar. */
.qc-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
}

.qc-block { padding: 4px 20px 14px; }
.qc-block-optional {
    border-top: 1px solid var(--td-line);
    padding-top: 14px;
}
.qc-blocklabel {
    font-size: 11px;
    font-weight: 700;
    color: var(--td-text-muted);
    margin-bottom: 8px;
}

.qc-chiprow { display: flex; flex-wrap: wrap; gap: 7px; }

.qc-chip, .te-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--td-field-line);
    background: var(--td-chip-bg);
    color: var(--td-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.qc-chip svg, .te-chip svg { width: 14px; height: 14px; fill: currentColor; opacity: 0.7; flex-shrink: 0; }
.qc-chip:hover, .te-chip:hover { background: var(--td-hover); }

/* Ausgewählt: gefüllt statt nur umrandet, damit auf einen Blick klar
   ist, welcher Zeitraum bzw. welches Feld gerade aktiv ist. */
.qc-chip.is-active, .te-chip.is-active {
    background: color-mix(in srgb, var(--td-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--td-accent) 45%, transparent);
    color: var(--td-accent);
}
.qc-chip.is-active svg, .te-chip.is-active svg { opacity: 1; }

.qc-dates {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.qc-datefield { flex: 1; min-width: 0; }
.qc-arrow, .te-arrow { color: var(--td-text-faint); padding-bottom: 10px; flex-shrink: 0; }
.qc-duration, .te-duration {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--td-text-muted);
    text-align: right;
}

.qc-optfields { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.qc-optfield[hidden] { display: none; }
.qc-count, .te-count {
    font-weight: 700;
    color: var(--td-text-faint);
    font-variant-numeric: tabular-nums;
}

.qc-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--td-line);
    flex-shrink: 0;
}
.qc-actions { display: flex; gap: 8px; }

.qc-btn, .te-btn {
    padding: 9px 18px;
    border-radius: var(--td-radius-sm);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.qc-btn-ghost, .te-btn-ghost {
    background: none;
    color: var(--td-text-muted);
}
.qc-btn-ghost:hover, .te-btn-ghost:hover { background: var(--td-hover); color: var(--td-text); }
.qc-btn-primary, .te-btn-primary { background: var(--td-accent); color: #fff; }
.qc-btn-primary:hover, .te-btn-primary:hover { opacity: 0.9; }
.qc-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════
   AUFGABE BEARBEITEN
   ═══════════════════════════════════════════════════════════════════ */

/* Überschreibt die engen Vorgaben von .gantt-modal (420px, 30px
   Innenabstand) — der zweispaltige Aufbau braucht mehr Breite und
   verwaltet seine Abstände je Bereich selbst. */
.te-modal.gantt-modal {
    width: min(720px, calc(100vw - 40px));
    padding: 0;
    border-radius: 20px;
    background: var(--td-surface);
    color: var(--td-text);
    overflow: hidden;
    display: none;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
}
.te-modal.gantt-modal.show { display: flex; }

.te-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--td-line);
    flex-shrink: 0;
}
.te-title {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--td-text);
    padding: 3px 6px;
    margin-left: -6px;
    border-radius: 7px;
    transition: background 0.15s;
}
.te-title:hover  { background: var(--td-hover); }
.te-title:focus  { background: var(--td-field-bg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--td-accent) 35%, transparent); }

.te-close {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; border-radius: 8px;
    color: var(--td-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.te-close:hover { background: var(--td-hover); color: var(--td-text); }

.te-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    /* min-height:0 ist hier das Entscheidende, nicht overflow:auto.
       Ein Flex-Element schrumpft von sich aus NICHT unter die Größe
       seines Inhalts — ohne diese Zeile wuchs der Bereich bei vielen
       To-Dos einfach weiter, die max-height des Fensters griff ins
       Leere und der Inhalt lief unten heraus. Auf dem iPad zeigte sich
       das als weißer Balken und einer Seite, die plötzlich als Ganzes
       scrollte. */
    min-height: 0;
}
.te-col { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.te-col-content { border-right: 1px solid var(--td-line); }

.te-field { display: flex; flex-direction: column; }

.te-label-row {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 6px;
}
.te-label-row .te-label { margin-bottom: 0; }

.te-progress {
    height: 3px;
    border-radius: 3px;
    background: var(--td-line);
    overflow: hidden;
    margin-bottom: 9px;
}
.te-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: var(--td-accent);
    transition: width 0.35s ease;
}


.te-range {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border-radius: var(--td-radius-sm);
    border: 1px solid var(--td-field-line);
    background: var(--td-field-bg);
    min-height: var(--td-field-h);
}
.te-range:focus-within { border-color: var(--td-accent); background: var(--td-surface); }
.te-range-icon { width: 15px; height: 15px; fill: var(--td-text-faint); flex-shrink: 0; }
.te-rangeinput {
    border: none;
    background: none;
    min-height: 0;
    padding: 8px 2px;
    font-size: 13.5px;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
}
.te-rangeinput:focus { border: none; background: none; box-shadow: none; }

.te-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.te-chip { padding: 5px 11px; font-size: 12px; }

.te-swatches { gap: 7px; }
.te-swatches .color-swatch { width: 26px; height: 26px; border-width: 2px; }

.te-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--td-line);
    flex-shrink: 0;
}
.te-delete {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; background: none;
    color: var(--td-text-muted);
    font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 8px 10px; border-radius: var(--td-radius-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.te-delete:hover { background: rgba(255, 59, 48, 0.1); color: #FF3B30; }
.te-foot-actions { display: flex; gap: 8px; }

/* To-Do-Liste: erbt das vorhandene .editor-todo-*-Markup aus
   gantt_editor.js, bekommt hier nur etwas mehr Luft. */
.qc-todos, .te-todos { display: flex; flex-direction: column; gap: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   TABLET — zwei Spalten werden zu einer
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
    .te-body { grid-template-columns: 1fr; }
    .te-col-content {
        border-right: none;
        border-bottom: 1px solid var(--td-line);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBIL — beide Fenster als Blatt von unten
   ───────────────────────────────────────────────────────────────────
   Ein mittig schwebender Kasten ist auf einem Telefon unbrauchbar:
   Sobald die Tastatur aufgeht, bleibt kaum Höhe übrig und das Fenster
   rutscht aus dem Bild. Als Blatt vom unteren Rand bleibt der Fuss mit
   den Knöpfen dagegen immer erreichbar, und der Inhalt scrollt.

   dvh statt vh: Auf iOS ändert sich die sichtbare Höhe, wenn die
   Adressleiste ein- und ausfährt — mit vh stünde der Fuss zeitweise
   unter dem Bildschirmrand.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* ─── Auch das Terminfenster des Kalenders ────────────────────
       Es benutzt innen längst dieselben qc-Klassen, hat aber eine
       eigene Hülle (.cal-event-overlay / .cal-event-modal) — deshalb
       griffen die Blatt-Regeln hier nicht, und auf dem Telefon poppte
       mitten im Bild eine Karte auf, während die Projektplanung ein
       Blatt von unten hochfährt.

       Die .as-sheet-Fassung muss mitgenannt werden: calendar.css
       setzt unter 900px eigene Regeln mit zwei bzw. drei Klassen,
       die eine einfache .cal-event-modal überstimmen würden. Gleiche
       Gewichtung, spätere Datei — damit gewinnt diese hier. */
    .editor-modal-overlay,
    .cal-event-overlay,
    .cal-event-overlay.as-sheet { align-items: flex-end; padding: 0; }

    /* Der Schleier blendet über (calSchleierEin aus calendar.css) — das
       bleibt so. Nur das seitliche Hereinfahren des Blattmodus wäre hier
       falsch, denn auf dem Telefon gibt es kein Seitenblatt. */
    .cal-event-overlay.as-sheet.open { animation: calSchleierEin 0.25s ease; }

    .qc-card,
    .cal-event-overlay .cal-event-modal,
    .cal-event-overlay.as-sheet .cal-event-modal {
        margin: 0;
        max-width: none;
        width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 92dvh;
        height: auto;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        display: flex;
        flex-direction: column;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.22);
    }
    .qc-card {
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
    }
    .editor-modal-overlay.show .qc-card { transform: translateY(0); }

    /* Beim Kalender schaltet das Skript die Hülle in EINEM Schritt von
       display:none auf flex. Ein Übergang liefe dabei nicht an — der
       Browser hatte für den Anfangszustand nie ein Layout. Eine
       Animation läuft in diesem Fall zuverlässig, deshalb hier eine
       statt einer Transition. */
    @keyframes qcBlattHoch {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    .cal-event-overlay.open .cal-event-modal,
    .cal-event-overlay.as-sheet.open .cal-event-modal {
        animation: qcBlattHoch 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
    }

    /* Der Rumpf trägt die Bildlaufleiste, Kopf und Fuss bleiben stehen. */
    .cal-event-overlay .cal-event-modal-body,
    .cal-event-overlay.as-sheet .cal-event-modal-body {
        flex: 1;
        min-height: 0;
        max-height: none;
    }

    /* Das Schliesskreuz entfällt: Im Blatt steht „Abbrechen" dauerhaft
       im Fuss, und die Projektplanung — an der sich das hier ausrichtet
       — hat oben ebenfalls keines. */
    .cal-event-overlay .cal-event-modal-close { display: none; }

    .te-modal.gantt-modal {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        transform: translate(0, 100%);
        border-radius: 20px 20px 0 0;
        max-height: 92dvh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .te-modal.gantt-modal.show { transform: translate(0, 0); }

    /* Griff-Andeutung wie bei nativen Blättern */
    .qc-card::before,
    .cal-event-modal::before,
    .te-modal.gantt-modal::before {
        content: '';
        display: block;
        width: 36px; height: 4px;
        border-radius: 4px;
        background: var(--td-line);
        margin: 8px auto 0;
        flex-shrink: 0;
    }

    .qc-head { padding-top: 12px; }
    .te-head { padding-top: 12px; }

    /* Fingerfreundlichere Ziele */
    .qc-chip, .te-chip { padding: 9px 14px; font-size: 13px; }
    .te-swatches .color-swatch { width: 30px; height: 30px; }
    .qc-btn, .te-btn { padding: 11px 18px; }

    
    /* 16px verhindert, dass iOS beim Fokus hineinzoomt */
    .qc-input, .te-input, .te-rangeinput, .qc-title, .te-title { font-size: 16px; }
    .te-rangeinput { font-size: 15px; }
}

/* Sehr schmale Geräte: Datumsbereich untereinander */
@media (max-width: 360px) {
    .qc-dates { flex-direction: column; align-items: stretch; }
    .qc-arrow { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   VORSCHLAGSLISTE „ZUSTÄNDIG"
   ───────────────────────────────────────────────────────────────────
   Ersetzt das native <datalist>, das sich weder positionieren liess
   noch auf iPadOS die Eingabe durchliess.

   Sie hängt am body und ist fest positioniert — im Dialog hätte der
   scrollende Bereich sie an der Unterkante abgeschnitten. Der z-index
   liegt über beiden Fenstern (Bearbeiten: 100001).
   ═══════════════════════════════════════════════════════════════════ */
.td-suggest {
    position: fixed;
    z-index: 100010;
    max-height: 208px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px;
    border-radius: var(--td-radius-sm);
    border: 1px solid var(--td-field-line);
    background: var(--td-surface);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.td-suggest[hidden] { display: none; }

.td-suggest-item {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--td-text);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.td-suggest-item:hover,
.td-suggest-item.is-active { background: var(--td-hover); }

/* Auf dem Telefon grössere Ziele — die Liste wird angetippt, nicht
   angeklickt. */
@media (max-width: 640px) {
    .td-suggest-item { padding: 12px 12px; font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════
   ERGÄNZUNGEN FÜR DAS TERMINFENSTER
   ──────────────────────────────────────────────────────────────────
   Das Anlegen eines Termins folgt demselben Aufbau wie das Anlegen
   einer Aufgabe und nutzt deshalb dieselben .qc-Klassen. Nur zwei
   Kleinigkeiten kommen dazu, die es in der Projektplanung nicht gibt:
   eine Kopfzeile mit Schliessknopf (dort sitzt er woanders) und
   kleinere Pillen für die Dauer, damit die vier Vorschläge in eine
   Zeile passen.
   ══════════════════════════════════════════════════════════════════ */
.qc-headrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.qc-headrow .qc-context { margin-bottom: 0; }

.qc-chip-sm {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
}

/* Die Dauer-Pillen stehen dicht unter den Datumsfeldern und
   gehören sichtbar dazu. */
#cal-duration-chips { margin-top: 10px; }