/* Adminer · Modern Dark · v4 */

:root {
	color-scheme: dark;

	--bg:          #0a0a0c;
	--surface:     #101116;
	--surface-2:   #16171d;
	--surface-3:   #1c1e25;

	--line:        rgba(255,255,255,.07);
	--line-strong: rgba(255,255,255,.13);

	--fg:          #e3e5ea;
	--fg-dim:      #a1a7b3;
	--fg-muted:    #6f7683;

	--accent:      #7c93ff;
	--accent-hi:   #9dadff;
	--accent-dim:  rgba(124,147,255,.10);
	--accent-ring: rgba(124,147,255,.35);
	--on-accent:   #0a0a0c;

	--ok:    #5ed6a0;
	--warn:  #e8b96a;
	--err:   #ff7b8a;

	--r:    10px;
	--r-sm: 6px;
	--ease: 130ms cubic-bezier(.4,0,.2,1);

	--mono: "Cascadia Code", "JetBrains Mono", ui-monospace, Consolas, "SF Mono", monospace;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html { background: var(--bg); }

body {
	background: var(--bg) !important;
	color: var(--fg) !important;
	font: 13.5px/1.6 var(--sans);
	letter-spacing: .002em;
	-webkit-font-smoothing: antialiased;
}

::selection { background: rgba(124,147,255,.3); color: #fff; }

a, a:link { color: var(--accent) !important; text-decoration: none; transition: color var(--ease); }
a:visited { color: var(--accent) !important; }
a:hover, a:link:hover, a:visited:hover {
	color: var(--accent-hi) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
a.active { color: #fff !important; font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--line); }

#lang {
	background: var(--surface);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-bottom-right-radius: var(--r);
	color: var(--fg-muted);
	font-size: 92%;
}

#breadcrumb {
	background: var(--bg) !important;
	border-bottom: 1px solid var(--line);
	color: var(--fg-muted);
	font-size: 92%;
}
#breadcrumb a { color: var(--fg-dim) !important; }
#breadcrumb a:hover { color: var(--accent-hi) !important; }

#logout, input#logout {
	background: var(--surface-2) !important;
	color: var(--fg) !important;
	border: 1px solid var(--line-strong) !important;
	border-radius: var(--r-sm);
	padding: .35em 1em;
	box-shadow: none;
	transition: background var(--ease), color var(--ease), border-color var(--ease);
}
#logout:hover {
	background: var(--err) !important;
	color: var(--on-accent) !important;
	border-color: var(--err) !important;
}

h1 {
	background: var(--bg) !important;
	color: var(--fg-muted) !important;
	border-bottom: 1px solid var(--line) !important;
	font-size: 15px;
}
h1 a { color: #fff !important; font-weight: 650; letter-spacing: -.015em; }

h2 {
	background: transparent !important;
	color: #fff !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line) !important;
	border-radius: 0;
	font-size: 22px;
	font-weight: 650;
	letter-spacing: -.02em;
	padding: .6em 0 .55em !important;
	margin-right: 1em;
}

h3 { color: var(--fg); font-weight: 620; letter-spacing: -.01em; font-size: 15px; }

.version, #version { color: var(--fg-muted) !important; font-size: 80%; font-weight: 400; }
#version { color: var(--warn) !important; }

#menu {
	background: var(--surface);
	border-right: 1px solid var(--line);
	min-height: calc(100vh - 2em);
	box-sizing: border-box;
	padding-bottom: 2em;
}

#menu p, #menu > p, #menu .links, #menu .logout {
	border-bottom: 1px solid var(--line) !important;
	background: transparent !important;
	padding: .75em 1em !important;
	margin: 0 !important;
}

#dbs, #menu select { width: 100%; }

#tables { background: transparent !important; border: 0 !important; padding: .4em .5em !important; }
#tables a { display: inline; padding: 0; background: none; }

#tables li, #tables p {
	padding: 3px 9px !important;
	line-height: 1.7;
	border-radius: var(--r-sm);
	border: 0 !important;
	transition: background var(--ease);
}
#tables li:hover, #tables p:hover { background: var(--surface-3); }
#tables a:hover { background: none; text-decoration: none; }
#tables .select, #tables a.select {
	margin-right: .5em;
	color: var(--fg-muted) !important;
	font-style: normal;
	font-size: 88%;
}

#content { color: var(--fg); }
p, li, dt, dd, label { color: var(--fg); }
.links a { margin-right: 1em; }

table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line) !important;
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: none;
}

th, td {
	border: 0 !important;
	border-bottom: 1px solid var(--line) !important;
	padding: .6em .85em !important;
	background: transparent;
	color: var(--fg);
	vertical-align: middle;
	transition: background var(--ease);
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0 !important; }

th, thead td, table.nowrap th {
	background: var(--surface-2) !important;
	color: var(--fg-muted) !important;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
	padding: .7em .85em !important;
	position: sticky;
	top: 0;
	z-index: 2;
	border-bottom: 1px solid var(--line-strong) !important;
}
th a, thead td a { color: var(--fg-dim) !important; }

tbody tr:hover td, tbody tr:hover th { background: rgba(255,255,255,.025) !important; }

.js .checkable .checked td, .js .checkable .checked th { background: var(--accent-dim) !important; }
.js .checkable .checked td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

td { font-variant-numeric: tabular-nums; }
td.number, .number { color: var(--fg) !important; font-family: var(--mono); font-size: 92%; text-align: right; }
.type, .datetime { color: var(--fg-muted); font-family: var(--mono); font-size: 92%; }
.null, td.null { color: var(--fg-muted); font-style: italic; opacity: .6; }

