/* ==========================================================================
   Plugin settings (AI-1825): the plugin's instructions, each connection as a
   quiet panel with its lookup, datasets and operations as divided rows, and
   the form for a new connection.
   ========================================================================== */

.pp-intro {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.pp-intro__icon {
    flex: 0 0 auto;
    border-radius: var(--ui-radius);
}

.pp-intro__text {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-message {
    margin-bottom: 24px;
}

/* ---------- Connection -------------------------------------------------- */

.pp-connection {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-connection__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.pp-connection__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pp-connection__mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in srgb, var(--ui-tone-success) 45%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--ui-tone-success) 10%, transparent);
}

.pp-connection__titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pp-connection__name {
    font-size: 0.9375rem;
    font-weight: 600;
}

.pp-connection__meta {
    color: var(--ui-text-2);
    font-size: 0.75rem;
}

.pp-connection__details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--ui-divider);
}

.pp-connection__details .ui-text {
    margin: 0;
}

.pp-credential {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.pp-credential__field {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-credential__field .ui-field__input {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

/* The copy button sits level with the input, below the label. */
.pp-credential > .ui-btn {
    margin-top: 22px;
}

/* ---------- Lookup, datasets, operations -------------------------------- */

.plugin-ops {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    border-top: 1px solid var(--ui-divider);
}

.plugin-ops__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 0 6px;
}

.plugin-ops > .ui-alert {
    margin-top: 4px;
}

.plugin-op {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 24px;
    padding: 12px 0;
    border-top: 1px solid var(--ui-divider);
}

.plugin-op__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.plugin-op__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.plugin-op__name {
    font-size: 0.875rem;
    font-weight: 500;
}

.plugin-op__desc {
    display: -webkit-box;
    max-width: 62ch;
    overflow: hidden;
    color: var(--ui-text-2);
    font-size: 0.8125rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.plugin-op__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 12px;
}

.plugin-op__select {
    width: 240px;
}

@media (max-width: 700px) {
    .plugin-op {
        grid-template-columns: minmax(0, 1fr);
    }

    .plugin-op__controls {
        justify-content: flex-start;
    }

    .plugin-op__select {
        width: 100%;
    }
}