/* Das Vorgangs-Modal, überall wo es geöffnet wird: Mission-Control-Board, Startseite, jede
   Seite mit infdl_tasks/snippets/task_modal_shell_tabler.html.

   Stand vorher im Style-Block von mission_control.html – auf der Startseite fehlte damit
   unter anderem die gestrichelte Unterstreichung der bearbeitbaren Felder. Was zum Modal
   gehört, steht hier; was zum Board gehört (Spalten, Karten, Klapplisten), bleibt dort.
   Das Skript dazu: static/js/task_modal.js. */

.mc-task-modal .modal-header .input-group {
    /* .input-group is width: 100% by default, which would claim a row of its own. */
    width: auto;
    flex: 1 1 0;
    min-width: 12rem;
}

@media (min-width: 992px) {
    .mc-task-modal .modal-body {
        /* Das Scrollen übernehmen die beiden Spalten. Der Body hat keine feste Höhe,
           nur eine gedeckelte – Prozenthöhen der Kinder greifen daran nicht, deshalb
           die Kette über Flexbox statt height: 100%. */
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .mc-task-modal .mc-modal-row {
        flex: 1 1 auto;
        /* Ohne min-height: 0 wächst ein Flex-Item mit seinem Inhalt statt zu scrollen. */
        min-height: 0;
        /* .row umbricht per Voreinstellung; eine umbrechende Flex-Zeile ist so hoch wie
           ihr größtes Kind – die Spalten bekämen also nie die Höhe des Modals. Ab lg
           stehen die beiden ohnehin nebeneinander (col-lg-5 + col-lg-7). */
        flex-wrap: nowrap;
    }

    .mc-task-modal .mc-modal-pane {
        overflow-y: auto;
        min-height: 0;
    }
}

/* Verlauf im Vorgangs-Modal: Tabler-Timeline, aber kompakter und ohne Kästchen. */
.mc-timeline {
    --tblr-timeline-icon-size: 1.5rem;
    --tblr-page-padding: .75rem;
}

.mc-timeline .timeline-event-icon {
    font-size: .75rem;
}

#task-modal-body {
    display: contents;
}

.mc-inline-edit {
    padding: .25rem .5rem;
    margin: -.25rem -.5rem;
    border-radius: var(--tblr-border-radius);
    cursor: text;
}

.mc-inline-edit:hover {
    text-decoration: underline dashed;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* Anhänge als Kacheln: oben die Vorschau (Bild, Abspielknopf oder Dateisymbol),
   darunter Name und Download. Feste Breite, damit die Reihe ruhig bleibt. */
.mc-attachment {
    width: 9rem;
    overflow: hidden;
}

.mc-attachment-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    font-size: 1.75rem;
    background-color: var(--tblr-bg-surface-tertiary);
    border-bottom: 1px solid var(--tblr-border-color);
}

.mc-attachment-preview a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Der Abspielknopf ist der Inhalt der Kachel, nicht eine Beigabe – er darf so
   groß sein wie das Dateisymbol daneben. */
.mc-attachment-preview .btn {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.5rem;
}

/* Ausschnitt statt Verzerrung – die Kachel zeigt nur an, was dranhängt. */
.mc-attachment-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Schalter ohne Beschriftung: .form-check reserviert links Platz für ein Label,
   das es hier nicht gibt – der Schalter steht sonst eingerückt in der Zeile. */
.mc-switch {
    padding-left: 0;
    margin: 0;
}

.mc-switch .form-check-input {
    margin-left: 0;
}