/* ================================================================
   SQL UPDATE SCRIPT BUILDER: tool styles
   All selectors are namespaced under .sql-tool to prevent leaking
   into the site nav/footer/hero.

   Custom properties here are aliases onto site.css tokens, so the
   tool inherits the dark theme automatically. Class names and selectors
   are frozen — the JS builds UI by string concatenation with these
   exact names baked in. Renaming anything here requires matching
   changes in wwwroot/js/sql-update-builder.js.
   ================================================================ */

.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);
            font-variant-ligatures: none;
        }

        .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 .maprow.lit {
                border-color: var(--where);
            }

                .sql-tool .maprow.lit.on {
                    border-color: var(--where);
                    background: var(--whereSoft);
                }

        .sql-tool .lit-btn {
            border: none;
            background: none;
            cursor: pointer;
            padding: 3px 4px;
            color: var(--faint);
            border-radius: 5px;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            line-height: 1;
        }

            .sql-tool .lit-btn:hover {
                color: var(--where);
                background: var(--whereSoft);
            }

        .sql-tool .maprow.lit .lit-btn {
            color: var(--where);
        }

        .sql-tool .src-lit {
            border-color: var(--where) !important;
            background: var(--whereSoft) !important;
            font-family: var(--mono);
            font-size: 13px;
        }

            .sql-tool .src-lit:focus {
                box-shadow: 0 0 0 3px rgba(176, 112, 12, .15) !important;
                border-color: var(--where2) !important;
            }

        .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 .txwrap {
            margin-top: 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;
            }

        /* 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;
            font-variant-ligatures: none;
        }

        .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 prevent 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 | lit-btn | (source over destination) | trash */
    .sql-tool .maprow {
        display: grid;
        gap: 8px;
        align-items: center;
        grid-template-columns: auto auto minmax(0,1fr) auto;
        grid-template-areas: "chk ltb src del" "chk ltb dst del";
    }

        .sql-tool .maprow .chk {
            grid-area: chk;
        }

        .sql-tool .maprow .lit-btn {
            grid-area: ltb;
        }

        .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 .src {
            grid-area: src;
        }

        .sql-tool .whererow .del {
            grid-area: del;
        }

        .sql-tool .whererow .op {
            grid-area: op;
            width: 100%;
            min-width: 0;
        }

    /* 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;
    }
}