/* Verschachtelte Rezeptkomponenten und Premix-Dialog */

.form-section-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.ingredient-entry {
    display: grid;
    gap: 0.45rem;
}

.ingredient-entry-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.ingredient-entry-title {
    min-width: 0;
    font-size: 1.05rem;
}

.ingredient-note {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.status-badge-link {
    text-decoration: none;
}

.status-badge-link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.component-breakdown {
    display: grid;
    gap: 0.45rem;
    margin: 0.15rem 0 0 1rem;
    padding: 0 0 0 0.9rem;
    border-left: 1px solid var(--border-strong);
    list-style: none;
}

.component-breakdown li {
    display: grid;
    gap: 0.35rem;
    border: 0;
    padding: 0;
}

.component-breakdown-line {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.component-breakdown-marker {
    flex: 0 0 auto;
    color: var(--accent);
}

.premix-dialog {
    width: min(64rem, calc(100% - 2rem));
    max-height: min(58rem, calc(100dvh - 2rem));
}

.premix-dialog-body {
    gap: 1.25rem;
}

.dialog-section {
    display: grid;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 1rem;
    background: var(--surface-soft);
}

.dialog-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.dialog-section-heading h3,
.dialog-section-heading p {
    margin: 0;
}

.dialog-section-heading p {
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.compact-component-list,
.compact-step-list {
    display: grid;
    gap: 0.75rem;
}

.compact-component-row {
    display: grid;
    grid-template-columns:
        auto
        minmax(14rem, 2fr)
        minmax(7rem, 0.7fr)
        minmax(7rem, 0.7fr)
        auto;
    align-items: start;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.85rem;
    background: var(--surface);
}

.compact-row-number {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    margin-top: 1.55rem;
    border-radius: 999px;
    background: rgba(215, 164, 82, 0.14);
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 800;
}

.compact-remove-button {
    margin-top: 1.75rem;
}

.compact-step-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.85rem;
    background: var(--surface);
}

.compact-help {
    margin: 0;
}

@media (max-width: 860px) {.compact-component-row {
        grid-template-columns: auto 1fr 1fr;
    }

    .compact-component-row .ingredient-autocomplete {
        grid-column: 2 / -1;
    }

    .compact-remove-button {
        grid-column: 2 / -1;
        justify-self: end;
        margin-top: 0;
    }
}

@media (max-width: 600px) {.form-section-actions {
        width: 100%;
    }

    .form-section-actions > * {
        flex: 1 1 auto;
    }

    .ingredient-entry-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .component-breakdown {
        margin-left: 0.35rem;
    }

    .compact-component-row,
    .compact-step-row {
        grid-template-columns: 1fr;
    }

    .compact-component-row .ingredient-autocomplete,
    .compact-remove-button {
        grid-column: auto;
    }

    .compact-row-number {
        display: none;
    }

    .compact-remove-button {
        justify-self: start;
        margin-top: 0;
    }

    .dialog-section-heading {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Kategorie, Methode, Glasware, Eis und Garnitur verwalten */
.catalog-dialog {
    width: min(34rem, calc(100% - 2rem));
}

[data-catalog-select] optgroup {
    color: var(--text-muted);
}

@media (max-width: 600px) {.catalog-dialog {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }
}

/* Löschen im Stammdaten-Dialog */

.catalog-dialog-actions {
    justify-content: space-between;
}

.catalog-dialog-action-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.catalog-delete-button {
    margin-right: auto;
}

@media (max-width: 600px) {.catalog-dialog-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .catalog-dialog-action-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .catalog-delete-button {
        width: 100%;
        margin-right: 0;
    }
}