/* Integrações (wms-integration): layout and colors only (sizes of fields and buttons come from forms.css). */
.integration-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px
}

.integration-options .permission-option {
    margin: 0
}

.integration-options code {
    font-size: 9px;
    color: var(--text-muted);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    margin-left: 4px;
    font-weight: 500
}

.integration-key {
    margin: 0 0 18px;
    padding: 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--primary-border);
    background: var(--primary-faint)
}

.integration-key strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--primary-text)
}

.integration-key p {
    font-size: 10px;
    line-height: 1.6;
    color: var(--text-2);
    margin: 6px 0 10px
}

.integration-key small {
    display: block;
    font-size: 9px;
    color: var(--success-text);
    margin-top: 6px
}

.integration-key-value {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center
}

.integration-key-value .profile-name-input {
    font-family: ui-monospace, monospace;
    background: var(--field-bg)
}

.integration-audit code {
    font-family: ui-monospace, monospace;
    font-size: 10px;
    color: var(--primary-text)
}

.integration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px
}

.integration-actions .integration-revoke {
    color: var(--danger-text);
    border-color: var(--danger-border)
}

.integration-actions .integration-revoke:hover:not(:disabled) {
    background: var(--danger-faint);
    color: var(--danger-text)
}

.integration-note {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--warning-border);
    background: var(--warning-faint);
    font-size: 10px;
    line-height: 1.5;
    color: var(--warning-text)
}

/* Webhooks (wms-integration 9B): tabs, event picker per domain, delivery log and details. */
.integration-tabs {
    margin: 0 0 14px
}

/* Validation r1 of 9B (W5): no horizontal scroll at 1440px: the columns and the panels never grow past the grid; the log scrolls inside its box. */
.integration-webhooks>*,
.integration-webhook-main>* {
    min-width: 0
}

.integration-webhooks .profile-list-panel>.user-field {
    margin-bottom: 18px
}

.integration-webhooks .profile-list-panel>.user-field label {
    display: block;
    margin-bottom: 6px
}

.webhook-log .stock-grid-wrap {
    overflow: auto;
    max-width: 100%
}

.webhook-grid {
    table-layout: fixed
}

.webhook-grid .webhook-select {
    width: 28px
}

.webhook-grid td {
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: top
}

.webhook-grid td:last-child,
.webhook-grid th:last-child {
    width: 64px;
    padding-left: 8px;
    padding-right: 8px
}

.webhook-filters .user-field {
    min-width: 0
}

.webhook-details pre,
.webhook-attempts span {
    overflow-wrap: anywhere
}

.webhook-domains {
    display: grid;
    gap: 8px
}

.webhook-domain {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 8px 10px;
    background: var(--surface)
}

.webhook-domain summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-2)
}

.webhook-domain summary em {
    font-style: normal;
    font-size: 10px;
    color: var(--text-muted)
}

.webhook-domain .permission-option {
    margin: 8px 0
}

.webhook-domain code,
.webhook-grid code {
    font-family: ui-monospace, monospace;
    font-size: 9px;
    color: var(--primary-text)
}

.webhook-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap: 4px 10px
}

.webhook-type {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--text-2)
}

.webhook-type.checked code {
    font-weight: 600
}

.webhook-test {
    font-size: 10px;
    align-self: center
}

.webhook-test.is-ok {
    color: var(--success-text)
}

.webhook-test.is-failed {
    color: var(--danger-text)
}

.webhook-filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    gap: 8px;
    align-items: end;
    margin: 0 0 10px
}

.webhook-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    grid-column: 1/-1
}

.webhook-status {
    font-weight: 600
}

.webhook-status.is-delivered {
    color: var(--success-text)
}

.webhook-status.is-pending {
    color: var(--warning-text)
}

.webhook-status.is-dead {
    color: var(--danger-text)
}

.integration-dead {
    color: var(--danger-text);
    background: var(--danger-faint)
}

.webhook-details {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface)
}

.webhook-attempts {
    margin: 0 0 10px;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    font-size: 10px;
    color: var(--text-2)
}

.webhook-attempts span {
    display: block
}

.webhook-details pre {
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 9px;
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: 8px;
    max-height: 260px;
    overflow: auto;
    margin: 4px 0 0
}

.webhook-body-title {
    font-size: 11px;
    color: var(--text-2)
}