:root {
  --bg: #17222D;
  --panel: #202C38;
  --panel-alt: #2A3947;
  --border: #415263;
  --text: #F2F6FA;
  --text-muted: #B1BFCC;
  --accent: #55D8CC;       /* relações confirmadas / ações primárias */
  --accent-dim: #275E5B;
  --amber: #F4B76B;        /* relações sugeridas por heurística */
  --danger: #FF7479;
  --success: #62D9A1;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --radius: 6px;
}


:root[data-theme="light"] {
  --bg: #F4F7FA;
  --panel: #FFFFFF;
  --panel-alt: #EAF0F5;
  --border: #CAD5E0;
  --text: #17212B;
  --text-muted: #607080;
  --accent: #0E8F87;
  --accent-dim: #CDEDEA;
  --amber: #A85A00;
  --danger: #C73E45;
  --success: #15865C;
}

:root[data-theme="light"] .overlay { background: rgba(25, 37, 48, 0.42); }
:root[data-theme="light"] .btn { color: #FFFFFF; }
:root[data-theme="light"] .btn--ghost { color: var(--text); }
:root[data-theme="light"] .mode-btn--active { color: #075E59; }
:root[data-theme="light"] .pane__body--canvas,
:root[data-theme="light"] .overlay__body .rel-svg-full {
  background-color: var(--bg);
}

* { box-sizing: border-box; }

/* O atributo hidden precisa vencer qualquer display definido em classes
   (ex.: .overlay { display: flex } anularia o hidden sem esta regra). */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
}

button, input { font-family: inherit; }

.mode-switch {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-left: 12px;
}
.mode-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 7px 14px;
  font-size: 12.5px;
  cursor: pointer;
}
.mode-btn--active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Modo "SQL + Dados": esconde o designer, SQL em cima e preview embaixo ---------- */

.workspace.mode-sql { grid-template-columns: 280px 1fr; }
.workspace.mode-sql .pane--canvas { display: none; }
.workspace.mode-sql .pane--output { border-right: none; }
.workspace.mode-sql .tabs { display: none; }
.workspace.mode-sql .tab-panel[data-panel="sql"] {
  flex: 1 1 55%;
  min-height: 0;
  border-bottom: 2px solid var(--border);
}
.workspace.mode-sql .tab-panel[data-panel="preview"] {
  flex: 1 1 45%;
  min-height: 0;
}
.workspace.mode-sql .sql-output { font-size: 13.5px; }

/* ---------- Marcar/desmarcar todos os campos de uma tabela ---------- */

.col-bulk {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 4px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.col-bulk button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 10.5px;
  padding: 0;
}
.col-bulk button:hover { text-decoration: underline; }

/* ---------- Topbar ---------- */

.topbar {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: block;
  object-fit: contain;
}
.brand-logo--login {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}
.brand-mark {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 14px; letter-spacing: 0.2px; }
.brand-text small { color: var(--text-muted); font-size: 11px; }

.theme-toggle {
  margin-left: auto;
  white-space: nowrap;
}

.conn-status {
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.dot--off { background: var(--danger); }
.dot--on { background: var(--success); }

.btn {
  background: var(--accent);
  color: #06201D;
  border: none;
  border-radius: var(--radius);
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--sm { padding: 6px 10px; font-size: 12px; }
.btn--icon {
  width: 32px;
  min-width: 32px;
  height: 30px;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* ---------- Painel de conexão ---------- */

.conn-panel {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 16px;
}
.conn-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 900px;
}
.conn-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.conn-panel label.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
}
.conn-panel input[type="text"],
.conn-panel input:not([type="checkbox"]),
.conn-panel select {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px;
  font-size: 13px;
}
.conn-panel__dialect-fields {
  grid-column: 1 / -1;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.conn-panel__actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.msg { font-size: 12px; color: var(--text-muted); }
.msg--err { color: var(--danger); }
.msg--ok { color: var(--success); }


.default-limit-fieldset {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.default-limit-fieldset legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 12px;
}
.conn-panel .default-limit-fieldset label.checkbox { margin-top: 0; }

/* ---------- Workspace (3 colunas) ---------- */

.workspace {
  display: grid;
  grid-template-columns: 260px 1fr 460px;
  height: calc(100vh - 52px);
}

.pane {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.pane--output { border-right: none; }

.pane__head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pane__head h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0;
}
.pane__actions { display: flex; gap: 6px; }
.pane__body { flex: 1; overflow: auto; padding: 8px; }

.filter {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-size: 12px;
  width: 110px;
}

/* ---------- Lista de tabelas ---------- */

.table-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.table-item:hover { background: var(--panel-alt); }
.table-item.is-selected { background: var(--panel-alt); color: var(--accent); }
.table-item .schema { color: var(--text-muted); }

.column-list { margin-left: 22px; }
.column-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  border-radius: 4px;
}
.column-item:hover { background: var(--panel-alt); color: var(--text); }
.column-item.is-selected { color: var(--accent); }
.pk-badge {
  font-size: 9px;
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 3px;
  padding: 0 3px;
}

/* ---------- Canvas de relacionamentos ---------- */

.pane--canvas { flex: 1; }
.pane__body--canvas {
  position: relative;
  overflow: auto;
  background:
    radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0/16px 16px;
  min-height: 260px;
  scrollbar-gutter: stable;
}
.rel-svg { min-width: 100%; min-height: 100%; display: block; transform-origin: 0 0; }
.design-zoom-controls { display: inline-flex; align-items: center; gap: 2px; }
.design-zoom-value { min-width: 54px; font-family: var(--font-mono); }


.empty-hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-muted);
  font-size: 12.5px;
  pointer-events: none;
}

.rel-node rect {
  fill: var(--panel-alt);
  stroke: var(--border);
  rx: 8;
}
.rel-node text {
  fill: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}
.rel-node .table-title { font-weight: 700; fill: var(--text); }

.rel-edge { stroke: var(--accent); stroke-width: 1.6; fill: none; cursor: pointer; }
.rel-edge--heuristica-nome { stroke: var(--amber); stroke-dasharray: 4 3; }
.rel-edge--heuristica-nome-fraca { stroke: var(--amber); stroke-dasharray: 2 4; opacity: 0.6; }
.rel-edge--fk { stroke: var(--accent); }
.rel-edge--manual { stroke: var(--success); }
.rel-edge:hover { stroke: var(--danger); }
.rel-edge-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--text-muted);
}

.structure-panel {
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  max-height: 220px;
  display: flex;
  flex-direction: column;
}
.structure-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
}
.structure-panel__head strong { color: var(--accent); }
.structure-table-wrap { overflow: auto; }
table.structure-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
}
table.structure-table th, table.structure-table td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: left;
}
table.structure-table th { background: var(--panel-alt); color: var(--accent); }

.preview-sql-details {
  border-bottom: 1px solid var(--border);
  padding: 6px 12px;
}
.preview-sql-details summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--text-muted);
}
.sql-output--small {
  max-height: 140px;
  font-size: 11px;
  padding: 8px;
  margin-top: 6px;
}

