/* ============================================================
   Modal & confirm dialogs (App.dialog.*) - replaces the desktop
   CustomMessageBox with the same Yes/No confirmation workflow.
   ============================================================ */
.app-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background-overlay);
    padding: var(--spacing-lg);
}


.app-modal {
    width: min(440px, 100%);
    max-height: calc(100dvh - 2 * var(--spacing-lg));
    display: flex;
    flex-direction: column;
    background: var(--color-background-surface);
    color: var(--color-text-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.app-modal--md { width: min(600px, 100%); }
.app-modal--lg { width: min(800px, 100%); }
.app-modal--xl { width: min(1000px, 100%); }

.app-modal__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-block-end: 1px solid var(--color-border-default);
    font-size: var(--font-size-section-title);
    font-weight: 600;
}

.app-modal__header .app-icon {
    color: var(--color-status-warning);
}

.app-modal--danger .app-modal__header .app-icon {
    color: var(--color-status-danger);
}

.app-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--spacing-lg);
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
}

.app-modal__footer {
    display: flex;
    justify-content: end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-block-start: 1px solid var(--color-border-default);
    background: var(--color-background-subtle);
}

@media (max-width: 767.98px) {
    .app-modal--md,
    .app-modal--lg,
    .app-modal--xl {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .app-modal-backdrop {
        padding: var(--spacing-sm);
        align-items: flex-end;
    }

    .app-modal {
        width: 100%;
        max-height: calc(100dvh - 2 * var(--spacing-sm));
    }

    /* footer buttons stack and stay tappable */
    .app-modal__footer {
        flex-wrap: wrap;
    }

    .app-modal__footer .app-btn {
        flex: 1 1 120px;
        min-height: var(--control-height-lg);
    }
}