/* ============================================
   Modal Overlay & Dialog
   ============================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-dialog {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-radius: var(--radius-lg);
    padding: clamp(1rem, 3vmin, 1.5rem);
    width: min(90vw, 80vmin);
    max-width: 90vw;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-title {
    margin: 0 0 clamp(0.8rem, 2.5vmin, 1rem);
    font-size: inherit;
    color: var(--color-text-secondary);
    text-align: center;
}

.modal-body {
    margin-bottom: 1rem;
}

.info-message {
    white-space: pre-line;
    text-align: center;
    font-size: clamp(1rem, 3vmin, 1.25rem);
    line-height: 1.5;
    margin: 0 0 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

/* Info-Modal: einzelner Button nicht full-width */
.modal-footer:has(> .input-field:only-child) {
    justify-content: center;
}

.modal-footer:has(> .input-field:only-child) .input-field {
    flex: 0 1 auto;
    min-width: 8rem;
    margin: 0;
    padding: 0.4rem 2rem;
}

.modal-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Buttons im Footer – nutzen .input-field aus main.css */
.modal-footer .input-field {
    flex: 1;
    padding: 0.5rem 1.5rem;
    margin: 0 clamp(0.25rem, 2vmin, 3rem);
}

/* ============================================
   Input-Feld (nutzt .input-field aus main.css)
   ============================================ */

#modalInput {
    width: 100%;
    text-align: center;
    padding: clamp(0.5rem, 2vmin, 1rem);
}

/* Stepper-Zeile: btn-down | input | btn-up */
.stepper-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
}

.stepper-btn {
    flex: 0 1 auto;
    min-width: 5ch;
    padding: 0.4rem 0.5rem;
    text-align: center;
}

.stepper-row #modalInput {
    flex: 0 1 auto;
    width: auto;
    max-width: 10ch;
}

/* ============================================
   Preset-Buttons (nutzen .input-field aus main.css)
   ============================================ */

.presets {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    justify-content: center;
}

.preset-btn {
    flex: 1;
    min-width: 8ch;
    max-width: 10rem;
    padding: 0.4rem 0.5rem;
}

/* ============================================
   Responsive: Klein-Screens (≤400px)
   ============================================ */

@media (max-width: 400px) {
    .modal-dialog {
        width: min(95vw, 300px);
        padding: 1rem;
    }
    
    .modal-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .presets {
        gap: 0.3rem;
    }
    
    .preset-btn {
        max-width: 60px;
        padding: 0.3rem 0.4rem;
        font-size: 0.85rem;
    }
    
    #modalInput {
        font-size: 0.9rem;
        padding: 0.4rem;
    }

    .stepper-row {
        gap: 0.3rem;
    }

    .stepper-btn {
        min-width: 4ch;
        padding: 0.3rem 0.4rem;
        font-size: 0.85rem;
    }
}

/* ============================================
   Responsive: Größere Screens (>400px)
   ============================================ */

@media (min-width: 401px) {
    .modal-footer {
        flex-direction: row;
        justify-content: flex-end;
    }
}