/* ================================================================
   DOMAIN EDITOR MODAL — .de-* namespace
   utils/ui/domainEditorModal.js

   Two-pane modal for user-defined validation domains.
   Overlay/dialog/header handled by buildModalShell (.sym-*).
   This file owns all internal layout: sidebar, editor pane,
   entity tabs, rule rows, test panel.
   License: AGPL-3.0
   ================================================================ */

/* === SIDEBAR === */
.de-sidebar {
    width: 220px;
    min-width: 220px;
    border-right: 1px solid var(--border-color, #333);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 12px;
}

.de-sidebar-item {
    padding: 8px 10px;
    margin-bottom: 4px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    background: var(--bg-secondary, #222);
}

.de-sidebar-item--active {
    background: var(--accent, #3b6bff);
    color: #fff;
}

/* === ACTIVE DOT === */
.de-active-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #666;
}

.de-active-dot--on {
    background: #4caf50;
}

/* === SIDEBAR LABEL === */
.de-sidebar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* === SIDEBAR COUNT === */
.de-sidebar-count {
    font-size: 11px;
    color: #888;
    flex-shrink: 0;
}

/* === SIDEBAR BUTTONS === */
.de-sidebar-btn {
    padding: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.de-sidebar-btn--primary {
    background: var(--accent, #3b6bff);
    color: #fff;
    border: none;
    margin-top: 8px;
}

.de-sidebar-btn--secondary {
    background: var(--bg-secondary, #222);
    color: var(--text-primary, #e0e0e0);
    border: 1px solid var(--border-color, #444);
    margin-top: 4px;
}

/* === EMPTY STATE === */
.de-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 14px;
    padding: 40px;
    text-align: center;
}

/* === CONTENT PANE === */
.de-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px;
}

/* === META ROW === */
.de-meta-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* === ENTITY TABS === */
.de-entity-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.de-entity-tab {
    padding: 6px 12px;
    border: 1px solid var(--border-color, #444);
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 12px;
    background: var(--bg-secondary, #222);
    color: var(--text-primary, #e0e0e0);
}

.de-entity-tab--active {
    background: var(--accent, #3b6bff);
    color: #fff;
    border-bottom: none;
}

/* === ADD / DELETE ENTITY BUTTONS === */
.de-add-entity-btn {
    padding: 6px 10px;
    border: 1px dashed var(--border-color, #555);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    background: none;
    color: var(--text-primary, #e0e0e0);
}

.de-del-entity-btn {
    padding: 6px 10px;
    border: 1px solid #c62828;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    background: none;
    color: #c62828;
}

/* === SECTION HEADING === */
.de-section-heading {
    margin: 0 0 8px;
    font-size: 13px;
    color: #aaa;
}

.de-section-heading--clickable {
    cursor: pointer;
}

/* === RULES TABLE === */
.de-rules-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.de-rules-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color, #444);
    color: #888;
    font-weight: 500;
}

.de-rules-table tr {
    border-bottom: 1px solid var(--border-color, #333);
}

.de-rules-table td {
    padding: 4px 6px;
}

/* === RULE INPUT (shared by field, select, param inputs in rule rows) === */
.de-rule-input {
    padding: 4px 6px;
    background: var(--bg-secondary, #222);
    border: 1px solid var(--border-color, #444);
    border-radius: 3px;
    color: var(--text-primary, #e0e0e0);
    font-size: 12px;
}

/* === PARAMS WRAPPER === */
.de-params-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* === DELETE BUTTON (inline, for rules/relations/batch) === */
.de-delete-btn {
    background: none;
    border: none;
    color: #c62828;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
}

/* === ADD RULE / ADD BATCH / ADD RELATION BUTTON === */
.de-add-btn {
    margin-top: 6px;
    padding: 4px 12px;
    background: none;
    border: 1px dashed var(--border-color, #555);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary, #e0e0e0);
}

.de-add-btn--mt4 {
    margin-top: 4px;
}

/* === BATCH RULES SECTION === */
.de-batch-section {
    margin-top: 16px;
}

.de-batch-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}

.de-batch-label {
    font-size: 12px;
    color: #888;
}

.de-batch-delete-btn {
    background: none;
    border: none;
    color: #c62828;
    cursor: pointer;
    font-size: 14px;
}

/* === RELATIONS SECTION === */
.de-relations-section {
    margin-top: 16px;
}

.de-relation-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12px;
}

/* === FOOTER ACTIONS === */
.de-footer {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #333);
    flex-wrap: wrap;
}

/* === ACTION BUTTON === */
.de-action-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #fff;
}

.de-action-btn--accent  { background: var(--accent, #3b6bff); }
.de-action-btn--muted   { background: #666; }
.de-action-btn--neutral { background: #555; }
.de-action-btn--danger  { background: #c62828; }

/* === LABELED INPUT GROUP === */
.de-labeled-input {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.de-labeled-input label {
    font-size: 11px;
    color: #888;
}

.de-labeled-input input {
    padding: 6px 8px;
    background: var(--bg-secondary, #222);
    border: 1px solid var(--border-color, #444);
    border-radius: 4px;
    color: var(--text-primary, #e0e0e0);
    font-size: 13px;
}

/* === TEST PANEL === */
.de-test-panel {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid var(--border-color, #444);
    border-radius: 6px;
    background: var(--bg-secondary, #222);
}

.de-test-heading {
    margin: 0 0 8px;
    font-size: 13px;
}

.de-test-hint {
    font-size: 12px;
    color: #888;
    margin: 0 0 8px;
}

.de-test-textarea {
    width: 100%;
    height: 100px;
    padding: 8px;
    background: var(--bg-primary, #1a1a2e);
    border: 1px solid var(--border-color, #444);
    border-radius: 4px;
    color: var(--text-primary, #e0e0e0);
    font-family: monospace;
    font-size: 12px;
    resize: vertical;
}

.de-test-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.de-test-results {
    margin-top: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.de-test-results table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.de-test-results th {
    text-align: left;
    padding: 4px 6px;
    color: #888;
}

.de-test-results td {
    padding: 4px 6px;
}

.de-test-msg--error   { color: #c62828; font-size: 12px; }
.de-test-msg--success { color: #4caf50; font-size: 12px; }
.de-test-sev--error   { color: #c62828; }
.de-test-sev--warning { color: #f9a825; }
.de-test-sev--info    { color: #2196f3; }