/*
 * Hydra Dark for Adminer — adapted for Apollo and Adminer 6.
 * Original theme by Niyko: https://github.com/Niyko/Hydra-Dark-Theme-for-Adminer
 * MIT license; see the accompanying LICENSE file.
 */

:root {
    color-scheme: dark;
    --bg: #111315;
    --fg: #e7e9ec;
    --dim: #1d2024;
    --lit: #363c43;
    --surface: #191c20;
    --surface-hover: #252a30;
    --border: #343a42;
    --muted: #a5adb8;
    --accent: #93c5fd;
    --accent-fill: #2563eb;
    --accent-hover: #1d4ed8;
    --danger: #ffabab;
    --radius: 8px;
    background: var(--bg);
}

* { box-sizing: border-box; }
body {
    display: flow-root;
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font: 14px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
::selection { background: #93c5fd; color: #171a1f; }
a, a:visited { color: var(--accent); text-decoration: none; }
a:hover { color: #c4b5fd; text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
small, .time, .version, .hint { color: var(--muted); }
p { margin: 12px 0; }
h2, h3 { color: var(--fg); font-weight: 600; }
h3 { margin: 24px 0 12px; font-size: 16px; }
hr { border: 0; border-top: 1px solid var(--border); }

/* Navigation stays separate from the scrolling database content. */
#content {
    margin: 0 0 0 248px;
    padding: 32px 36px 48px;
    min-width: 0;
}
#content h2 {
    position: static;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 28px;
    line-height: 1.3;
    letter-spacing: -.6px;
}
#breadcrumb {
    position: static;
    margin: 0 0 10px;
    padding: 0;
    background: none;
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}
#breadcrumb a { color: var(--muted); }
#breadcrumb a:hover { color: var(--accent); }
#menu {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 248px;
    min-width: 0;
    height: 100dvh;
    margin: 0;
    padding: 26px 18px 76px;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--border);
}
#menu h1 {
    position: static;
    margin: 0 0 28px;
    padding: 0 6px;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}