.rel-list-drawer {
  border-top: 1px solid var(--border);
  padding: 8px 14px;
  max-height: 150px;
  overflow: auto;
}
.rel-list-drawer h3 {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rel-list { display: flex; flex-direction: column; gap: 6px; }
.rel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.rel-row .rel-expr { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-row .rel-expr .muted-part { color: var(--text-muted); }
.rel-row select {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--accent);
  border-radius: 4px;
  padding: 3px 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.rel-row .conf-dot { font-size: 10px; }
.rel-row .conf-dot--alta { color: var(--accent); }
.rel-row .conf-dot--media { color: var(--amber); }
.rel-row .conf-dot--manual { color: var(--success); }
.rel-row button.rm {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 13px;
}

.fields-drawer {
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  max-height: 130px;
  overflow: auto;
}
.fields-drawer h3 {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.count-badge {
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 10px;
  padding: 0 7px;
  font-size: 10.5px;
}
.fields-drawer__list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chip { cursor: grab; user-select: none; }
.chip:active { cursor: grabbing; }
.chip.is-dragging { opacity: .45; }
.chip.is-drop-target { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip::before { content: "⋮⋮"; color: var(--text-muted); font-size: 10px; letter-spacing: -2px; }
.chip button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; }

/* ---------- Output (SQL / preview / configs) ---------- */

.tabs { display: flex; border-bottom: 1px solid var(--border); }
.tab {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 10px 14px;
  font-size: 12.5px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab--active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.sql-toolbar, .preview-toolbar, .configs-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.sql-toolbar label {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.sql-toolbar input[type="number"] {
  width: 64px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 6px;
}
.where-editor-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: stretch;
  flex: 1 1 520px;
  min-width: 320px;
  gap: 6px;
}
.where-input {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  max-height: 150px;
  resize: vertical;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 7px 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
}
.where-history-toggle { white-space: nowrap; }
.where-history-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  width: min(620px, 92vw);
  max-height: 330px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 14px 35px rgba(0,0,0,.35);
}
.where-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
}
.where-history-list { max-height: 278px; overflow: auto; }
.where-history-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
}
.where-history-item:last-child { border-bottom: 0; }
.where-history-use {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.where-history-use:hover { color: var(--accent); }
.where-history-remove {
  border: 0;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
}
.where-history-empty { padding: 18px 12px; color: var(--text-muted); font-size: 11px; text-align:center; }

.sql-editor-shell {
  position: relative;
  flex: 1;
  min-height: 140px;
  overflow: hidden;
  background: var(--bg);
}
.sql-highlight,
.sql-editor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 14px;
  border: 0;
  outline: none;
  overflow: auto;
  white-space: pre;
  tab-size: 2;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
}
.sql-highlight {
  z-index: 1;
  pointer-events: none;
  color: var(--text);
}
.sql-editor {
  z-index: 2;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  -webkit-text-fill-color: transparent;
}
.sql-editor::selection { background: rgba(79, 209, 197, 0.28); }
.sql-editor::placeholder { color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); opacity: 0.8; }
.sql-editor:focus { background: rgba(79, 209, 197, 0.018); }
.sql-token--keyword { color: #569CD6; font-weight: 600; }
.sql-token--string { color: #CE9178; }
.sql-token--number { color: #B5CEA8; }
.sql-token--comment { color: #6A9955; font-style: italic; }
.sql-token--identifier { color: #C586C0; }
.sql-token--name { color: #9CDCFE; }
.sql-token--operator { color: #D4D4D4; }
.sql-token--function { color: #DCDCAA; }
.sql-occurrence {
  background: rgba(242, 166, 90, 0.30);
  border-radius: 2px;
  box-shadow: inset 0 -1px 0 var(--amber);
}
:root[data-theme="light"] .sql-token--keyword { color: #0000FF; font-weight: 600; }
:root[data-theme="light"] .sql-token--string { color: #A31515; }
:root[data-theme="light"] .sql-token--number { color: #098658; }
:root[data-theme="light"] .sql-token--comment { color: #008000; }
:root[data-theme="light"] .sql-token--identifier { color: #AF00DB; }
:root[data-theme="light"] .sql-token--name { color: #795E26; }
:root[data-theme="light"] .sql-token--operator { color: #1F2328; }
:root[data-theme="light"] .sql-token--function { color: #0000FF; }

.sql-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  flex-wrap: wrap;
}
.sql-edited-badge {
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sql-edited-badge button {
  background: none;
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: 4px;
  font-size: 10.5px;
  padding: 1px 8px;
  cursor: pointer;
}
.sql-edited-badge button:hover { background: rgba(242, 166, 90, 0.12); }

.sql-output { font-family: var(--font-mono); }

.grid-wrap { flex: 1; overflow: auto; padding: 0 4px; }
table.data-grid {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
table.data-grid th, table.data-grid td {
  border: 1px solid var(--border);
  padding: 5px 8px;
  text-align: left;
  white-space: nowrap;
}
table.data-grid th {
  background: var(--panel-alt);
  position: sticky;
  top: 0;
  color: var(--accent);
}
table.data-grid tr:nth-child(even) td { background: rgba(255,255,255,0.02); }

.rel-row .rel-filter-input {
  width: 130px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.rel-row .rel-filter-input::placeholder { color: var(--text-muted); }

.cte-form {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cte-form__row { display: flex; gap: 8px; }
.cte-form__row input,
.cte-form textarea {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.cte-form__row input:first-child { flex: 0 0 200px; }
.cte-form__row input:last-child { flex: 1; }
.cte-form textarea { resize: vertical; font-size: 11.5px; line-height: 1.5; }
.cte-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cte-list { padding: 8px 12px; overflow: auto; }
.cte-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.cte-item__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cte-item__head strong { font-family: var(--font-mono); font-size: 12.5px; }
.cte-item__head .config-actions { margin-left: auto; }
.cte-item pre {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: pre-wrap;
  max-height: 90px;
  overflow: auto;
}

.configs-toolbar input {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 6px 8px;
  flex: 1;
}
.configs-list { padding: 8px 12px; overflow: auto; }
.config-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
}
.config-item strong { font-size: 12.5px; }
.config-item small { color: var(--text-muted); display: block; font-size: 10.5px; }
.config-actions { display: flex; gap: 6px; }

.muted { color: var(--text-muted); font-size: 12px; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 11, 0.82);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.overlay__box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.overlay__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.overlay__head strong { color: var(--accent); font-size: 14px; }
.overlay__actions { margin-left: auto; display: flex; gap: 8px; }
.overlay__body {
  flex: 1;
  overflow: auto;
  position: relative;
}
.overlay__body .sql-output {
  font-size: 14px;
  line-height: 1.7;
  padding: 20px 24px;
}
.overlay__body .rel-svg-full {
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: block;
  background:
    radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0/16px 16px;
}
.overlay__body .rel-legend {
  position: absolute;
  bottom: 14px;
  left: 16px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rel-legend span { display: flex; align-items: center; gap: 8px; }
.rel-legend .swatch {
  display: inline-block;
  width: 26px;
  height: 0;
  border-top: 2px solid var(--accent);
}
.rel-legend .swatch--dashed { border-top-style: dashed; border-top-color: var(--amber); }
.rel-legend .swatch--manual { border-top-color: var(--success); }

.toast {
  position: fixed;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 12.5px;
  z-index: 50;
}
.toast--err { border-color: var(--danger); color: var(--danger); }
.toast--ok { border-color: var(--success); color: var(--success); }

/* ---------- Estrutura separada: Design / Consulta SQL ---------- */

.workspace {
  grid-template-columns: 280px minmax(0, 1fr);
}

.pane--ctes,
.pane--output {
  display: none;
}

.workspace.mode-sql {
  --cte-pane-width: 340px;
  --sql-panel-percent: 56%;
  grid-template-columns: var(--cte-pane-width) minmax(0, 1fr);
}

.workspace.mode-sql .pane--tables,
.workspace.mode-sql .pane--canvas {
  display: none;
}

.workspace.mode-sql .pane--ctes,
.workspace.mode-sql .pane--output {
  display: flex;
}

.workspace.mode-sql .pane--ctes {
  border-right: 1px solid var(--border);
}

.workspace.mode-sql .pane--output {
  border-right: none;
}

.query-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.query-section--sql {
  flex: 0 0 var(--sql-panel-percent);
  border-bottom: 0;
}

.query-section--preview {
  flex: 1 1 auto;
}

.section-title {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 700;
}

.sql-toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11.5px;
}

.sql-toolbar select,
.saved-connection-bar select {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 6px 8px;
}

.sql-editor-shell { flex: 1; min-height: 140px; }

.grid-wrap {
  flex: 1;
  min-height: 0;
}

/* ---------- Configurações do Design ---------- */

.configs-drawer {
  border-top: 1px solid var(--border);
  padding: 8px 14px;
  max-height: 210px;
  overflow: auto;
}

.drawer-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.drawer-title-row h3 {
  margin: 0;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  white-space: nowrap;
}

.configs-toolbar {
  display: flex;
  gap: 8px;
  flex: 1;
  max-width: 620px;
}

.configs-list {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
}

.config-item {
  margin-bottom: 0;
}

/* ---------- Conexões salvas ---------- */

.saved-connection-bar {
  display: flex;
  align-items: end;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.saved-connection-bar label {
  min-width: 300px;
}

.saved-connection-bar .muted {
  margin-left: 6px;
  padding-bottom: 7px;
}

.save-connection-check {
  color: var(--text-muted);
  font-size: 12px;
}

.conn-panel__actions .msg {
  margin-left: auto;
}

/* ---------- CTEs persistentes na Consulta SQL ---------- */

.pane--ctes .cte-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.pane--ctes .cte-form input,
.pane--ctes .cte-form textarea {
  width: 100%;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.pane--ctes .cte-form textarea {
  resize: vertical;
  min-height: 150px;
}

.pane--ctes .cte-list {
  flex: 1;
  min-height: 0;
}

.cte-item pre {
  max-height: 130px;
}

@media (max-width: 1000px) {
  .workspace.mode-sql { grid-template-columns: 300px minmax(0, 1fr); }
  .sql-toolbar { align-items: stretch; }
  .saved-connection-bar { flex-wrap: wrap; align-items: center; }
  .saved-connection-bar .muted { width: 100%; }
  .drawer-title-row { align-items: stretch; flex-direction: column; }
  .configs-toolbar { max-width: none; }
}

/* ---------- Edição dos campos dos relacionamentos ---------- */

.rel-row .rel-endpoints {
  flex: 1 1 480px;
  min-width: 280px;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 7px;
}

.rel-row .rel-field-select {
  width: 100%;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.rel-row .rel-field-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

.rel-row .rel-field-select optgroup {
  color: var(--text-muted);
  font-style: normal;
}

.rel-row .rel-field-select option {
  color: var(--text);
}

.rel-row .rel-equals {
  color: var(--text-muted);
  text-align: center;
  font-weight: 700;
}

.rel-row .rel-join-select {
  flex: 0 0 auto;
}

@media (max-width: 1050px) {
  .rel-row {
    flex-wrap: wrap;
  }

  .rel-row .rel-endpoints {
    flex-basis: calc(100% - 28px);
  }

  .rel-row .rel-filter-input {
    flex: 1 1 220px;
  }
}

/* ---------- Múltiplas telas de Consulta SQL ---------- */

.query-tabs-bar {
  flex: 0 0 auto;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.query-tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.query-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 120px;
  max-width: 240px;
  height: 29px;
  padding: 0 7px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.query-tab:hover {
  color: var(--text);
  border-color: var(--accent-dim);
}

.query-tab.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(79, 209, 197, .08);
}

.query-tab__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.query-tab__dirty {
  color: var(--amber);
  font-size: 10px;
}

.query-tab__close {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.query-tab__close:hover {
  color: var(--danger);
  background: rgba(242, 85, 90, .1);
}

.open-table-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.2;
  padding: 3px 7px;
  cursor: pointer;
  white-space: nowrap;
}

.open-table-btn:hover {
  border-color: var(--accent);
  background: rgba(79, 209, 197, .08);
}

@media (max-width: 760px) {
  .query-tabs-bar { align-items: stretch; }
  .query-tab { min-width: 105px; }
}

/* ---------- Relacionamento manual em branco ---------- */
.rel-list-drawer {
  max-height: 220px;
}

.rel-row--incomplete {
  border-style: dashed;
  border-color: var(--amber);
  background: color-mix(in srgb, var(--panel-alt) 88%, var(--amber) 12%);
}

.rel-row .rel-on-label {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}

.rel-row .rel-filter-input {
  width: 190px;
  min-width: 150px;
}

.rel-row--incomplete .rel-field-select {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--border));
}

@media (max-width: 1180px) {
  .rel-row {
    flex-wrap: wrap;
  }
  .rel-row .rel-endpoints {
    order: 5;
    flex-basis: calc(100% - 32px);
  }
  .rel-row .rel-filter-input {
    order: 6;
    flex: 1 1 260px;
  }
}

/* ---------- Ajustes v4: campos recolhíveis e construtor de ON ---------- */

.column-list.is-collapsed {
  margin-bottom: 2px;
}

.col-bulk {
  flex-wrap: wrap;
}

.rel-list-drawer {
  max-height: 330px;
}

.rel-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rel-condition-list {
  margin-left: 30px;
  padding: 4px 6px 2px 10px;
  border-left: 2px solid var(--accent-dim);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rel-condition-row {
  display: grid;
  grid-template-columns: 58px minmax(180px, 1fr) 90px 72px minmax(160px, 1fr) 24px;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.rel-condition-row select,
.rel-condition-row input {
  width: 100%;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.rel-condition-row select:focus,
.rel-condition-row input:focus {
  outline: none;
  border-color: var(--accent);
}

.rel-condition-connector,
.rel-condition-operator {
  color: var(--accent) !important;
}

.rel-condition-type,
.rel-condition-empty {
  color: var(--text-muted);
  text-align: center;
}

.rel-condition-row .rm {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 13px;
}

.rel-add-condition {
  white-space: nowrap;
}

.preview-toolbar {
  justify-content: space-between;
}

.preview-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

@media (max-width: 1250px) {
  .rel-condition-row {
    grid-template-columns: 58px minmax(150px, 1fr) 86px 70px minmax(140px, 1fr) 24px;
  }
}

@media (max-width: 900px) {
  .rel-condition-row {
    grid-template-columns: 58px minmax(160px, 1fr) 90px;
  }
  .rel-condition-row > *:nth-child(n+4) {
    grid-column: auto;
  }
  .rel-condition-list {
    margin-left: 8px;
  }
}


/* ---------- Ajustes v5: redimensionamento e seções recolhíveis ---------- */

.workspace {
  --tables-pane-width: 280px;
  --workspace-resizer-width: 7px;
  grid-template-columns: var(--tables-pane-width) var(--workspace-resizer-width) minmax(0, 1fr);
}

.workspace-resizer {
  position: relative;
  width: var(--workspace-resizer-width);
  min-width: var(--workspace-resizer-width);
  cursor: col-resize;
  background: transparent;
  border-right: 1px solid var(--border);
  z-index: 8;
  touch-action: none;
  user-select: none;
}

.workspace-resizer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  background: transparent;
  transition: background .15s ease, box-shadow .15s ease;
}

.workspace-resizer:hover::before,
.workspace-resizer:focus-visible::before,
.workspace.is-resizing .workspace-resizer::before {
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

.workspace.is-resizing,
.workspace.is-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.workspace.mode-sql {
  --cte-pane-width: 340px;
  --sql-panel-percent: 56%;
  grid-template-columns: var(--cte-pane-width) minmax(0, 1fr);
}

.workspace.mode-sql .workspace-resizer {
  display: none;
}

.collapsible-drawer {
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
}

.drawer-toggle {
  width: 100%;
  min-height: 34px;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}

.drawer-toggle:hover {
  background: rgba(255,255,255,.025);
  color: var(--text);
}

.drawer-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -2px;
}

.drawer-toggle__icon {
  width: 12px;
  color: var(--accent);
  font-size: 12px;
  transition: transform .15s ease;
}

.drawer-toggle__title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.drawer-toggle__hint {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: .65;
}

.drawer-content {
  overflow: auto;
  padding: 0 14px 8px;
}

.rel-list-drawer .drawer-content { max-height: 296px; }
.fields-drawer .drawer-content { max-height: 96px; }
.configs-drawer .drawer-content { max-height: 176px; }

.collapsible-drawer.is-collapsed .drawer-content {
  display: none;
}

.collapsible-drawer.is-collapsed .drawer-toggle__icon {
  transform: rotate(-90deg);
}

.collapsible-drawer.is-collapsed .drawer-toggle__hint::before {
  content: 'expandir';
}

.collapsible-drawer.is-collapsed .drawer-toggle__hint {
  font-size: 0;
}

.collapsible-drawer.is-collapsed .drawer-toggle__hint::before {
  font-size: 10px;
}

.rel-list-drawer h3,
.fields-drawer h3 {
  display: none;
}

.configs-drawer .drawer-title-row {
  margin-bottom: 8px;
}

@media (max-width: 760px) {
  .workspace-resizer { display: none; }
  .workspace { grid-template-columns: 250px minmax(0, 1fr); }
}


/* ---------- Consulta SQL: CTE recolhível, divisor e ordenação ---------- */
.workspace.mode-sql.ctes-collapsed { --cte-pane-width: 44px; }
.workspace.mode-sql.ctes-collapsed .pane--ctes { overflow: hidden; }
.workspace.mode-sql.ctes-collapsed .pane--ctes .cte-form,
.workspace.mode-sql.ctes-collapsed .pane--ctes .cte-list,
.workspace.mode-sql.ctes-collapsed .pane--ctes h2 { display: none; }
.workspace.mode-sql.ctes-collapsed .cte-pane-head { justify-content: center; padding-inline: 4px; }
.cte-collapse-btn { flex: 0 0 auto; }
.sql-preview-resizer {
  flex: 0 0 8px;
  position: relative;
  cursor: row-resize;
  background: var(--panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  touch-action: none;
}
.sql-preview-resizer:hover,
.workspace.is-resizing-query .sql-preview-resizer { background: rgba(79, 209, 197, .12); }
.sql-preview-resizer span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 2px; border-radius: 2px; background: var(--text-muted); opacity: .55;
}
.data-grid th { cursor: pointer; user-select: none; white-space: nowrap; }
.data-grid th:hover { background: rgba(79, 209, 197, .08); color: var(--accent); }
.data-grid .sort-indicator { display: inline-block; min-width: 12px; margin-left: 5px; color: var(--accent); font-size: 10px; }

/* ---------- Ajustes v7: painel de tabelas, retirada do Design, posições e múltiplos resultados ---------- */
.workspace.tables-collapsed:not(.mode-sql) {
  --tables-pane-width: 44px;
}
.workspace.tables-collapsed:not(.mode-sql) .pane--tables {
  overflow: hidden;
}
.workspace.tables-collapsed:not(.mode-sql) .pane--tables .pane__head {
  justify-content: center;
  padding-inline: 4px;
}
.workspace.tables-collapsed:not(.mode-sql) .pane--tables h2,
.workspace.tables-collapsed:not(.mode-sql) .pane--tables .filter,
.workspace.tables-collapsed:not(.mode-sql) .pane--tables .pane__body {
  display: none;
}
.workspace.tables-collapsed:not(.mode-sql) .pane--tables .pane__actions {
  margin: 0;
}
.workspace.tables-collapsed:not(.mode-sql) .workspace-resizer {
  cursor: default;
}
#btnToggleTables { flex: 0 0 auto; }
.table-item { flex-wrap: nowrap; }
.remove-design-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--border));
  color: var(--danger);
  border-radius: 4px;
  font-size: 9.5px;
  line-height: 1.2;
  padding: 3px 6px;
  cursor: pointer;
  white-space: nowrap;
}
.remove-design-btn:hover { background: rgba(242, 85, 90, .1); border-color: var(--danger); }
.rel-node .table-title { cursor: move; user-select: none; }
.rel-node .table-title:active { cursor: grabbing; }
.grid-wrap { display: block; }
.result-set {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 8px 4px 14px;
  overflow: hidden;
  background: rgba(255,255,255,.008);
}
.result-set__head {
  min-height: 34px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-alt);
  font-family: var(--font-mono);
  font-size: 11px;
}
.result-set__head strong { color: var(--accent); }
.result-set__head span { color: var(--text-muted); }
.result-set__sql { border-bottom: 1px solid var(--border); }
.result-set__sql summary { padding: 6px 10px; cursor: pointer; color: var(--text-muted); font-size: 10.5px; }
.result-set__sql pre { margin: 0; padding: 8px 10px; overflow: auto; max-height: 130px; color: var(--text-muted); font-size: 10.5px; }
.result-set__table-wrap { overflow: auto; max-height: 420px; }
.result-set__table-wrap table.data-grid { min-width: 100%; }
.result-set__empty { padding: 12px; margin: 0; }


/* ---------- Ajustes v8: recolhimento real, remoção no nó e resultados em guias ---------- */
.workspace.tables-collapsed:not(.mode-sql) {
  grid-template-columns: 44px var(--workspace-resizer-width) minmax(0, 1fr) !important;
}
.workspace.tables-collapsed:not(.mode-sql) .workspace-resizer {
  cursor: col-resize;
}
.workspace.tables-collapsed:not(.mode-sql) .workspace-resizer:hover::before {
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}
.remove-design-btn { display: none !important; }
.rel-node .node-remove-hit {
  fill: transparent;
  stroke: transparent;
  cursor: pointer;
}
.rel-node .node-remove-text {
  fill: var(--text-muted);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.rel-node .node-remove-hit:hover,
.rel-node .node-remove-hit:hover + .node-remove-text {
  fill: rgba(242, 85, 90, .14);
}
.rel-node .node-remove-text:hover { fill: var(--danger); }
.result-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 7px 8px 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex: 0 0 auto;
}
.result-tab {
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--panel-alt);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  cursor: pointer;
  white-space: nowrap;
}
.result-tab small { color: var(--text-muted); font-size: 9.5px; }
.result-tab:hover { color: var(--text); border-color: var(--accent-dim); }
.result-tab.is-active {
  color: var(--accent);
  background: var(--bg);
  border-color: var(--accent-dim);
}
.result-set--tabbed {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  height: calc(100% - 42px);
  display: flex;
  flex-direction: column;
}
.result-set--tabbed .result-set__table-wrap {
  max-height: none;
  flex: 1 1 auto;
}


/* ---------- Ajustes v9: execução fluida e paginação da grade ---------- */
.result-pager {
  min-height: 34px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.result-pager > div { display: flex; align-items: center; gap: 8px; }
button:disabled { opacity: .55; cursor: wait; }

@media (max-width: 900px) {
  .where-editor-wrap { flex-basis: 100%; min-width: 100%; }
}

/* ---------- Ajustes v12: barra compacta dos resultados ---------- */
.results-toolbar {
  min-height: 38px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  overflow: hidden;
}
.results-toolbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
.results-toolbar__right #previewInfo {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 430px;
}
.result-tabs--toolbar {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 0 0;
  border-bottom: 0;
  background: transparent;
  align-self: stretch;
}
.result-tabs--toolbar .result-tab {
  min-width: 108px;
  padding: 5px 9px;
}
.result-tabs--toolbar .result-tab small {
  padding-left: 5px;
}
.result-set--tabbed {
  height: 100%;
  border-top: 0;
  border-radius: 0;
}
.result-set--tabbed .result-set__head,
.result-set--tabbed .result-set__sql,
.preview-sql-details {
  display: none !important;
}
.query-section--preview .section-title {
  min-height: 28px;
  padding-top: 6px;
  padding-bottom: 6px;
}
@media (max-width: 900px) {
  .results-toolbar { flex-wrap: wrap; height: auto; padding-bottom: 5px; }
  .results-toolbar__right { width: 100%; justify-content: flex-end; }
  .results-toolbar__right #previewInfo { max-width: none; margin-right: auto; }
}

/* Múltiplas instâncias da mesma tabela */
.instance-count { margin-left: 4px; color: var(--accent); font-size: 10px; }
.table-instance-head { display:flex; align-items:center; gap:6px; padding:5px 8px 3px 28px; color:var(--text-muted); font-size:10px; }
.table-instance-head input { min-width:0; flex:1; height:24px; padding:2px 6px; border:1px solid var(--border); border-radius:4px; background:var(--panel-2); color:var(--accent); font:inherit; }
.table-instance-head button { border:0; background:transparent; color:var(--danger,#ff5c72); cursor:pointer; font-size:15px; }
.add-instance-btn { color:var(--accent)!important; }

/* Modo de SQL em tela cheia: usa a própria página, sem modal. */
.sql-fullscreen-bar {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex: 0 0 auto;
}
.sql-fullscreen-bar:not([hidden]) { display: flex; }
.sql-fullscreen-bar strong { color: var(--accent); font-size: 13px; }
.sql-fullscreen-bar__actions { display: flex; align-items: center; gap: 8px; }

body.sql-fullscreen-mode {
  overflow: hidden;
  background: var(--bg);
}
body.sql-fullscreen-mode .topbar,
body.sql-fullscreen-mode .conn-panel,
body.sql-fullscreen-mode .pane--ctes,
body.sql-fullscreen-mode .query-tabs-bar,
body.sql-fullscreen-mode .query-section--sql > .section-title,
body.sql-fullscreen-mode .query-section--sql > .sql-toolbar,
body.sql-fullscreen-mode .query-section--sql > .sql-status,
body.sql-fullscreen-mode .query-section--sql > .structure-panel,
body.sql-fullscreen-mode .sql-preview-resizer,
body.sql-fullscreen-mode .query-section--preview {
  display: none !important;
}
body.sql-fullscreen-mode .workspace {
  display: block !important;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
body.sql-fullscreen-mode .pane--output {
  display: flex !important;
  flex-direction: column;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 0;
  border: 0;
}
body.sql-fullscreen-mode .query-section--sql {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100vh !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 0;
}
body.sql-fullscreen-mode .sql-editor-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  border: 0;
}
body.sql-fullscreen-mode .sql-highlight,
body.sql-fullscreen-mode .sql-editor {
  padding: 24px 28px;
  font-size: 14px;
  line-height: 1.7;
}
body.sql-fullscreen-mode .sql-fullscreen-bar { display: flex !important; }

@media (max-width: 700px) {
  .sql-fullscreen-bar { align-items: flex-start; }
  .sql-fullscreen-bar__actions { flex-wrap: wrap; justify-content: flex-end; }
  body.sql-fullscreen-mode .sql-highlight,
  body.sql-fullscreen-mode .sql-editor { padding: 16px; font-size: 13px; }
}

/* Ajustes v19: seleção precisa e tela cheia de SQL/Resultados/Design */
.sql-highlight,
.sql-editor {
  box-sizing: border-box;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  font-kerning: none;
  letter-spacing: 0;
  word-spacing: 0;
  text-rendering: geometricPrecision;
  overflow-wrap: normal;
  word-break: normal;
}
.sql-highlight {
  scrollbar-width: none;
}
.sql-highlight::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Em tela cheia, após executar, os resultados ocupam a própria página. */
body.sql-fullscreen-mode.sql-fullscreen-results .query-section--sql {
  display: none !important;
}
body.sql-fullscreen-mode.sql-fullscreen-results .query-section--preview {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: calc(100vh - 46px) !important;
  max-height: none !important;
  border: 0;
}
body.sql-fullscreen-mode.sql-fullscreen-results .pane--output {
  display: flex !important;
}
body.sql-fullscreen-mode.sql-fullscreen-results .sql-fullscreen-bar {
  display: flex !important;
}
body.sql-fullscreen-mode.sql-fullscreen-results .query-section--preview .section-title {
  display: none;
}
body.sql-fullscreen-mode.sql-fullscreen-results .results-toolbar {
  flex: 0 0 auto;
}
body.sql-fullscreen-mode.sql-fullscreen-results .grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: none !important;
  overflow: auto;
}
body.sql-fullscreen-mode.sql-fullscreen-results .result-set--tabbed,
body.sql-fullscreen-mode.sql-fullscreen-results .result-set__table-wrap {
  height: 100%;
  max-height: none;
}

.design-fullscreen-bar {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex: 0 0 auto;
}
.design-fullscreen-bar:not([hidden]) { display: flex; }
.design-fullscreen-bar strong { color: var(--accent); font-size: 13px; }
.design-fullscreen-bar__actions { display: flex; align-items: center; gap: 8px; }

/* Design em tela cheia na própria página, sem modal. */
body.design-fullscreen-mode {
  overflow: hidden;
  background: var(--bg);
}
body.design-fullscreen-mode .topbar,
body.design-fullscreen-mode .conn-panel,
body.design-fullscreen-mode .pane--tables,
body.design-fullscreen-mode .workspace-resizer,
body.design-fullscreen-mode .pane--ctes,
body.design-fullscreen-mode .pane--output,
body.design-fullscreen-mode .pane--canvas > .pane__head,
body.design-fullscreen-mode .pane--canvas > .collapsible-drawer {
  display: none !important;
}
body.design-fullscreen-mode .workspace {
  display: block !important;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
body.design-fullscreen-mode .pane--canvas {
  display: flex !important;
  flex-direction: column;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 0;
  border: 0;
}
body.design-fullscreen-mode .design-fullscreen-bar {
  display: flex !important;
}
body.design-fullscreen-mode .pane__body--canvas {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: none !important;
  border: 0;
}
body.design-fullscreen-mode #relSvg {
  width: 100%;
  height: 100%;
}
/* Mantém somente a barra superior do editor quando os resultados estão em tela cheia. */
body.sql-fullscreen-mode.sql-fullscreen-results .query-section--sql {
  display: flex !important;
  flex: 0 0 46px;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  overflow: hidden;
}
body.sql-fullscreen-mode.sql-fullscreen-results .query-section--sql > :not(.sql-fullscreen-bar) {
  display: none !important;
}
body.sql-fullscreen-mode.sql-fullscreen-results .query-section--preview {
  height: calc(100vh - 46px) !important;
}

/* v20: editor único contenteditable. Elimina o deslocamento causado pela sobreposição textarea/pre. */
.sql-editor-shell {
  overflow: auto;
}
.sql-editor.sql-editor--contenteditable {
  position: relative;
  inset: auto;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 140px;
  box-sizing: border-box;
  margin: 0;
  padding: 14px 14px 56px;
  border: 0;
  outline: none;
  overflow: auto;
  white-space: pre;
  tab-size: 2;
  resize: none;
  background: var(--bg);
  color: var(--text);
  caret-color: var(--text);
  -webkit-text-fill-color: currentColor;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  font-kerning: none;
  letter-spacing: 0;
  word-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
  scroll-padding-block: 14px 72px;
}
.sql-editor.sql-editor--contenteditable:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}
.sql-editor.sql-editor--contenteditable::selection,
.sql-editor.sql-editor--contenteditable *::selection {
  background: rgba(79, 209, 197, 0.30);
}
body.sql-fullscreen-mode .sql-editor-shell {
  overflow: hidden;
}
body.sql-fullscreen-mode .sql-editor.sql-editor--contenteditable {
  height: 100%;
  min-height: 0;
  padding: 24px 28px 110px;
  font-size: 14px;
  line-height: 1.7;
  scroll-padding-block: 24px 125px;
}
body.sql-fullscreen-mode .workspace,
body.sql-fullscreen-mode .pane--output,
body.sql-fullscreen-mode .query-section--sql {
  height: 100dvh !important;
  min-height: 100dvh !important;
}
@media (max-width: 700px) {
  body.sql-fullscreen-mode .sql-editor.sql-editor--contenteditable {
    padding: 16px 16px 96px;
    font-size: 13px;
  }
}

/* v21: autenticação simples e ações de sessão/conexão. */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}
.login-screen[hidden] { display: none !important; }
.login-card {
  width: min(390px, 100%);
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.login-brand > div { display: grid; }
.login-brand strong { font-size: 18px; }
.login-brand small { color: var(--text-muted); }
.login-card label { display: grid; gap: 7px; font-size: 12px; color: var(--text-muted); }
.login-card input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
}
.login-card input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-submit { width: 100%; justify-content: center; padding: 11px; }
.field-help { display:block; margin-top:4px; font-size:11px; color:var(--muted); }

/* ---------- Filtros avançados de tabelas e relacionamentos ---------- */
.table-filter-actions { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.relationship-filter-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.relationship-search {
  flex: 1;
  width: auto;
  min-width: 260px;
  font-family: var(--font-mono);
}
@media (max-width: 900px) {
  .relationship-search { min-width: 140px; }
}

.filter--database {
  min-width: 150px;
  max-width: 220px;
}

/* ---------- v25: seletores de campos pesquisáveis nos relacionamentos ---------- */
.rel-row .rel-field-slot,
.rel-condition-left-slot,
.rel-condition-right-field-slot {
  min-width: 0;
  width: 100%;
  display: block;
}

.rel-row .rel-field-search,
.rel-condition-row .rel-field-search {
  width: 100%;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.rel-row .rel-field-search:focus,
.rel-condition-row .rel-field-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

.rel-row--incomplete .rel-field-search {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--border));
}

.rel-condition-row .rel-condition-left-slot,
.rel-condition-row .rel-condition-right-field-slot {
  flex: 1 1 220px;
}

/* ---------- Ajustes v26: painel de resultados sempre visível ---------- */
.workspace.mode-sql .pane--output {
  min-height: 0;
  overflow: hidden;
}
.workspace.mode-sql .query-section--sql {
  min-height: 170px;
  max-height: calc(100% - 188px);
}
.workspace.mode-sql .query-section--preview {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  overflow: hidden;
}
.workspace.mode-sql .query-section--preview .grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.workspace.mode-sql .sql-preview-resizer {
  display: block;
  flex: 0 0 8px;
}

/* ---------- v28: CTEs no Design e edição pelo editor SQL principal ---------- */
.filter--view {
  width: 190px;
}

.table-item--cte {
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--border));
  margin-bottom: 3px;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
}

.source-badge--cte {
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.table-list-empty {
  padding: 12px 8px;
}

.cte-form__actions {
  flex-wrap: wrap;
}

.cte-form__buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}

@media (max-width: 900px) {
  .filter--view { width: 165px; }
}


/* ---------- v28.4: filtros simplificados, CTEs compactas e tema claro padrão ---------- */
.table-filter-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

.filter--view {
  min-width: 180px;
  max-width: 220px;
}

.pane--ctes .cte-form {
  gap: 8px;
}

.pane--ctes .cte-form__actions {
  justify-content: flex-end;
}

.pane--ctes .cte-form__buttons {
  width: 100%;
  justify-content: flex-end;
}

.cte-item__head {
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 6px;
}

.cte-item__head strong {
  flex: 1 1 90px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cte-item__head .config-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
  max-width: 100%;
}

.cte-item__head .open-table-btn,
.cte-action-btn {
  margin-left: 0;
  padding: 4px 7px;
  min-height: 27px;
  font-size: 10px;
}

.cte-action-btn--danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

.cte-action-btn--danger:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
}

@media (max-width: 1180px) {
  .table-filter-actions {
    flex-wrap: wrap;
  }
  .filter--view {
    width: 165px;
  }
}

@media (max-width: 420px) {
  .cte-item__head .config-actions {
    flex: 1 0 100%;
    justify-content: flex-start;
    padding-left: 24px;
  }
}

/* Query Builder 1.17.1 — campos avançados, agrupamento e views */
.brand-version {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .01em;
}

.source-badge--view {
  background: color-mix(in srgb, #2563eb 13%, transparent);
  border-color: color-mix(in srgb, #2563eb 35%, var(--border));
  color: #2563eb;
}

.table-item--view.is-selected {
  box-shadow: inset 3px 0 0 #2563eb;
}

.fields-drawer .drawer-content {
  max-height: 410px;
  overflow: auto;
}

.query-design-options {
  display: grid;
  grid-template-columns: max-content minmax(150px, 190px) minmax(260px, 1fr);
  gap: 10px;
  align-items: end;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-alt);
}

.query-design-options label {
  min-width: 0;
  font-size: 11px;
  color: var(--text-muted);
}

.query-design-options select,
.query-design-options input {
  width: 100%;
  min-height: 32px;
  margin-top: 4px;
}

.query-design-options .query-option-distinct {
  align-self: center;
  padding-top: 15px;
  color: var(--text);
  white-space: nowrap;
}

.fields-drawer__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 8px;
  align-items: start;
}

.selected-fields-empty {
  margin: 6px 2px;
}

.selected-field-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
  cursor: default;
}

.selected-field-card.is-dragging { opacity: .45; }
.selected-field-card.is-drop-target { outline: 2px solid var(--accent); outline-offset: 2px; }

.selected-field-card__head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 7px;
  background: var(--panel-alt);
  border-bottom: 1px solid var(--border);
}

.selected-field-card__head strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
}

.field-drag {
  color: var(--text-muted);
  cursor: grab;
  user-select: none;
  letter-spacing: -2px;
}

.selected-field-card__actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.selected-field-card__grid,
.field-advanced__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(125px, 1fr));
  gap: 7px;
  padding: 8px;
}

.selected-field-card__grid label,
.field-advanced__grid label {
  min-width: 0;
  color: var(--text-muted);
  font-size: 10px;
}

.selected-field-card__grid input,
.selected-field-card__grid select,
.field-advanced__grid input,
.field-advanced__grid select,
.field-advanced__grid textarea {
  width: 100%;
  min-height: 30px;
  margin-top: 3px;
  font-size: 11px;
}

.selected-field-card__grid .checkbox,
.field-advanced__grid .checkbox {
  display: flex;
  align-items: center;
  align-self: end;
  gap: 5px;
  min-height: 30px;
  color: var(--text);
}

.selected-field-card__grid .checkbox input,
.field-advanced__grid .checkbox input {
  width: auto;
  min-height: auto;
  margin: 0;
}

.field-advanced {
  border-top: 1px dashed var(--border);
}

.field-advanced summary {
  padding: 6px 9px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 10px;
  user-select: none;
}

.field-advanced__grid {
  padding-top: 2px;
}

.field-custom-wrap {
  grid-column: span 3;
}

.field-window-frame-custom {
  grid-column: span 2;
}

@media (max-width: 1250px) {
  .query-design-options { grid-template-columns: 1fr 1fr; }
  .query-option-having { grid-column: 1 / -1; }
  .fields-drawer__list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .query-design-options,
  .selected-field-card__grid,
  .field-advanced__grid { grid-template-columns: 1fr; }
  .query-option-having,
  .field-custom-wrap,
  .field-window-frame-custom { grid-column: auto; }
}
.btn--xs {
  padding: 3px 6px;
  min-height: 24px;
  font-size: 10px;
}

/* Query Builder 1.17.2 — lista e configuração separadas dos campos */
.relationship-filter-toolbar {
  flex-wrap: wrap;
}

.relationship-add-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.drawer-current-item {
  min-width: 0;
  max-width: 55vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.fields-drawer .drawer-content {
  max-height: 360px;
}

.fields-drawer__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: stretch;
}

.selected-fields-list-header,
.selected-field-row {
  display: grid;
  grid-template-columns: 64px minmax(260px, 1fr) minmax(150px, 260px) auto;
  gap: 8px;
  align-items: center;
}

.selected-fields-list-header {
  padding: 3px 8px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.selected-field-row {
  min-width: 0;
  min-height: 42px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.selected-field-row:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}

.selected-field-row.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  box-shadow: inset 3px 0 0 var(--accent);
}

.selected-field-row.is-dragging { opacity: .45; }
.selected-field-row.is-drop-target { outline: 2px solid var(--accent); outline-offset: 1px; }

.selected-field-order {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.selected-field-order strong {
  min-width: 22px;
  color: var(--text);
  font-size: 11px;
  text-align: right;
}

.selected-field-main {
  min-width: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.selected-field-main strong,
.selected-field-main span,
.selected-field-config-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-field-main strong {
  font-family: var(--font-mono);
  font-size: 11px;
}

.selected-field-main span,
.selected-field-config-summary {
  color: var(--text-muted);
  font-size: 10px;
}

.selected-field-row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.field-config-drawer .drawer-content {
  max-height: 480px;
  padding-bottom: 10px;
}

.field-config-panel {
  min-height: 76px;
}

.field-config-empty {
  margin: 8px 2px;
}

.field-config-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.field-config-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-alt);
}

.field-config-card__head > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.field-config-card__head small {
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.field-config-card__head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
}

.field-config-card__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.field-config-card__grid,
.field-config-card .field-advanced__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 9px;
  padding: 10px;
}

.field-config-card__grid label,
.field-config-card .field-advanced__grid label {
  min-width: 0;
  color: var(--text-muted);
  font-size: 10px;
}

.field-config-card__grid input,
.field-config-card__grid select,
.field-config-card .field-advanced__grid input,
.field-config-card .field-advanced__grid select,
.field-config-card .field-advanced__grid textarea {
  width: 100%;
  min-height: 32px;
  margin-top: 3px;
  font-size: 11px;
}

.field-config-card__grid .checkbox,
.field-config-card .field-advanced__grid .checkbox {
  display: flex;
  align-items: center;
  align-self: end;
  gap: 6px;
  min-height: 32px;
  color: var(--text);
}

.field-config-card__grid .checkbox input,
.field-config-card .field-advanced__grid .checkbox input {
  width: auto;
  min-height: auto;
  margin: 0;
}

@media (max-width: 1150px) {
  .selected-fields-list-header,
  .selected-field-row {
    grid-template-columns: 56px minmax(220px, 1fr) auto;
  }
  .selected-fields-list-header > :nth-child(3),
  .selected-field-config-summary {
    display: none;
  }
  .field-config-card__grid,
  .field-config-card .field-advanced__grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 760px) {
  .selected-fields-list-header { display: none; }
  .selected-field-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .selected-field-row__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 48px;
  }
  .field-config-card__grid,
  .field-config-card .field-advanced__grid {
    grid-template-columns: 1fr;
  }
  .field-config-card__head {
    align-items: flex-start;
  }
}

@media (max-width: 1150px) {
  .field-config-card .field-custom-wrap,
  .field-config-card .field-window-frame-custom {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .field-config-card .field-custom-wrap,
  .field-config-card .field-window-frame-custom {
    grid-column: auto;
  }
}

/* ---------- Ajustes v29.3: campos compactos e configuração ampliada ---------- */
.fields-drawer .drawer-content {
  max-height: 250px;
  padding-bottom: 10px;
}

.fields-drawer__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 36px;
}

.selected-field-chip {
  min-width: 0;
  max-width: 360px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.selected-field-chip:hover,
.selected-field-chip:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  outline: none;
}

.selected-field-chip.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  box-shadow: inset 3px 0 0 var(--accent);
}

.selected-field-chip.is-dragging { opacity: .45; }
.selected-field-chip.is-drop-target { outline: 2px solid var(--accent); outline-offset: 1px; }

.selected-field-chip .field-drag {
  flex: 0 0 auto;
  padding: 2px 1px;
  color: var(--text-muted);
  cursor: grab;
  line-height: 1;
}

.selected-field-chip .field-drag:active { cursor: grabbing; }

.selected-field-chip__order {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--panel-alt);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
}

.selected-field-chip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.field-config-drawer .drawer-content {
  max-height: min(68vh, 720px);
  padding-bottom: 14px;
}

.field-config-panel {
  min-height: 150px;
}

.field-config-card__grid,
.field-config-card .field-advanced__grid {
  gap: 11px;
  padding: 12px;
}

@media (min-width: 1500px) {
  .field-config-card__grid,
  .field-config-card .field-advanced__grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
  }

  .field-config-card .field-custom-wrap,
  .field-config-card .field-window-frame-custom {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .selected-field-chip {
    max-width: 100%;
    flex: 1 1 220px;
  }
}

/* ---------- Ajustes v29.4: todos os campos visíveis e área de detalhes rolável ---------- */
.pane--canvas {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.pane--canvas > .pane__head,
.pane--canvas > .design-fullscreen-bar {
  flex: 0 0 auto;
}

.pane--canvas > .pane__body--canvas {
  flex: 0 0 clamp(330px, 52vh, 680px);
}

.fields-drawer .drawer-content {
  max-height: none;
  overflow: visible;
  padding-bottom: 10px;
}

.fields-drawer__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 6px;
  align-items: stretch;
  min-height: 36px;
}

.selected-field-chip {
  width: 100%;
  max-width: none;
  min-height: 31px;
}

.selected-field-chip strong {
  display: block;
  width: 100%;
}

.query-design-options {
  margin-bottom: 7px;
}

.field-config-drawer .drawer-content {
  max-height: none;
  overflow: visible;
}

@media (min-width: 1500px) {
  .fields-drawer__list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 900px) {
  .pane--canvas > .pane__body--canvas {
    flex-basis: 390px;
  }

  .fields-drawer__list {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
}

body.design-fullscreen-mode .pane--canvas {
  overflow: hidden;
}

body.design-fullscreen-mode .pane--canvas > .pane__body--canvas {
  flex: 1 1 auto;
}

/* ---------- Ajustes v29.5: formatador SQL e drawers recolhidos ---------- */
.sql-format-button {
  min-width: 36px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -.04em;
}

.pane--canvas.all-design-drawers-collapsed {
  overflow: hidden;
}

.pane--canvas.all-design-drawers-collapsed > .pane__body--canvas {
  flex: 1 1 0;
  min-height: 260px;
}

.pane--canvas.all-design-drawers-collapsed > .collapsible-drawer {
  flex: 0 0 auto;
}


/* ---------- Ajustes v29.6: tema, autocomplete SQL e agrupamento separado ---------- */
:root:not([data-theme="light"]) .topbar,
:root:not([data-theme="light"]) .pane__head,
:root:not([data-theme="light"]) .drawer-toggle,
:root:not([data-theme="light"]) .section-title,
:root:not([data-theme="light"]) .query-tabs-bar {
  background: #202C38;
}

:root:not([data-theme="light"]) .pane__body--canvas,
:root:not([data-theme="light"]) .overlay__body .rel-svg-full,
:root:not([data-theme="light"]) .sql-editor.sql-editor--contenteditable {
  background-color: #17222D;
}

:root:not([data-theme="light"]) .table-card,
:root:not([data-theme="light"]) .rel-card,
:root:not([data-theme="light"]) .field-config-card,
:root:not([data-theme="light"]) .selected-field-chip,
:root:not([data-theme="light"]) .config-item,
:root:not([data-theme="light"]) .cte-item {
  box-shadow: 0 2px 9px rgba(0, 0, 0, .18);
}

.selected-fields-toolbar {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 2px 8px;
}

.selected-fields-help {
  font-size: 10.5px;
}

.query-grouping-options {
  display: grid;
  grid-template-columns: minmax(190px, 280px) minmax(320px, 1fr);
  gap: 10px 12px;
  align-items: end;
  padding: 7px 2px 10px;
}

.query-grouping-options label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10.5px;
}

.query-grouping-options select,
.query-grouping-options input {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
  color: var(--text);
}

.grouping-help {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 10.5px;
}

.sql-editor-shell {
  position: relative;
}

.sql-autocomplete {
  position: fixed;
  z-index: 7000;
  width: min(430px, calc(100vw - 24px));
  max-height: min(410px, 55vh);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .32);
}

.sql-autocomplete__head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-alt);
}

.sql-autocomplete__head strong {
  font-size: 11px;
}

.sql-autocomplete__head span {
  color: var(--text-muted);
  font-size: 9.5px;
  white-space: nowrap;
}

.sql-autocomplete__list {
  max-height: min(370px, calc(55vh - 34px));
  overflow: auto;
  padding: 4px;
}

.sql-autocomplete__item {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.sql-autocomplete__item:hover,
.sql-autocomplete__item.is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}

.sql-autocomplete__kind {
  display: inline-flex;
  justify-content: center;
  padding: 3px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--accent);
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.sql-autocomplete__text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sql-autocomplete__text strong,
.sql-autocomplete__text small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sql-autocomplete__text strong {
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.sql-autocomplete__text small {
  color: var(--text-muted);
  font-size: 9.5px;
}

.sql-autocomplete__empty {
  margin: 0;
  padding: 12px;
  color: var(--text-muted);
  font-size: 11px;
}

@media (max-width: 760px) {
  .selected-fields-toolbar { align-items: flex-start; flex-direction: column; gap: 5px; }
  .query-grouping-options { grid-template-columns: 1fr; }
  .grouping-help { grid-column: auto; }
  .sql-autocomplete__head span { display: none; }
}


/* ---------- Ajustes v29.7: rolagem vertical dos campos selecionados ---------- */
.fields-drawer .drawer-content {
  display: flex;
  flex-direction: column;
  max-height: min(38vh, 390px);
  overflow: hidden;
  padding-bottom: 10px;
}

.fields-drawer .selected-fields-toolbar {
  flex: 0 0 auto;
}

.fields-drawer__list {
  flex: 1 1 auto;
  min-height: 70px;
  max-height: clamp(120px, 30vh, 310px);
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding: 0 5px 5px 0;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.fields-drawer__list::-webkit-scrollbar {
  width: 10px;
}

.fields-drawer__list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 48%, transparent);
  background-clip: padding-box;
}

.fields-drawer__list::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-height: 760px) {
  .fields-drawer .drawer-content {
    max-height: min(34vh, 300px);
  }

  .fields-drawer__list {
    max-height: clamp(110px, 25vh, 230px);
  }
}