sup a, .help { color: var(--fg-muted) !important; opacity: .5; }

input, select, textarea, button {
	background: var(--surface-2) !important;
	color: var(--fg) !important;
	border: 1px solid var(--line-strong) !important;
	border-radius: var(--r-sm);
	padding: .4em .6em;
	font-family: inherit;
	font-size: inherit;
	box-shadow: none;
	transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--fg-muted); }

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px var(--accent-ring);
}

input[type=checkbox], input[type=radio] {
	accent-color: var(--accent);
	padding: 0;
	box-shadow: none;
	width: 14px;
	height: 14px;
}

input[type=submit], input[type=button], input[type=reset], button, .button {
	background: var(--surface-3) !important;
	color: var(--fg) !important;
	border: 1px solid var(--line-strong) !important;
	border-radius: var(--r-sm);
	cursor: pointer;
	padding: .42em 1em;
	font-weight: 550;
	transition: background var(--ease), border-color var(--ease), color var(--ease);
}
input[type=submit]:hover:enabled,
input[type=button]:hover:enabled,
button:hover:enabled, .button:hover {
	background: var(--accent) !important;
	color: var(--on-accent) !important;
	border-color: var(--accent) !important;
}
input[type=submit]:focus-visible, button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--accent-ring);
}
input[disabled], input:disabled, button:disabled { opacity: .3; cursor: not-allowed; }

fieldset {
	border: 1px solid var(--line) !important;
	border-radius: var(--r);
	background: var(--surface);
	padding: .7em 1em;
	box-shadow: none;
}
legend {
	color: var(--fg-muted);
	padding: 0 .5em;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.error, .error b {
	background: rgba(255,123,138,.08) !important;
	color: var(--err) !important;
	border: 1px solid rgba(255,123,138,.22);
	border-radius: var(--r);
	padding: .7em 1em;
	box-shadow: none;
}
.message {
	background: rgba(94,214,160,.08) !important;
	color: var(--ok) !important;
	border: 1px solid rgba(94,214,160,.22);
	border-radius: var(--r);
	padding: .7em 1em;
	box-shadow: none;
}
.time { color: var(--fg-muted) !important; font-family: var(--mono); font-size: 90%; }

code, pre, .sqlarea, textarea.sqlarea, .jush {
	background: var(--surface) !important;
	color: var(--fg) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--r);
	font-family: var(--mono);
	font-size: 92%;
}
#content code.jush-sql, #content code.jush {
	display: inline-block;
	padding: .55em .8em;
	margin: .3em 0;
}
textarea.sqlarea, #query { line-height: 1.65; padding: .8em .9em; }

.jush-sql, .jush-sqlite, .jush-pgsql, .jush-mssql, .jush-oracle, .jush-php { color: var(--fg) !important; }
.jush-kwd, .jush-sql_kwd  { color: #c4b5fd !important; font-weight: 600; }
.jush-num                 { color: #fbbf77 !important; }
.jush-str, .jush-quo, .jush-apo, .jush-sql_apo, .jush-sql_quo, .jush-sqlite_apo { color: #86e0a8 !important; }
.jush-com, .jush-one, .jush-com_code { color: #5a6070 !important; font-style: italic; }
.jush-var, .jush-sql_var, .jush-bac  { color: #ff9aa6 !important; }
.jush-tag, .jush-att      { color: #7ecbf0 !important; }
.jush-esc                 { color: var(--warn) !important; }
.jush-func                { color: var(--accent) !important; }

.footer, #content .footer { border-top: 1px solid var(--line); }
.footer > div, .footer div { background: var(--bg) !important; }

.pages {
	background: var(--surface-3) !important;
	border: 1px solid var(--line-strong) !important;
	border-radius: 999px;
	padding: .35em 1em;
	color: var(--fg);
	box-shadow: 0 6px 24px rgba(0,0,0,.5);
}

#schema .table, #schema .references {
	background: var(--surface-2) !important;
	border: 1px solid var(--line-strong) !important;
	border-radius: var(--r-sm);
	color: var(--fg) !important;
}
.column {
	background: var(--surface-3) !important;
	border: 1px solid var(--line-strong) !important;
	border-radius: var(--r-sm);
	color: var(--fg) !important;
	box-shadow: 0 6px 24px rgba(0,0,0,.5);
}

* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2d36; border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a3e4a; }
::-webkit-scrollbar-corner { background: transparent; }

body.login #content { margin-left: 1em; max-width: 28em; }
body.login form {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 1.5em;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

#content tbody tr,
#content tbody tr td,
#content tbody tr th {
	opacity: 1 !important;
	filter: none !important;
	color: var(--fg) !important;
	background-color: transparent !important;
}

#content tbody tr:nth-child(even) td { background-color: rgba(255,255,255,.022) !important; }

#content tbody tr:hover td,
#content tbody tr:hover th { background-color: rgba(124,147,255,.09) !important; }

#content tbody tr td a { color: var(--accent) !important; opacity: 1 !important; }
#content tbody tr td a:hover { color: var(--accent-hi) !important; }

#content tbody td.null { color: var(--fg-muted) !important; opacity: .65 !important; }
#content tbody td.type, #content tbody td.datetime { color: var(--fg-muted) !important; }

#content .checkable .checked td,
#content .checkable .checked th { background-color: rgba(124,147,255,.14) !important; }