:root {
  --sf-canvas: #1e1e24;
  --sf-panel: #141419;
  --sf-panel-2: #22222b;
  --sf-edge: #33333d;
  --sf-accent: #c9d1ff;
  --sf-muted: #9a9aa5;
  --sf-danger: #c0322b;
  --sf-text: #e8e8ec;
}

html,
body {
  background: var(--sf-canvas) !important;
  color: var(--sf-text) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

a,
a:visited {
  color: var(--sf-accent);
}

a:hover {
  color: #e8ebff;
}

h1,
h2,
h3,
p,
li,
label,
th,
td,
#content,
#menu,
#lang,
#breadcrumb,
#logins,
#tables,
#help,
fieldset,
legend {
  color: var(--sf-text);
}

h1 {
  font-weight: 600;
  letter-spacing: 0.01em;
}

#content,
#menu,
#lang,
#breadcrumb,
#logins,
#tables,
#help {
  background: var(--sf-panel) !important;
  border-color: var(--sf-edge) !important;
}

#menu {
  border-right: 1px solid var(--sf-edge);
}

#menu p,
#menu a {
  color: var(--sf-text);
}

#menu .active,
#tables a.active,
#menu a.active {
  color: var(--sf-accent) !important;
  font-weight: 600;
}

table {
  border-collapse: collapse;
  border-color: var(--sf-edge);
  background: var(--sf-canvas);
}

th {
  background: var(--sf-panel) !important;
  color: var(--sf-text) !important;
  border-color: var(--sf-edge) !important;
}

td {
  background: var(--sf-canvas) !important;
  color: var(--sf-text) !important;
  border-color: var(--sf-edge) !important;
}

tr.odd td,
tr:nth-child(even) td {
  background: var(--sf-panel-2) !important;
}

tr:hover td,
table.nowrap tr:hover td {
  background: #2a2a38 !important;
}

input,
select,
textarea {
  background: var(--sf-panel-2) !important;
  color: var(--sf-text) !important;
  border: 1px solid var(--sf-edge) !important;
  border-radius: 6px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 1px solid var(--sf-accent);
  border-color: var(--sf-accent) !important;
}

textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

input[type="submit"],
input[type="button"],
button {
  background: var(--sf-accent) !important;
  color: #141419 !important;
  border: 0 !important;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
}

input[name="drop"],
input[name="delete"],
input[value="Drop"],
input[value="Delete"],
input[value="Drop view"],
input[value="Truncate"] {
  background: var(--sf-danger) !important;
  color: #fff !important;
}

.error {
  background: var(--sf-danger) !important;
  color: #fff !important;
  border: 0;
}

.message {
  background: var(--sf-panel-2) !important;
  color: var(--sf-accent) !important;
  border: 1px solid var(--sf-edge) !important;
}

code,
pre,
.jush {
  background: var(--sf-panel-2) !important;
  color: var(--sf-text) !important;
}

fieldset {
  border: 1px solid var(--sf-edge);
  background: var(--sf-panel);
}

#lang {
  color: var(--sf-muted);
}

p.logout a {
  color: var(--sf-muted);
}

body:has([name="auth[server]"]) #menu {
  display: none;
}

body:has([name="auth[server]"]) #content {
  max-width: 420px;
  margin: 10vh auto 0;
  background: var(--sf-panel) !important;
  border: 1px solid var(--sf-edge);
  border-radius: 12px;
  padding: 24px 28px 28px;
}

body:has([name="auth[server]"]) h1::after {
  content: "Postgres · loopgen";
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--sf-muted);
  margin-top: 0.4rem;
  letter-spacing: 0.04em;
}

body:has([name="auth[server]"]) table,
body:has([name="auth[server]"]) th,
body:has([name="auth[server]"]) td {
  background: transparent !important;
  border: 0 !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--sf-canvas);
}

::-webkit-scrollbar-thumb {
  background: var(--sf-edge);
  border-radius: 6px;
}