/* ==========================================================================
   Database explorer (#/dbexplorer, reached from Settings) — dbx- prefix.
   Borrows .card/.table/.detail/.btn/.badge/.mono; only these are its own.

   TWO THINGS HERE CARRY MEANING RATHER THAN DECORATION, and neither may be
   reduced to a colour:

   * `.dbx-est--unknown` is HATCHED, exactly as .cmp-pill--indet and
     .badge--hatch are. A row-count estimate is absent when the relation has
     never been analysed, and PostgreSQL reports that as -1. "We do not know how
     many rows are in here" must never render as "0", which would send somebody
     hunting for data that is sitting right there.

   * `.dbx-null` is the word `null` in muted italics with a dotted underline,
     and `.dbx-empty` is a marked-up empty string. A cell holding SQL NULL and a
     cell holding '' are different facts about the record, and a grid that draws
     both as blank space is the reason people mistrust database viewers.
   ========================================================================== */

/* ---- The query editor ---------------------------------------------------- */
.dbx-sql{width:100%;min-height:120px;box-sizing:border-box;resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.55;
  padding:10px 12px;border:1px solid var(--border-default);border-radius:var(--r-md);
  background:var(--bg-surface);color:var(--text-primary);tab-size:2}
.dbx-sql:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.dbx-bar{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin-top:var(--sp-3)}
.dbx-hint{color:var(--text-tertiary);font-weight:700;font-size:12px}
.dbx-kbd{font-family:ui-monospace,monospace;font-size:11px;font-weight:800;
  background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:4px;padding:1px 5px}

/* ---- Refusals and outcomes, printed in place beside the editor ----------- */
.dbx-msg{margin:var(--sp-3) 0 0;padding:10px 12px;border-radius:var(--r-md);
  font-weight:700;font-size:13px;line-height:1.55;max-width:90ch;white-space:pre-wrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dbx-msg--err{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger-fg)}
.dbx-msg--warn{background:var(--warning-bg);border:1px solid var(--warning-border);color:var(--warning-fg)}
.dbx-msg--info{background:var(--info-bg);border:1px solid var(--info-border);color:var(--info-fg);font-family:inherit}

/* ---- The table list (the side rail) -------------------------------------- */
.dbx-list{list-style:none;margin:var(--sp-3) 0 0;padding:0;max-height:60vh;overflow:auto}
.dbx-item{border-bottom:1px solid var(--border-subtle)}
.dbx-item:last-child{border-bottom:0}
.dbx-t{display:flex;width:100%;gap:var(--sp-2);align-items:baseline;justify-content:space-between;
  background:none;border:0;text-align:left;cursor:pointer;padding:8px 6px;border-radius:var(--r-sm);
  font:inherit;color:var(--text-primary)}
.dbx-t:hover{background:var(--bg-surface-hover)}
.dbx-t:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.dbx-t__n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;font-size:12.5px;
  overflow-wrap:anywhere}
.dbx-t__meta{color:var(--text-tertiary);font-weight:700;font-size:11px;white-space:nowrap}
.dbx-kind{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  background:var(--neutral-bg);color:var(--neutral-fg);border:1px solid var(--neutral-border);
  border-radius:4px;padding:0 5px;margin-left:5px}

/* An estimate, drawn as an estimate. */
.dbx-est{font-variant-numeric:tabular-nums}
.dbx-est--unknown{background:repeating-linear-gradient(135deg,#f4f2ea,#f4f2ea 5px,#eae6d8 5px,#eae6d8 10px);
  color:#7a6520;border:1px dashed #c9b877;border-radius:4px;padding:0 5px;font-size:10.5px;font-weight:800}

/* ---- One table's detail (columns + indexes) ----------------------------- */
.dbx-det{padding:2px 6px 12px}
.dbx-cols{list-style:none;margin:0;padding:0}
.dbx-col{display:flex;gap:var(--sp-2);align-items:baseline;padding:3px 0;font-size:12px;line-height:1.5;
  border-bottom:1px dotted var(--border-subtle)}
.dbx-col:last-child{border-bottom:0}
.dbx-col__n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;overflow-wrap:anywhere}
.dbx-col__t{color:var(--text-secondary);font-weight:700;font-size:11.5px}
.dbx-col__f{margin-left:auto;display:flex;gap:4px;flex-shrink:0}
.dbx-flag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  border-radius:4px;padding:0 4px;white-space:nowrap}
.dbx-flag--gen{background:var(--info-bg);color:var(--info-fg);border:1px solid var(--info-border)}
.dbx-flag--pk{background:var(--success-bg);color:var(--success-fg);border:1px solid var(--success-border)}
.dbx-flag--notnull{background:var(--neutral-bg);color:var(--neutral-fg);border:1px solid var(--neutral-border)}
.dbx-idx{margin:var(--sp-2) 0 0;padding:0;list-style:none}
.dbx-idx li{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;line-height:1.5;
  color:var(--text-tertiary);font-weight:700;overflow-wrap:anywhere;padding:2px 0}

/* ---- The result grid ---------------------------------------------------- */
.dbx-res{width:100%;border-collapse:collapse;font-size:12.5px}
.dbx-res th{position:sticky;top:0;z-index:1;background:var(--bg-inset);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;font-weight:800;
  text-align:left;padding:7px 10px;border-bottom:1px solid var(--border-default);white-space:nowrap}
.dbx-res td{padding:6px 10px;border-bottom:1px solid var(--border-subtle);vertical-align:top;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.5;
  max-width:44ch;overflow-wrap:anywhere}
.dbx-res tbody tr:hover{background:var(--bg-surface-hover)}
.dbx-res__n{font-variant-numeric:tabular-nums;text-align:right}
.dbx-scroll{max-height:62vh;overflow:auto}
.dbx-null{color:var(--text-tertiary);font-style:italic;border-bottom:1px dotted var(--border-strong)}
.dbx-empty{color:var(--text-tertiary);font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px}
.dbx-more{color:var(--accent-fg);font-weight:800;font-size:10.5px;cursor:help}

/* ---- Sample queries ----------------------------------------------------- */
.dbx-egs{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
.dbx-eg{background:none;border:1px solid var(--border-subtle);border-radius:var(--r-md);cursor:pointer;
  text-align:left;padding:8px 10px;font:inherit;color:var(--text-primary)}
.dbx-eg:hover{background:var(--bg-surface-hover);border-color:var(--border-default)}
.dbx-eg b{display:block;font-size:12.5px;margin-bottom:3px}
.dbx-eg code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;
  color:var(--text-secondary);overflow-wrap:anywhere;font-weight:700}