.sql-schema-page { max-width: 1440px; padding-top: 1.5rem; padding-bottom: 3rem; }
.sql-schema-page .utility-header h1 { font-size: clamp(1.65rem, 2vw, 2.1rem); font-weight: 600; margin-bottom: .35rem; }
.sql-schema-page .utility-header p { color: var(--site-text-secondary); margin: 0; }
.sql-schema-layout { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr); gap: 1.1rem; align-items: start; }
.sql-panel { min-width: 0; border: 1px solid var(--site-border); border-radius: .65rem; background: var(--site-panel); overflow: hidden; }
.sql-panel-heading { padding: .8rem 1rem; border-bottom: 1px solid var(--site-border); background: color-mix(in srgb, var(--site-panel) 90%, var(--site-accent)); }
.sql-panel-heading h2 { font-size: 1.05rem; font-weight: 650; margin: 0; }
.sql-panel-body { padding: 1rem; }
.connection-fields { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: .8rem; }
.connection-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.connection-field label, .selection-field label { font-size: .85rem; color: var(--site-text-secondary); font-weight: 600; }
.server-field { grid-column: 1 / 2; }.port-field { grid-column: 2 / 3; }.database-field,.user-field,.password-field { grid-column: 1 / -1; }
.sql-schema-page .form-control, .sql-schema-page .form-select { min-width: 0; color: var(--site-text); background-color: var(--site-input-bg); border-color: var(--site-border); }
.sql-schema-page .form-control::placeholder { color: var(--site-text-secondary); opacity: .8; }
.sql-schema-page .form-control:focus, .sql-schema-page .form-select:focus { border-color: var(--site-accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--site-accent) 20%, transparent); }
.connection-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.sql-schema-page .btn { font-weight: 550; }
.sql-schema-page .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-test { color: #fff; background: #b84c9c; border-color: #b84c9c; }.btn-test:hover:not(:disabled) { color: #fff; background: #9e3b84; border-color: #9e3b84; }
.sql-status { min-height: 1.3rem; margin: .6rem 0 0; font-size: .88rem; color: var(--site-text-secondary); }
.sql-status.success { color: #27864b; }.sql-status.error { color: #d04444; }
.sql-database-table { color: var(--site-text); --bs-table-color: var(--site-text); --bs-table-bg: var(--site-panel); --bs-table-border-color: var(--site-border); }
.sql-database-table thead th { background: #30363d; color: #fff; font-weight: 650; border-bottom: 0; padding: .7rem .85rem; }
.sql-database-table td { vertical-align: middle; padding: .55rem .85rem; }
.sql-database-table tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--site-panel) 92%, var(--site-text)); }
.sql-database-table .empty-row td { color: var(--site-text-secondary); text-align: center; padding: 1.3rem .85rem; }
.database-select-button { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .5rem; border: 1px solid var(--site-border); border-radius: .4rem; background: var(--site-panel); color: var(--site-text); }
.database-select-button:hover, .database-select-button[aria-pressed="true"] { border-color: var(--site-accent); background: color-mix(in srgb, var(--site-accent) 13%, var(--site-panel)); }
.database-select-button svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.sql-workspace { grid-column: 1 / -1; min-width: 0; }
.table-selection-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(90px, .42fr) minmax(160px, .9fr) minmax(160px, .9fr) auto; gap: .55rem; align-items: end; margin-bottom: 1.2rem; }
.selection-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.table-query-actions { display: flex; flex-direction: column; gap: .4rem; }
.table-query-actions .btn { white-space: nowrap; }
.column-operation-block { margin: .8rem 0; }
.column-operation-block h3 { font-size: .92rem; font-weight: 700; margin: 0 0 .45rem; }
.column-operation-row { display: grid; grid-template-columns: 95px minmax(110px, 1fr) minmax(115px, .9fr) 105px 130px 76px; gap: .35rem; align-items: center; margin-bottom: .35rem; }
.column-operation-row .operation-prefix { font-size: .78rem; color: var(--site-text-secondary); white-space: nowrap; }
.column-operation-row .form-control, .column-operation-row .form-select { padding: .35rem .5rem; font-size: .88rem; }
.column-operation-row .operation-copy { padding: .35rem .55rem; font-size: .85rem; }
.column-operation-row[data-operation="drop"] { grid-template-columns: 95px minmax(130px, 1fr) minmax(30px, .5fr) minmax(30px, .5fr) 76px; }
.column-operation-row[data-operation="alter"] { grid-template-columns: 95px minmax(110px, 1fr) minmax(115px, .9fr) 105px 130px 76px; }
.primary-key-option { display: inline-flex; align-items: center; justify-content: flex-start; gap: .35rem; color: var(--site-text); font-size: .72rem; font-weight: 650; white-space: nowrap; }
.primary-key-option .form-check-input { margin: 0; flex: 0 0 auto; }
.column-operation-row.add-operation-row { grid-template-columns: 40px minmax(110px, 1fr) minmax(115px, .9fr) 90px minmax(180px, 1.25fr) 76px; }
.sql-help-text { color: var(--site-text-secondary); font-size: .78rem; margin: .25rem 0 .8rem 40px; }
.sql-output-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; align-items: start; }
.sql-output-main { min-width: 0; }
.sql-output { height: auto; min-height: 0; resize: vertical; font: .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; white-space: pre; tab-size: 4; }
.sql-output-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sql-output-footer .sql-status { flex: 1; }
.sql-output-actions { display: flex; gap: .45rem; margin-top: .75rem; }
.btn-check-sql { color: #fff; background: #6baf45; border-color: #6baf45; }.btn-check-sql:hover:not(:disabled) { color: #fff; background: #579537; border-color: #579537; }
.btn-applied-view { color: #fff; background: #d84b4b; border-color: #d84b4b; white-space: nowrap; }.btn-applied-view:hover:not(:disabled) { color: #fff; background: #bb3737; border-color: #bb3737; }
[data-theme="dark"] .btn-outline-secondary { color: var(--site-text); border-color: var(--site-border); }
[data-theme="dark"] .btn-outline-secondary:hover:not(:disabled) { color: var(--site-text); background: var(--site-input-bg); }
[data-theme="dark"] .sql-database-table thead th { background: #121518; }
@media (max-width: 1050px) { .sql-schema-layout { grid-template-columns: 1fr; }.sql-workspace { grid-column: auto; }.table-selection-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }.table-query-actions { flex-direction: row; align-self: end; } }
@media (max-width: 650px) { .connection-fields { grid-template-columns: minmax(0, 1fr); }.server-field,.port-field,.database-field,.user-field,.password-field { grid-column: 1 / -1; }.connection-actions { justify-content: stretch; }.connection-actions .btn { flex: 1; }.table-selection-row { grid-template-columns: 1fr; }.table-query-actions .btn { flex: 1; }.column-operation-row,.column-operation-row[data-operation="drop"],.column-operation-row[data-operation="alter"],.column-operation-row.add-operation-row { grid-template-columns: 1fr 1fr; padding: .65rem; border: 1px solid var(--site-border); border-radius: .5rem; }.column-operation-row .operation-prefix { grid-column: 1 / -1; }.column-operation-row .operation-copy { grid-column: 1 / -1; }.primary-key-option { grid-column: 1 / -1; }.operation-spacer { display: none; }.sql-output-layout { grid-template-columns: 1fr; }.btn-applied-view { justify-self: end; }.sql-output-footer { align-items: flex-start; flex-direction: column; }.sql-output-actions { align-self: flex-end; } }


/* Test Connection HTTP 400 recovery UI */
.connection-clear-error {
    margin-right: auto;
}

.connection-error-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
    overflow: hidden;
    border: 1px solid var(--site-border);
    border-radius: .75rem;
    background: var(--site-panel);
}

.connection-error-panel[hidden] {
    display: none !important;
}

.connection-error-artwork {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border-right: 1px solid var(--site-border);
    background: color-mix(in srgb, var(--site-panel) 78%, var(--site-accent));
    text-align: center;
}

.connection-error-artwork img {
    display: block;
    width: min(100%, 270px);
    height: auto;
    object-fit: contain;
}

.connection-error-code {
    margin: .15rem 0 0;
    color: var(--site-text-secondary);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 600;
    letter-spacing: .07em;
    line-height: 1;
}

.connection-error-caption {
    margin: .5rem 0 0;
    color: var(--site-text-secondary);
    font-size: .875rem;
}

.connection-error-content {
    align-self: center;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.connection-error-eyebrow {
    margin: 0 0 1rem;
    color: var(--site-text-secondary);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.connection-error-status {
    display: inline-flex;
    gap: .4rem;
    margin: 0 0 .65rem;
    padding: .3rem .6rem;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    color: var(--site-text-secondary);
    background: var(--site-input-bg);
    font-size: .8rem;
    font-weight: 600;
}

.connection-error-status span {
    color: var(--site-text);
    font-variant-numeric: tabular-nums;
}

.connection-error-content h2 {
    margin: 0 0 .9rem;
    color: var(--site-text);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 600;
    line-height: 1.15;
}

.connection-error-message {
    margin: 0 0 .75rem;
    color: var(--site-text);
    font-size: 1.05rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.connection-error-guidance {
    margin: 0;
    color: var(--site-text-secondary);
    line-height: 1.7;
}

.sql-schema-page.connection-error-mode .sql-schema-layout > :not(.db-settings-panel):not(.connection-error-panel) {
    display: none !important;
}

.sql-schema-page.connection-error-mode .sql-schema-layout {
    grid-template-columns: minmax(0, 1fr);
}

.sql-schema-page.connection-error-mode .connection-error-panel {
    grid-column: 1;
}

@media (max-width: 760px) {
    .connection-error-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .connection-error-artwork {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-items: center;
        gap: 0 .75rem;
        padding: 1rem 1.25rem;
        border-right: 0;
        border-bottom: 1px solid var(--site-border);
        text-align: left;
    }

    .connection-error-artwork img {
        grid-row: span 2;
        width: min(100%, 170px);
    }

    .connection-error-code {
        align-self: end;
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .connection-error-caption {
        align-self: start;
        max-width: 12rem;
        margin-top: .35rem;
    }

    .connection-error-content {
        padding: 1.5rem;
    }
}


.sql-header-editor { margin-bottom: .65rem; }
.sql-header-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; align-items: stretch; }
.sql-header-row .btn-applied-view { align-self: start; }
.sql-header-editor > label, .final-sql-section > label { display: block; margin-bottom: .35rem; font-weight: 600; }
#sqlHeader { min-height: 0; height: auto; resize: vertical; }
.final-sql-section { margin-top: .9rem; }
#finalSqlOutput { min-height: 14rem; resize: vertical; }
.sql-output-actions { flex-wrap: wrap; }


.final-sql-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; }
.final-sql-heading > label { margin-bottom: 0; }
@media (max-width: 650px) { .sql-header-row { grid-template-columns: 1fr; }.sql-header-row .btn-applied-view { min-height: 0; justify-self: end; }.final-sql-heading { align-items: flex-start; flex-wrap: wrap; } }