/* ================================================================
   SQL UPDATE SCRIPT BUILDER: tool styles
   Every selector below is namespaced under `.sql-tool` so none of it
   leaks onto the surrounding site chrome (nav, footer, hero).

   Unlike the first version of this file, this one does NOT define its
   own color palette. The custom properties below are aliases onto the
   site's real design tokens (from site.css's `:root`), so the tool
   renders in the same dark theme, type, and component language as
   every other page instead of looking like an embedded third-party
   app. `--bg`, `--sans`, and `--mono` aren't redeclared at all here:
   their names collide with site.css's own `:root` variables, so they
   already inherit the site's values with no extra code.

   Every class name and selector is unchanged from the original tool,
   since the JavaScript builds large chunks of this UI by string
   concatenation with these exact class names baked in (see
   wwwroot/js/sql-update-builder.js). Renaming or restructuring
   anything here would require matching changes there too, so only
   the values changed, never the selectors.
   ================================================================ */

.sql-tool {
    --panel: var(--bg-raised);
    --inset: var(--bg-hover);
    --line: var(--border);
    --line2: var(--border-lit);
    --ink: var(--text);
    --sub: var(--text-sub);
    --faint: var(--text-faint);
    --set: var(--accent);
    --set2: var(--accent-dim);
    --setSoft: var(--accent-soft);
    --where: #fbbf24;
    --where2: #d99a1f;
    --whereSoft: rgba(245, 158, 11, .12);
    --ok: var(--green);
    --okSoft: rgba(74, 222, 128, .12);
    --danger: #f87171;
    --dangerSoft: rgba(248, 113, 113, .12);
    --code: var(--bg);
    --codeBar: var(--bg-hover);
    --kw: #C9A6F0; --str: #B7E08A; --idc: #7FB0F2; --num: #F2A26A; --com: #5C6B7C; --def: #CCD6E4;
    --r: var(--radius);
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

.sql-tool,
.sql-tool * {box-sizing:border-box}
.sql-tool code,
.sql-tool .mono {font-family:var(--mono)}
.sql-tool ::selection {background:var(--accent-glow)}
.sql-tool * {transition:border-color .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease}
.sql-tool :focus-visible {outline:2px solid var(--set); outline-offset:2px; border-radius:6px}
.sql-tool header {
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:20px 28px; border-bottom:1px solid var(--line); background:rgba(17, 22, 32, .72);
    backdrop-filter:saturate(140%) blur(6px);
  }
.sql-tool .brand {display:flex; align-items:center; gap:13px}
.sql-tool .logo {width:42px;height:42px;border-radius:12px;background:var(--set);display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.sql-tool .logo svg {color:#fff}
.sql-tool .eyebrow {font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--faint);margin:0}
.sql-tool h1 {font-size:19px;margin:1px 0 0;letter-spacing:-.015em;line-height:1.1;font-weight:700;color:var(--ink)}
.sql-tool .brand-note {font-family:var(--mono);font-size:12px;color:var(--sub);background:var(--inset);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.sql-tool .wrap {padding:24px 28px 40px}
.sql-tool .grid {display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); gap:24px}
.sql-tool .col {display:flex;flex-direction:column;gap:18px;min-width:0}
.sql-tool .card {background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:17px 17px 18px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sql-tool .step {display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sql-tool .num {font-family:var(--mono);font-size:12px;font-weight:600;color:#fff;background:var(--set);min-width:27px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:7px}
.sql-tool .num.n-set {background:var(--set)}
.sql-tool .num.n-where {background:var(--where); color:#1a1206}
.sql-tool .ttl {font-size:15px;font-weight:600;margin:0;letter-spacing:-.01em;color:var(--ink)}
.sql-tool .head {display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sql-tool .head svg {color:var(--sub)}
.sql-tool .rowflex {display:flex;align-items:center;justify-content:space-between;gap:10px}
.sql-tool .hint {font-size:12.5px;color:var(--sub);margin:4px 0 0;line-height:1.45}
.sql-tool .hint.tight {margin:0}
.sql-tool .field {display:flex;flex-direction:column;gap:6px}
.sql-tool input[type=text],
  .sql-tool select {
    border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:14px;
    background:var(--inset);color:var(--ink);outline:none;width:100%;font-family:inherit;
  }
.sql-tool select {appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238892AB' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 9px center;padding-right:28px}
.sql-tool input:hover,
  .sql-tool select:hover {border-color:var(--line2)}
.sql-tool input:focus,
  .sql-tool select:focus {border-color:var(--set);box-shadow:0 0 0 3px var(--accent-soft)}
.sql-tool .mono-in {font-family:var(--mono)}
/* buttons */
.sql-tool .btn {display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:9px;padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid transparent;white-space:nowrap}
.sql-tool .btn:disabled {opacity:.45;cursor:default}
.sql-tool .btn.ghost {background:transparent;border-color:var(--line);color:var(--ink)}
.sql-tool .btn.ghost:hover:not(:disabled) {border-color:var(--line2);background:var(--inset)}
.sql-tool .btn.ghost.danger {color:var(--danger)}
.sql-tool .btn.ghost.danger:hover:not(:disabled) {background:var(--dangerSoft);border-color:rgba(248,113,113,.4)}
.sql-tool .btn.solid {background:var(--set);color:#fff}
.sql-tool .btn.solid:hover:not(:disabled) {background:var(--set2)}
.sql-tool .linkbtn {background:none;border:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;padding:0;color:var(--danger)}
.sql-tool .linkbtn:hover {text-decoration:underline}
/* templates card */
.sql-tool .tpl-row {display:flex;gap:8px;align-items:center;margin-bottom:10px}
.sql-tool .tpl-row .grow {flex:1 1 0;min-width:0}
.sql-tool .tpl-save {display:flex;gap:8px;align-items:center;padding-top:12px;border-top:1px dashed var(--line);margin-top:4px}
.sql-tool .tpl-save input {flex:1 1 0;min-width:0}
.sql-tool .tpl-foot {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.sql-tool .note {font-family:var(--mono);font-size:11.5px;color:var(--ok)}
.sql-tool .note.warnnote {color:var(--where)}
/* upload */
.sql-tool .drop {border:1.5px dashed var(--line2);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 16px;cursor:pointer}
.sql-tool .drop:hover {border-color:var(--set);background:var(--inset)}
.sql-tool .drop.drag {border-color:var(--set);background:var(--setSoft)}
.sql-tool .drop svg {color:var(--faint)}
.sql-tool .drop.drag svg {color:var(--set)}
.sql-tool .drop p {margin:9px 0 0;font-size:14px;font-weight:600;color:var(--ink)}
.sql-tool .drop small {color:var(--faint);font-size:12px;margin-top:2px}
.sql-tool .fileinfo {margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--inset);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:13px}
.sql-tool .fileinfo .nm {display:flex;align-items:center;gap:8px;min-width:0;color:var(--ink)}
.sql-tool .fileinfo .nm svg {color:var(--sub);flex:0 0 auto}
.sql-tool .fileinfo .nm span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.sql-tool .fileinfo .meta {color:var(--sub);white-space:nowrap;font-family:var(--mono);font-size:12px}
.sql-tool .err {margin-top:12px;display:flex;gap:8px;align-items:flex-start;background:var(--dangerSoft);color:var(--danger);border-radius:9px;padding:8px 11px;font-size:13px}
.sql-tool .ocr {margin-top:12px;background:var(--inset);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.sql-tool .ocr .lbl {display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--sub);margin-bottom:7px}
.sql-tool .ocr .lbl b {color:var(--ink);font-weight:600}
.sql-tool .ocr .lbl .pct {font-family:var(--mono);color:var(--set)}
.sql-tool .ocr .track {height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.sql-tool .ocr .fill {height:100%;background:var(--set);width:0;border-radius:99px;transition:width .2s ease}
.sql-tool .miniact {display:flex;gap:14px;margin-bottom:9px;font-size:12.5px}
.sql-tool .miniact button {background:none;border:none;cursor:pointer;font-weight:600;font-size:12.5px;padding:0;font-family:inherit}
.sql-tool .list {display:flex;flex-direction:column;gap:8px}
.sql-tool .maprow {display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:11px;padding:7px 8px;background:var(--panel)}
.sql-tool .maprow.on {border-color:var(--set);background:var(--setSoft)}
.sql-tool .whererow {display:flex;align-items:center;gap:8px;border:1px solid var(--where);background:var(--whereSoft);border-radius:11px;padding:7px 8px}
.sql-tool .chk {background:none;border:none;cursor:pointer;display:flex;flex:0 0 auto;padding:0}
.sql-tool .arrow {flex:0 0 auto;color:var(--set);display:flex}
.sql-tool .keyic {flex:0 0 auto;color:var(--where);display:flex}
.sql-tool .src {font-family:var(--mono);flex:1 1 0;min-width:0}
.sql-tool .dst {font-family:var(--mono);flex:1 1 0;min-width:0}
.sql-tool .op {font-family:var(--mono);width:auto;min-width:96px;flex:0 0 auto;padding:8px 26px 8px 9px}
.sql-tool .del {background:none;border:none;cursor:pointer;padding:4px;flex:0 0 auto;display:flex;color:var(--faint)}
.sql-tool .del:hover {color:var(--danger)}
.sql-tool .btn-add {margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:9px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.sql-tool .btn-add.set {color:var(--set)}
.sql-tool .btn-add.where {color:var(--where)}
.sql-tool .btn-add:hover {background:var(--inset);border-color:var(--line2)}
.sql-tool .empty {border:1.5px dashed var(--line);border-radius:11px;padding:22px;text-align:center;font-size:13px;color:var(--faint)}
.sql-tool .warnrow {display:flex;gap:8px;align-items:center;background:var(--dangerSoft);color:var(--danger);border-radius:9px;padding:8px 11px;font-size:13px;margin-bottom:2px}
.sql-tool .opts2 {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:13px}
.sql-tool .toggles {display:flex;flex-direction:column;gap:3px}
.sql-tool .toggles.dim {opacity:.42;pointer-events:none}
.sql-tool .toggle {display:flex;align-items:center;gap:9px;text-align:left;border:none;background:none;cursor:pointer;border-radius:9px;padding:7px 9px;font-size:13.5px;color:var(--ink);font-family:inherit;width:100%}
.sql-tool .toggle.on {background:var(--setSoft)}
.sql-tool .toggle .ti {display:flex;flex:0 0 auto;color:var(--faint)}
.sql-tool .toggle small {color:var(--sub);font-family:var(--mono);font-size:11px}
.sql-tool .txwrap {margin-top:10px;padding-top:11px;border-top:1px dashed var(--line)}
/* output console */
.sql-tool .outwrap {position:sticky;top:4.75rem}
.sql-tool .panel {border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 8px 26px -16px rgba(0,0,0,.6)}
.sql-tool .codebar {display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--codeBar);padding:11px 14px}
.sql-tool .codebar .fn {display:flex;align-items:center;gap:8px;color:var(--sub);font-size:13px;min-width:0}
.sql-tool .codebar .fn b {font-family:var(--mono);color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sql-tool .badge {background:rgba(255,255,255,.06);color:var(--sub);border-radius:6px;padding:2px 7px;font-size:11px;white-space:nowrap;font-family:var(--mono)}
.sql-tool .badge.tx {background:var(--accent-glow);color:#D6E0FF}
.sql-tool .cbtns {display:flex;gap:8px;flex:0 0 auto}
.sql-tool .cbtn {display:flex;align-items:center;gap:6px;border:none;border-radius:9px;padding:7px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.sql-tool .cbtn.ghost {background:rgba(255,255,255,.06);color:var(--ink)}
.sql-tool .cbtn.ghost:hover {background:rgba(255,255,255,.12)}
.sql-tool .cbtn.primary {background:var(--set);color:#fff}
.sql-tool .cbtn.primary:hover {background:var(--set2)}
.sql-tool .cbtn.disabled {opacity:.4;pointer-events:none}
.sql-tool .warnbar {display:flex;gap:8px;align-items:center;background:var(--whereSoft);color:var(--where);padding:8px 14px;font-size:12px}
.sql-tool .codearea {background:var(--code);overflow:auto;max-height:72vh}
.sql-tool pre.code {margin:0;padding:13px 0;font-family:var(--mono);font-size:13px;line-height:1.6}
.sql-tool .ln {display:flex;padding-right:16px}
.sql-tool .lno {user-select:none;text-align:right;flex:0 0 auto;padding:0 13px;color:var(--faint);min-width:46px}
.sql-tool .lc {white-space:pre;color:var(--def)}
.sql-tool .t-kw {color:var(--kw)}
.sql-tool .t-str {color:var(--str)}
.sql-tool .t-id {color:var(--idc)}
.sql-tool .t-num {color:var(--num)}
.sql-tool .t-com {color:var(--com)}
.sql-tool .t-def {color:var(--def)}
.sql-tool .hidden {display:none}
@media (max-width:900px) {
    .sql-tool .grid {grid-template-columns:1fr}
    .sql-tool .outwrap {position:static}
    .sql-tool header,
    .sql-tool .wrap {padding-left:16px;padding-right:16px}
}
@media (max-width:600px) {
    .sql-tool header {padding:16px}
    .sql-tool .wrap {padding:16px 14px 32px}
    .sql-tool h1 {font-size:17px}
    .sql-tool .brand-note {display:none}
    .sql-tool .card {padding:15px 14px}
  /* 16px inputs stop iOS Safari from auto-zooming on focus */
    .sql-tool input[type=text],
    .sql-tool select,
    .sql-tool .op {font-size:16px}
    .sql-tool .toggle {font-size:14px}
  /* templates: select full-width, action buttons below */
    .sql-tool .tpl-row {flex-wrap:wrap}
    .sql-tool .tpl-row .grow {flex:1 1 100%}
    .sql-tool .tpl-row .btn {flex:1 1 0}
  /* SET rows stack: checkbox | (source over destination) | trash */
    .sql-tool .maprow {
      display:grid; gap:8px; align-items:center;
      grid-template-columns:auto minmax(0,1fr) auto;
      grid-template-areas:"chk src del" "chk dst del";
    }
    .sql-tool .maprow .chk {grid-area:chk}
    .sql-tool .maprow .src {grid-area:src}
    .sql-tool .maprow .dst {grid-area:dst}
    .sql-tool .maprow .del {grid-area:del}
    .sql-tool .maprow .arrow {display:none}
  /* WHERE rows stack: key | column name on top, operator + value below | trash */
    .sql-tool .whererow {
      display:grid; gap:8px; align-items:center;
      grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;
      grid-template-areas:"key dst dst del" "key op src del";
    }
    .sql-tool .whererow .keyic {grid-area:key}
    .sql-tool .whererow .dst {grid-area:dst}
    .sql-tool .whererow .op {grid-area:op;width:100%;min-width:0}
    .sql-tool .whererow .src {grid-area:src}
    .sql-tool .whererow .del {grid-area:del}
  /* output toolbar wraps instead of overflowing */
    .sql-tool .codebar {flex-wrap:wrap}
    .sql-tool .codearea {max-height:60vh}
    .sql-tool pre.code {font-size:12px}
    .sql-tool .lno {min-width:38px;padding:0 9px}
}