#menu h1::before {
    content: "";
    display: block;
    width: 100%;
    height: 64px;
    margin-bottom: 12px;
    background: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NjQuNjQgMjA2LjY4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZhY2MxNTt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMzE2LjM1LDQ0My43OUgzMDMuODhjMC0xNCw1LjE5LTE4LDYuMjQtMTguMTlDMzExLjE4LDQyNS43NSwzMTYuMzUsNDI5Ljg2LDMxNi4zNSw0NDMuNzlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjE3LjY4IC0zOTYuNjYpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMzgwLjE1LDQ1MC44N2E5Mi40Myw5Mi40MywwLDAsMC01Mi4yMS0zMC41MWMtMi40Mi03LjI3LTUuNS0xMy4xNy05LjE4LTE3LjU4LTIuMTYtMi41OS01LjU3LTUuNzMtOC02bC0uNi0uMDgtLjYuMDhjLTIuNDguMzEtNS44OCwzLjQ0LTgsNi0zLjY3LDQuNC02Ljc1LDEwLjMtOS4xNiwxNy41NmE5Mi40Myw5Mi40MywwLDAsMC02Ny42MiwxMjZjLjYyLDEuNDksMS4yOSwzLDIsNC40MWE5Mi4zOCw5Mi4zOCwwLDAsMCwxNjYuNzktLjA3Yy42Ny0xLjQsMS4zMy0yLjg5LDItNC40M2E5Mi40OCw5Mi40OCwwLDAsMC0xNS4yNy05NS4zOFptLTgxLTM0Ljg5Yy4wNy0uMTguMTUtLjM1LjIzLS41Mi4zOS0uODguNzktMS43LDEuMTktMi40N2wuMzUtLjY3Yy4xOC0uMzQuMzYtLjY3LjU0LTFzLjIzLS40MS4zNS0uNjFhMS40LDEuNCwwLDAsMSwuMS0uMTZjLjI1LS40NC41Mi0uODcuNzctMS4yN2EzNi41NCwzNi41NCwwLDAsMSwyLjIxLTMuMDdsLjMtLjM3QTIwLjc2LDIwLjc2LDAsMCwxLDMwOSw0MDIuMmwuMjctLjE5LjI1LS4xNi4yLS4xMmEyLjc2LDIuNzYsMCwwLDEsLjM5LS4yMSwzLjY2LDMuNjYsMCwwLDEsLjM5LjIxbC4yLjEyYTE1LjI3LDE1LjI3LDAsMCwxLDIuNCwxLjkyYy4xNC4xNC4zLjI5LjQ1LjQ1cy4zMi4zMi40OC41Yy4zNC4zNS42OC43MywxLDEuMTVhMzIuNTEsMzIuNTEsMCwwLDEsMi44NCw0Yy4xNS4yNC4zLjQ4LjQ0LjczLjMuNDkuNiwxLC44OSwxLjU3LjE1LjI3LjMuNTYuNDUuODUuMy41OC42LDEuMTguODksMS44Mi4xNS4zMi4zLjY0LjQ0LDEsLjI0LjUyLjQ2LDEuMDUuNjksMS42cy4zOC45My41NiwxLjQyYy4wNS4xMi4wOS4yMy4xMy4zNS4xMy4zMi4yNS42NS4zNiwxLC41MSwxLjM5LDEsMi44NywxLjQ2LDQuNDYsMi44NSw5LjY4LDUsMjMuMjcsNSw0Mi4yMiwxNi4wNiwxMy4zOSwxMi4zMSw0NC40NCwxMi4zMSw0NC40NGwtMTYuNTktMTMuODF2My42NEgzMTEuNTNjNC45My0yMC42Miw1LTQ0LjcxLDUtNDQuNzFIMzAzLjcxcy0uMSwyMy41Niw1LDQ0LjcxSDI5NS4zMXYtMy42NGwtMTYuNTksMTMuODFTMjc1LDQ4MC4yLDI5MSw0NjYuODFjMC0xOSwyLjE0LTMyLjU2LDUtNDIuMjVBNzEuMTQsNzEuMTQsMCwwLDEsMjk5LjEzLDQxNlpNMzEwLDU5OC41MmE4Ny41Myw4Ny41MywwLDAsMS03OS00OS44NmM0LjY4LTEuMzQsMTctMy4yNiwyMi41NCwxMS4zMSwxMy4zOS03LjQ5LDE5LjI4LDQuODIsMTkuMjgsNC44MnM2LjQyLTEyLjMxLDE1LjUyLTIuNjhsMTAuOTItNDQuMjlIMzIxbDEwLjkyLDQ0LjI5YzkuMS05LjYzLDE1LjUzLDIuNjgsMTUuNTMsMi42OHM1Ljg5LTEyLjMxLDE5LjI3LTQuODJjNS41LTE0LjM3LDE3LjU0LTEyLjcsMjIuMzYtMTEuMzZBODcuNTQsODcuNTQsMCwwLDEsMzEwLDU5OC41MloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTcuNjggLTM5Ni42NikiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00NjYuNTQsNDkxLjM4SDQ1MC40N2wyMC44NS01MC45NWgxNC44NGwyMC45MSw1MC45NUg0OTAuMzVsLTMuNjEtOS40OEg0NzAuMjNabTExLjk1LTMzLjE1LTMuNzcsMTJoNy40NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTcuNjggLTM5Ni42NikiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01MTYuMzQsNDQwLjcyaDIzLjNxOC43NiwwLDEzLjksNC42M2ExNiwxNiwwLDAsMSwwLDIzLjc0cS01LjE0LDQuNjQtMTMuOSw0LjYzSDUzMS45djE3LjY2SDUxNi4zNFptMTUuNTYsMjEuNzFoNS42NGE1Ljc0LDUuNzQsMCwwLDAsMy44OC0xLjI3LDQuMTEsNC4xMSwwLDAsMCwxLjQ4LTMuMjksNCw0LDAsMCwwLTEuNTItMy4yNiw1LjksNS45LDAsMCwwLTMuODQtMS4yM0g1MzEuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTcuNjggLTM5Ni42NikiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01NjcuNDQsNDY2LjA1YTI1LjI5LDI1LjI5LDAsMCwxLDcuNjctMTguNnE3Ljc0LTcuNzYsMTkuNDctNy43NUEyNi4yOCwyNi4yOCwwLDAsMSw2MTQsNDQ3LjQ1YTI2LjQ1LDI2LjQ1LDAsMCwxLDAsMzcuMjdxLTcuNjYsNy42OC0xOS4zOSw3LjY3dC0xOS40Ny03Ljc0QTI1LjMxLDI1LjMxLDAsMCwxLDU2Ny40NCw0NjYuMDVabTE5LjEsOC43NmExMS4xOSwxMS4xOSwwLDAsMCwxNi4wNywwLDEyLjY2LDEyLjY2LDAsMCwwLDMuMTgtOC43NiwxMi4yMywxMi4yMywwLDAsMC0zLjE4LTguNjksMTEsMTEsMCwwLDAtMTYuMDcsMCwxMi4yMywxMi4yMywwLDAsMC0zLjE4LDguNjlBMTIuNjYsMTIuNjYsMCwwLDAsNTg2LjU0LDQ3NC44MVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTcuNjggLTM5Ni42NikiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02NzIsNDkxLjM4SDYzMy4zN1Y0NDAuNzJoMTUuNTZWNDc4aDIzWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxNy42OCAtMzk2LjY2KSIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTcyMS4yNCw0OTEuMzhINjgyLjY2VjQ0MC43MmgxNS41NlY0NzhoMjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjE3LjY4IC0zOTYuNjYpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzI4LjExLDQ2Ni4wNWEyNS4zMywyNS4zMywwLDAsMSw3LjY3LTE4LjZxNy43Ni03Ljc2LDE5LjQ3LTcuNzV0MTkuNCw3Ljc1YTI2LjQ3LDI2LjQ3LDAsMCwxLDAsMzcuMjdxLTcuNjcsNy42OC0xOS40LDcuNjd0LTE5LjQ3LTcuNzRBMjUuMzUsMjUuMzUsMCwwLDEsNzI4LjExLDQ2Ni4wNVptMTkuMTEsOC43NmExMS4xOSwxMS4xOSwwLDAsMCwxNi4wNywwLDEyLjY2LDEyLjY2LDAsMCwwLDMuMTgtOC43NiwxMi4yMywxMi4yMywwLDAsMC0zLjE4LTguNjksMTEsMTEsMCwwLDAtMTYuMDcsMCwxMi4yLDEyLjIsMCwwLDAtMy4xOSw4LjY5QTEyLjYyLDEyLjYyLDAsMCwwLDc0Ny4yMiw0NzQuODFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjE3LjY4IC0zOTYuNjYpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDU0LjI0LDUxOS45MmgyMy4zcTguNzYsMCwxMy45LDQuNjNhMTYsMTYsMCwwLDEsMCwyMy43NHEtNS4xNSw0LjYzLTEzLjksNC42NEg0NjkuOHYxNy42Nkg0NTQuMjRabTE1LjU2LDIxLjcxaDUuNjVhNS43OCw1Ljc4LDAsMCwwLDMuODctMS4yNiw0LjEzLDQuMTMsMCwwLDAsMS40OC0zLjMsNCw0LDAsMCwwLTEuNTItMy4yNSw1Ljg5LDUuODksMCwwLDAtMy44My0xLjIzSDQ2OS44WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxNy42OCAtMzk2LjY2KSIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTUxNCw1NzAuNTlINDk4bDIwLjg1LTUxaDE0Ljg0bDIwLjkxLDUxSDUzNy44M2wtMy42Mi05LjQ5aC0xNi41Wk01MjYsNTM3LjQ0bC0zLjc2LDEyaDcuNDZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjE3LjY4IC0zOTYuNjYpIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNTc4LjczLDU3MC41OUg1NjMuODJWNTE5LjkyaDEzLjI0bDE5LjQsMjQuNDdWNTE5LjkyaDE0Ljc2djUwLjY3SDU5OC40MUw1NzguNzMsNTQ2WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxNy42OCAtMzk2LjY2KSIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTY2NC40OSw1NzAuNTlINjI0LjMyVjUxOS45MmgzOS43NHYxMy4zOUg2MzkuODl2NC40OWgxOXYxMi4zaC0xOXY3LjFoMjQuNloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTcuNjggLTM5Ni42NikiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik03MTQuMzYsNTcwLjU5SDY3NS43OFY1MTkuOTJoMTUuNTZWNTU3LjJoMjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjE3LjY4IC0zOTYuNjYpIi8+PC9zdmc+") left center / contain no-repeat;
}
#h1, #h1:visited { color: var(--muted); }
#logo { display: none; }
.version { margin-left: 4px; font-size: 11px; }
#menu > form { margin: 0; }
#menu > form:has(#lang) { order: 10; margin-top: auto; }
#lang {
    position: static;
    width: auto;
    margin-top: 20px;
    padding: 16px 4px 0;
    border-top: 1px solid var(--border);
    background: none;
    font-size: 12px;
    color: var(--muted);
}
#lang select { display: block; width: 100%; margin-top: 7px; }
#menu #dbs { margin: 0 4px 20px; padding: 0; border: 0; }
#dbs label { display: block; color: var(--muted); font-size: 12px; }
#dbs select { display: block; width: 100%; margin-top: 6px; }
#menu .links { display: grid; gap: 4px; margin: 0 0 20px; padding: 0; border: 0; }
#menu .links a {
    margin: 0;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: #c6cbd2;
    font-weight: 500;
}
#menu .links a:hover, #menu .links a.active {
    background: #29243b;
    color: #c4b5fd;
    border-color: #51456e;
    text-decoration: none;
}
#tables {
    flex: 1;
    min-height: 44px;
    margin: 0;
    padding: 16px 0;
    overflow: auto;
    border-top: 1px solid var(--border);
    list-style: none;
    border-bottom: 0;
}
#tables li { padding: 6px 10px; border-radius: 6px; overflow-wrap: anywhere; }
#tables li:hover { background: var(--surface-hover); }
#tables a { color: #c6cbd2; }
#tables a.select {
    float: right;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 4px;
    color: var(--muted);
    font-size: 11px;
}
#tables a.active { color: var(--accent); background: #29243b; }
#foot .logout {
    position: fixed;
    z-index: 11;
    inset: auto auto 16px 22px;
    width: 204px;
    margin: 0;
    background: var(--surface);
}
#logout { width: 100%; background: var(--surface-hover); border-color: var(--border); color: #c6cbd2; }
#menuopen, .js #menuopen { display: none; }
#logins { padding: 0; }
#logins a { display: block; padding: 8px; overflow-wrap: anywhere; }