@media (max-width: 900px) {
  .fields-drawer__list {
    max-height: clamp(140px, 34vh, 330px);
  }
}

/* ---------- Ajustes v29.8: painel de campos ampliado e paleta SQL estilo SSMS ---------- */
.fields-drawer .drawer-content {
  display: flex !important;
  flex-direction: column;
  height: clamp(330px, 46vh, 560px);
  min-height: 330px;
  max-height: none !important;
  overflow: hidden !important;
  padding-bottom: 10px;
}

.fields-drawer .selected-fields-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 4px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.fields-drawer__list {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)) !important;
  grid-auto-rows: minmax(36px, auto);
  gap: 7px !important;
  align-content: start !important;
  align-items: stretch !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  padding: 10px 12px 14px 2px !important;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 58%, transparent) transparent;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}

.selected-field-chip {
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.fields-drawer__list::-webkit-scrollbar {
  width: 12px;
}

.fields-drawer__list::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 62%, transparent);
  background-clip: padding-box;
}

.fields-drawer__list::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 58%, var(--text-muted));
  background-clip: padding-box;
}

@media (min-width: 1700px) {
  .fields-drawer__list {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
  }
}

@media (max-height: 820px) {
  .fields-drawer .drawer-content {
    height: clamp(290px, 42vh, 430px);
    min-height: 290px;
  }
}

