/* Random data generators (MongoDB + SQL). Builds on /tools/conn-tools.css. */
.rdg-wrap { grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 900px) { .rdg-wrap { grid-template-columns: 1fr; } }

.rdg-seed { display: flex; gap: 8px; }
.rdg-seed .conn-input { flex: 1; min-width: 0; font-family: 'SFMono-Regular', Consolas, Menlo, monospace; }
.rdg-seed .conn-engine { flex-shrink: 0; white-space: nowrap; }

.rdg-field { border: 1px solid rgba(6, 78, 59, 0.10); border-radius: 12px; padding: 10px; margin-bottom: 10px; background: #fbfdfc; }
.rdg-field-main { display: flex; gap: 8px; align-items: center; }
.rdg-name { flex: 1 1 40%; min-width: 0; font-family: 'SFMono-Regular', Consolas, Menlo, monospace; font-size: .82rem; }
.rdg-type { flex: 1 1 45%; min-width: 0; }
.rdg-field-actions { display: flex; flex-shrink: 0; gap: 2px; }
.rdg-icon { width: 28px; height: 28px; border: none; border-radius: 7px; background: transparent; color: #94a3b8; cursor: pointer; }
.rdg-icon:hover:not(:disabled) { background: #eef4f0; color: #059669; }
.rdg-icon:disabled { opacity: .35; cursor: default; }
.rdg-remove:hover:not(:disabled) { background: #fef2f2; color: #dc2626; }

.rdg-field-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rdg-field-opts:empty { display: none; }
.rdg-opt { display: flex; flex-direction: column; gap: 3px; flex: 0 1 110px; min-width: 80px; }
.rdg-opt span { font-size: .68rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.rdg-opt .conn-input { padding: 6px 9px; font-size: .8rem; }
.rdg-opt-wide { flex: 1 1 220px; }
.rdg-opt-null { margin-left: auto; flex-basis: 80px; }

.rdg-add { margin-top: 2px; }

.rdg-out-actions { display: flex; gap: 6px; }
.rdg-output {
    box-sizing: border-box; width: 100%; height: 560px; resize: vertical;
    background: #0f2a22; color: #d1fae5; border: none; border-radius: 10px; padding: 14px 15px;
    font-family: 'SFMono-Regular', Consolas, Menlo, monospace; font-size: .76rem; line-height: 1.55;
    white-space: pre; overflow: auto; outline: none; tab-size: 2;
}
.rdg-output:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); }
@media (max-width: 900px) { .rdg-output { height: 420px; } }

#rdg-howto code { font-size: .74rem; background: #eef4f0; color: #064e3b; padding: 1px 5px; border-radius: 4px; word-break: break-all; }