.automation-card {

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

}

.drag-handle {

    width:36px;

    min-width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    color:#777;

    cursor:grab;

    user-select:none;

    border-radius:8px;

    transition:.15s;

}

.drag-handle:active {

    cursor:grabbing;

    background:#e8e8e8;

}



.automation-card.dragging {

    opacity:0.5;

}

.automation-info {

    display:flex;

    align-items:center;

    gap:8px;

    flex:1;

}

.drop-indicator {

    height:3px;

    background:var(--primary-color);

    border-radius:5px;

    margin:6px 0;

    display:none;

    pointer-events:none;

}

.automation-options {

    display:flex;

    flex-direction:column;

    gap:8px;

    margin:16px 0;

    max-height:320px;

    overflow-y:auto;

}

.automation-option {

    display:flex;

    align-items:flex-start;

    gap:10px;

    padding:10px 12px;

    border:1px solid #eee;

    border-radius:8px;

    cursor:pointer;

}

.automation-option:hover {

    background:#f5f7fb;

}

.automation-option input[type="radio"] {

    margin-top:3px;

}

.automation-option-body {

    display:flex;

    flex-direction:column;

    gap:2px;

}

.automation-option-title {

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;

}

.automation-option-desc {

    font-size:13px;

    color:#6b7280;

}

.automation-form label {

    display:block;

    font-size:13px;

    color:#6b7280;

    margin-top:10px;

    margin-bottom:4px;

}

.automation-form input,
.automation-form select,
.automation-form textarea {

    width:100%;

    padding:10px 12px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:14px;

    font-family:inherit;

    box-sizing:border-box;

}

.automation-form textarea {

    resize:vertical;

}

.approver-picker {

    display:flex;

    flex-direction:column;

    gap:8px;

}

.approver-picker-roles {

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    padding-bottom:8px;

    border-bottom:1px solid #eee;

}

/* Two-class selector, same reason as .notify-role-checkbox-row above —
   beats .automation-form label's display:block. */
.automation-form .approver-role-chip {

    display:flex;

    align-items:center;

    gap:6px;

    font-size:13px;

    font-weight:normal;

    color:#374151;

    margin:0;

    padding:5px 10px;

    background:#f5f7fb;

    border:1px solid #ddd;

    border-radius:999px;

    cursor:pointer;

}

.automation-form .approver-role-chip input[type="checkbox"] {

    width:auto;

}

.approver-picker-users {

    display:flex;

    flex-direction:column;

    gap:6px;

    max-height:220px;

    overflow-y:auto;

    padding:10px 12px;

    border:1px solid #ddd;

    border-radius:8px;

}

.automation-form .approver-user-row {

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#374151;

    font-weight:normal;

    margin:0;

}

.automation-form .approver-user-row input[type="checkbox"] {

    width:auto;

}

.update-field-row {

    display:flex;

    gap:16px;

    align-items:flex-start;

}

.update-field-col {

    flex:1;

    min-width:0;

}

.update-field-col label {

    margin-top:0;

}

.picker-actions {

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:12px;

}

.automation-form .webhook-platform-list {

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-top:6px;

}

/* Overrides .automation-form label's display:block (a plain-class selector
   here beats it on specificity) — this label wraps a checkbox + text and
   needs to stay inline, not stack them. */
.automation-form .webhook-platform-option {

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:normal;

    cursor:pointer;

    margin:0;

}

/* .automation-form input's width:100%/padding is meant for text inputs —
   a checkbox stretched to full width with that padding would look broken. */
.automation-form .webhook-platform-option input[type="checkbox"] {

    width:auto;

    padding:0;

}

.automation-form .webhook-platform-option-disabled {

    color:#9ca3af;

    cursor:not-allowed;

}

.automation-form .webhook-platform-hint {

    font-size:12px;

    color:#9ca3af;

}

.automation-form .webhook-platform-block {

    display:flex;

    flex-direction:column;

    gap:6px;

}

/* Indented + left-bordered so it visually reads as "belongs to the
   checkbox above it" rather than as its own separate form field. */
.automation-form .webhook-platform-settings {

    margin-left:26px;

    padding:8px 0 8px 12px;

    border-left:2px solid #e5e7eb;

    display:flex;

    flex-direction:column;

    gap:6px;

}

.automation-form .webhook-platform-settings label {

    margin:0;

    font-size:12px;

    color:#6b7280;

}