@media (max-width: 900px) {
  .fields-drawer .drawer-content {
    height: clamp(300px, 50vh, 480px);
    min-height: 300px;
  }
  .fields-drawer__list {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  }
}

/* Paleta clara inspirada no SQL Server Management Studio. */
:root[data-theme="light"] .sql-editor.sql-editor--contenteditable {
  background: #ffffff;
  color: #000000;
  caret-color: #000000;
}
:root[data-theme="light"] .sql-token--keyword,
:root[data-theme="light"] .sql-token--function,
:root[data-theme="light"] .sql-token--punctuation {
  color: #0000ff;
  font-weight: 600;
}
:root[data-theme="light"] .sql-token--string { color: #ff0000; }
:root[data-theme="light"] .sql-token--number { color: #b000b5; }
:root[data-theme="light"] .sql-token--comment { color: #008000; font-style: normal; }
:root[data-theme="light"] .sql-token--identifier,
:root[data-theme="light"] .sql-token--name { color: #808000; }
:root[data-theme="light"] .sql-token--operator { color: #0000ff; }

/* Mesma hierarquia cromática no tema escuro, com tons mais legíveis. */
:root:not([data-theme="light"]) .sql-token--keyword,
:root:not([data-theme="light"]) .sql-token--function,
:root:not([data-theme="light"]) .sql-token--punctuation { color: #69a8ff; font-weight: 600; }
:root:not([data-theme="light"]) .sql-token--string { color: #ff8f8f; }
:root:not([data-theme="light"]) .sql-token--number { color: #e58bea; }
:root:not([data-theme="light"]) .sql-token--comment { color: #76c876; font-style: normal; }
:root:not([data-theme="light"]) .sql-token--identifier,
:root:not([data-theme="light"]) .sql-token--name { color: #d8cf66; }
:root:not([data-theme="light"]) .sql-token--operator { color: #8dbaff; }


/* ---------- Ajustes v29.9: scroll dos campos no padrão de Relações ativas ---------- */
/*
 * O scroll pertence ao drawer-content, exatamente como na área de relações.
 * Não usamos altura fixa: o painel cresce até o limite e só então passa a rolar.
 */
.fields-drawer .drawer-content {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: clamp(260px, 46vh, 560px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 14px 12px !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  scrollbar-width: auto;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 58%, transparent) transparent;
}

.fields-drawer .selected-fields-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: 9px 2px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.fields-drawer__list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  grid-auto-rows: minmax(36px, auto);
  gap: 7px !important;
  align-content: start !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 10px 2px 4px !important;
  scrollbar-gutter: auto !important;
}

/* Scroll visível no lado direito do painel, igual ao drawer de relações. */
.fields-drawer .drawer-content::-webkit-scrollbar {
  width: 12px;
}

.fields-drawer .drawer-content::-webkit-scrollbar-track {
  background: transparent;
}

.fields-drawer .drawer-content::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 62%, transparent);
  background-clip: padding-box;
}

.fields-drawer .drawer-content::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 58%, var(--text-muted));
  background-clip: padding-box;
}

/* A regra acima usa display:block !important; portanto o estado recolhido
   precisa prevalecer explicitamente. */
.fields-drawer.is-collapsed .drawer-content,
.collapsible-drawer.is-collapsed.fields-drawer .drawer-content {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

@media (min-width: 1700px) {
  .fields-drawer__list {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
  }
}

@media (max-height: 820px) {
  .fields-drawer .drawer-content {
    max-height: clamp(220px, 40vh, 410px) !important;
  }
}

@media (max-width: 900px) {
  .fields-drawer .drawer-content {
    max-height: clamp(250px, 48vh, 470px) !important;
  }

  .fields-drawer__list {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  }
}


/* ---------- Ajustes v29.10: painel de campos realmente rolável ---------- */
/*
 * O drawer recebe uma altura própria quando expandido. Assim ele não é
 * comprimido pelo flex layout da tela e o scroll fica sempre dentro do painel,
 * no mesmo padrão visual de Relações ativas.
 */
.fields-drawer:not(.is-collapsed) {
  display: flex !important;
  flex: 0 0 clamp(245px, 26vh, 300px) !important;
  flex-direction: column !important;
  height: clamp(245px, 26vh, 300px) !important;
  min-height: 245px !important;
  max-height: 300px !important;
  overflow: hidden !important;
}

.fields-drawer:not(.is-collapsed) > .drawer-toggle {
  flex: 0 0 auto !important;
}

.fields-drawer:not(.is-collapsed) > .drawer-content {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  padding: 0 14px 14px !important;
  scrollbar-gutter: stable !important;
  overscroll-behavior: contain;
  scrollbar-width: auto;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 66%, transparent) color-mix(in srgb, var(--panel-alt) 72%, transparent);
}

.fields-drawer .selected-fields-toolbar {
  position: sticky !important;
  top: 0;
  z-index: 4;
  flex: 0 0 auto !important;
  min-height: 30px;
  margin: 0;
  padding: 7px 2px 8px !important;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.fields-drawer__list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  grid-auto-rows: minmax(38px, auto) !important;
  gap: 8px !important;
  align-content: start !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: max-content !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 10px 2px 18px !important;
}

.fields-drawer:not(.is-collapsed) > .drawer-content::-webkit-scrollbar {
  width: 14px;
}

.fields-drawer:not(.is-collapsed) > .drawer-content::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--panel-alt) 72%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.fields-drawer:not(.is-collapsed) > .drawer-content::-webkit-scrollbar-thumb {
  min-height: 54px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 68%, transparent);
  background-clip: padding-box;
}

.fields-drawer:not(.is-collapsed) > .drawer-content::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 62%, var(--text-muted));
  background-clip: padding-box;
}

.fields-drawer.is-collapsed {
  display: block !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.fields-drawer.is-collapsed > .drawer-content {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-height: 760px) {
  .fields-drawer:not(.is-collapsed) {
    flex-basis: 235px !important;
    height: 235px !important;
    min-height: 235px !important;
  }
}

@media (min-height: 1000px) {
  .fields-drawer:not(.is-collapsed) {
    flex-basis: 285px !important;
    height: 285px !important;
    min-height: 285px !important;
  }
}

@media (max-width: 900px) {
  .fields-drawer__list {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  }
}


/* ---------- Ajustes v29.11: altura compacta para quatro linhas de campos ---------- */
/*
 * Mantém o scroll vertical da versão anterior, mas limita o painel a cerca de
 * metade da altura. Em telas comuns ficam visíveis aproximadamente quatro
 * linhas de campos antes da rolagem.
 */
.fields-drawer:not(.is-collapsed) {
  flex-basis: clamp(245px, 26vh, 300px) !important;
  height: clamp(245px, 26vh, 300px) !important;
  min-height: 245px !important;
  max-height: 300px !important;
}

@media (max-height: 760px) {
  .fields-drawer:not(.is-collapsed) {
    flex-basis: 235px !important;
    height: 235px !important;
    min-height: 235px !important;
    max-height: 235px !important;
  }
}

@media (min-height: 1000px) {
  .fields-drawer:not(.is-collapsed) {
    flex-basis: 285px !important;
    height: 285px !important;
    min-height: 285px !important;
    max-height: 285px !important;
  }
}