/* Consistent controls with visible focus and selection states. */
input, select, textarea, button { font: inherit; }
input:not([type]), input[type=text], input[type=password], input[type=search],
input[type=number], input[type=email], input[type=url], select, textarea, .sqlarea {
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #111519;
    color: var(--fg);
    box-shadow: none;
}
input::placeholder, textarea::placeholder { color: #929ca8; }
select { min-height: 36px; cursor: pointer; }
select option { background: var(--surface); color: var(--fg); }
input.size { width: 6rem; }
input[type=checkbox], input[type=radio] {
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
    padding: 0;
    border: 1px solid #737e8b;
    border-radius: 4px;
    background: #111519;
    vertical-align: -3px;
    cursor: pointer;
}
input[type=checkbox] { flex-basis: 18px; width: 18px; height: 18px; border-width: 2px; border-color: #9ca6b3; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:checked, input[type=checkbox]:indeterminate, input[type=radio]:checked {
    background: #60a5fa;
    border-color: #60a5fa;
}
input[type=checkbox]:checked::before {
    content: "";
    width: 8px;
    height: 5px;
    margin-top: -2px;
    border: solid #080a0c;
    border-width: 0 0 3px 3px;
    transform: rotate(-45deg);
}
input[type=radio]:checked::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #171a1f;
}
input[type=checkbox]:indeterminate::before {
    content: "";
    width: 8px;
    height: 2px;
    background: #171a1f;
}
label:has(> input[type=checkbox]), label:has(> input[type=radio]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
    max-width: 100%;
    cursor: pointer;
}
label > input[type=checkbox], label > input[type=radio] { margin: 0; }
label.block:has(> input) { display: flex; }
td[align=right], th[align=right] { text-align: right; }
[align=right] > label.block, [style*="text-align: right"] > label.block { justify-content: flex-end; }
input[type=submit], input[type=button], button {
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--accent-fill);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
}
input[type=submit]:hover, input[type=button]:hover, button:hover { background: var(--accent-hover); }
input[name=delete], input[name=drop], input[name=truncate] { background: #45272e; border-color: #653440; color: var(--danger); }
input[name=delete]:hover, input[name=drop]:hover, input[name=truncate]:hover { background: #60303c; }
input:disabled, button:disabled, select:disabled {
    background: #252a30;
    border-color: var(--border);
    color: #8b95a2;
    cursor: not-allowed;
}
input[type=file] { max-width: 100%; color: var(--muted); font-size: 13px; }
input::file-selector-button { margin-right: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-hover); color: var(--fg); }
textarea, .sqlarea, pre, code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
textarea, .sqlarea { line-height: 1.65; }
code { padding: 3px 6px; border-radius: 4px; background: var(--surface); color: #d3d9e1; }
pre { max-width: 100%; overflow: auto; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
pre code { padding: 0; background: none; }
.jush { --text-color: #d3d9e1; --bg-color: #111519; --border-color: var(--border); --keyword-color: #93c5fd; --string-color: #8cdbb6; --string-plain-color: #8cdbb6; --number-color: #f2c68e; --identifier-color: #c4b5fd; --value-color: #d3d9e1; --attribute-color: #8bd6de; }
.jush a, .jush a:visited { color: #93c5fd; }
.jush-str, .jush-php_quo, .char { color: #8cdbb6; }
.jush-num { color: #f2c68e; }
.jush-com, .jush-sql_com { color: var(--muted); }

/* Let long results scroll inside their table, including on narrow screens. */
table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--fg); }
#content table { width: 100%; }
td, th { padding: 11px 14px; border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; vertical-align: middle; font-size: 13px; }
th { font-weight: 600; }
thead td, thead th { text-align: left; padding: 11px 14px; background: #24292f; color: #c2c9d2; font-size: 12px; }
thead a, thead a:visited { color: #d3d9e1; }
tr:last-child > td, tr:last-child > th { border-bottom: 0; }
thead tr:last-child > * { border-bottom: 1px solid var(--border); }
thead tr:first-child > :first-child { border-top-left-radius: var(--radius); }
thead tr:first-child > :last-child { border-top-right-radius: var(--radius); }
.odds tbody tr { background: var(--surface); }
.odds tbody tr:nth-child(even) { background: #1d2024; }
.odds tbody tr:hover, .checkable .checked td, .checkable .checked th { background: #292e34; }
#table td:not(.check) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
#table .check { background: transparent; width: 72px; white-space: nowrap; }
#table .check a { margin-right: 6px; font-size: 12px; }
#table tbody tr:has(.check input:checked) > * { background: #28334a; }
#table tbody tr:has(.check input:checked) > :first-child { box-shadow: inset 3px 0 var(--accent); }
#table td i { color: var(--muted); }
.scrollable { max-width: 100%; overflow: auto; margin: 18px 0 0; border: 1px solid var(--border); border-radius: var(--radius); }
.scrollable > table { margin: 0; border: 0; border-radius: 0; }
.layout { max-width: 760px; }
#content form > p:has(input[type=submit]), #content form > p:has(> label) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 18px 0; }
.layout th { width: 160px; color: var(--muted); font-weight: 500; }
.layout td, .layout th { background: transparent; }
.layout td:has(> label) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; min-height: 48px; }
.layout label { white-space: normal; }
.layout input:not([type=checkbox]):not([type=radio]), .layout select { min-width: 0; }
#import:not(.hidden) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 100%; }

#content > .links { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
#content > .links a { padding: 7px 12px; border-radius: 6px; color: var(--muted); font-size: 13px; font-weight: 500; }
#content > .links a.active { background: #29243b; color: #c4b5fd; }
#content > .links a:hover { background: var(--surface-hover); color: var(--fg); text-decoration: none; }
/* Keep filter groups and each control separate, including dynamically added rows. */
#form:has(#fieldset-select), #form:has(input[name="sql_file[]"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 24px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
fieldset { min-width: 0; margin: 8px 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
legend { padding: 0 5px; color: var(--muted); font-size: 12px; }
legend a { color: var(--muted); }
#form > fieldset { float: none; margin: 0; padding: 0; border: 0; background: none; }
#form > fieldset > legend { min-height: 20px; margin-bottom: 10px; padding: 0; color: #c6cbd2; font-size: 12px; font-weight: 600; line-height: 20px; }
#form > fieldset > div:not(.hidden), #fieldset-select, #fieldset-search, #fieldset-sort { display: grid; gap: 10px; }
#form > fieldset > div > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#form > fieldset input[type=search] { width: 180px; }
#form > fieldset input:not([type=checkbox]):not([type=radio]),
#form > fieldset select { height: 38px; min-height: 38px; margin: 0; }
#form > fieldset label { white-space: nowrap; color: #c6cbd2; font-size: 13px; }
#form legend a.toggle { display: inline-block; padding: 0; color: inherit; font: inherit; text-decoration: none; cursor: default; }
#form legend a.toggle::after { content: none; }
#form > fieldset select { max-width: 220px; }
/* Import has matching upload/server rows, with options beneath both actions. */
#form:has(input[name="sql_file[]"]) { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 24px; }
#form:has(input[name="sql_file[]"]) > fieldset > div { grid-template-rows: 22px 44px 38px; align-items: center; }
#form input[name="sql_file[]"] { width: 100%; min-width: 0; height: 44px; }
#form:has(input[name="sql_file[]"]) input[type=submit] { justify-self: start; min-width: 140px; }
#form:has(input[name="sql_file[]"]) > p { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; }
.footer { position: static; margin: 24px 0 0; background: none; border: 0; box-shadow: none; }
.footer > div { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; padding: 0; background: none; }
.footer fieldset { float: none; margin: 0; padding: 12px 14px 14px; }
.footer fieldset > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 36px; }
.footer #selected { color: var(--accent); font-weight: 600; }
.footer .hidden { display: none; }
.message, .error { margin: 16px 0; padding: 14px 16px; border: 1px solid; border-radius: var(--radius); }
.message { background: #152d28; border-color: #2b5749; color: #a4e4c7; }
.error { background: #352029; border-color: #643341; color: #ffc0c0; }
.message a, .error a { color: inherit; text-decoration: underline; }
#help { z-index: 30; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--fg); box-shadow: 0 8px 30px #0005; }
#schema .table { background: var(--surface); border-color: var(--border); border-radius: 6px; }
#schema .table a { color: var(--accent); }

/* The login form is a compact card, rather than a full-width data table. */
body:has(input[name="auth[password]"]) #content {
    width: min(440px, calc(100% - 32px));
    margin: max(140px, 19vh) auto 48px;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 20px 60px #0003;
}
body:has(input[name="auth[password]"]) #content h2 { margin-bottom: 26px; font-size: 25px; }
body:has(input[name="auth[password]"]) .layout { border: 0; background: none; }
body:has(input[name="auth[password]"]) .layout tr { display: block; margin-bottom: 18px; }
body:has(input[name="auth[password]"]) .layout th,
body:has(input[name="auth[password]"]) .layout td { display: block; width: 100%; padding: 0; border: 0; }
body:has(input[name="auth[password]"]) .layout th { margin-bottom: 7px; }
body:has(input[name="auth[password]"]) .layout input,
body:has(input[name="auth[password]"]) .layout select { width: 100%; min-height: 40px; }
body:has(input[name="auth[password]"]) #content form > p { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 24px 0 0; }
body:has(input[name="auth[password]"]) #content form > p label { color: var(--muted); font-size: 12px; }
body:has(input[name="auth[password]"]) #menu { position: static; width: auto; height: auto; padding: 0; border: 0; background: none; }
body:has(input[name="auth[password]"]) #menu h1 { position: absolute; top: 28px; left: 32px; width: 200px; margin: 0; }
body:has(input[name="auth[password]"]) #lang { position: absolute; top: 24px; right: 32px; left: auto; width: 170px; margin: 0; padding: 0; border: 0; }

@media (max-width: 1100px) {
    #content { padding: 28px 24px 40px; }
}
@media (max-width: 800px) {
    #content { margin: 0; margin-inline-start: 0 !important; padding: 24px 16px 40px; }
    #content h2 { padding-right: 48px; font-size: 24px; }
    #breadcrumb { padding-right: 48px; }
    .js #menuopen { display: block; position: fixed; top: 16px; right: 16px; left: auto; z-index: 30; }
    #menuopen button { width: 38px; min-height: 36px; padding: 0; border-color: var(--border); background: var(--surface); color: var(--fg); }
    #menuopen button::before { content: "☰"; font-size: 18px; }
    .js #foot { display: block; position: static; }
    #foot.foot #menu { display: none; }
    #foot.foot .logout { display: none; }
    #foot:not(.foot) #menu { display: flex; border: 0; border-right: 1px solid var(--border); width: min(280px, calc(100% - 64px)); box-shadow: 16px 0 60px #0008; }
    #foot:not(.foot) .logout { width: min(236px, calc(100% - 108px)); }
    .scrollable #table { min-width: 640px; }
    #form > fieldset { max-width: 100%; }
    #form:has(input[name="sql_file[]"]) { grid-template-columns: minmax(0, 1fr); }
    .layout th { width: auto; }
    .layout td, .layout th { padding: 10px; }
    .layout:not(.nowrap) th { width: 96px; }
    .layout.nowrap { table-layout: fixed; white-space: normal; }
    .layout.nowrap th { width: 72px; overflow-wrap: anywhere; }
    .layout.nowrap td.function { width: 52px; }
    .layout.nowrap input:not([type=checkbox]):not([type=radio]), .layout.nowrap textarea { width: 100%; }
    body:has(input[name="auth[password]"]) #foot.foot #menu { display: block; }
    body:has(input[name="auth[password]"]) #menuopen { display: none; }
    body:has(input[name="auth[password]"]) #menu h1 { top: 24px; left: 20px; width: 150px; }
    body:has(input[name="auth[password]"]) #lang { top: 24px; right: 20px; width: 130px; }
    body:has(input[name="auth[password]"]) #content { margin-top: 140px; margin-inline: auto !important; padding: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
    a, input, button, select { transition: background-color .15s, border-color .15s, color .15s; }
    input[type=checkbox], input[type=radio] { transition: none; }
}