/* Modale d'import et autres dialogues. */

.itf-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: var(--itf-z-modal);
    padding: var(--itf-space-5);
    overflow-y: auto;
}

.itf-modal {
    max-width: 560px;
    margin: 8vh auto 0;
    background: var(--itf-card);
    border: 1px solid var(--itf-border);
    border-radius: var(--itf-radius-lg);
    padding: var(--itf-space-5);
    box-shadow: var(--itf-shadow-lg);
}

.itf-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--itf-space-3);
    margin-bottom: var(--itf-space-4);
}

.itf-modal__title {
    margin: 0;
    font-size: var(--itf-font-size-lg);
}

.itf-import-form {
    display: grid;
    gap: var(--itf-space-3);
}

.itf-import-form__file {
    background: var(--itf-input-bg);
    border: 1px solid var(--itf-border);
    color: var(--itf-text);
    padding: var(--itf-space-3);
    border-radius: var(--itf-radius-sm);
}

.itf-import-form__modes {
    background: var(--itf-input-bg);
    border: 1px solid var(--itf-border);
    border-radius: var(--itf-radius);
    padding: var(--itf-space-3);
}

.itf-import-form__modes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--itf-space-3);
    margin-bottom: var(--itf-space-3);
}

.itf-import-form__modes-options {
    display: grid;
    gap: var(--itf-space-2);
}

.itf-import-form__mode {
    display: flex;
    align-items: flex-start;
    gap: var(--itf-space-2);
    padding: var(--itf-space-2);
    border: 1px solid var(--itf-border);
    border-radius: var(--itf-radius-sm);
    cursor: pointer;
    color: var(--itf-text);
}

.itf-import-form__mode:hover {
    border-color: var(--itf-primary);
}

.itf-import-form__mode small {
    color: var(--itf-text-dim);
}