/* ═══════════════════════════════════════════════════════════════════════════
   Ontic Adminer Dark Theme — Adminer 5.4.2
   Complete override of default.css.  Every selector from the stock stylesheet
   is accounted for below.  Custom properties mirror the stock --bg/--fg/--dim/
   --lit names so third-party plugins that reference them inherit correctly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stock variable override ── */
html {
  --bg: #0f1117;
  --fg: #e1e4eb;
  --dim: #1a1d27;
  --lit: #252833;
}

/* ── Custom palette ── */
:root {
  color-scheme: dark;
  --border: #3a3f50;
  --text-muted: #9ca0b0;
  --accent: #6366f1;
  --accent-hover: #818cf8;
  --success: #34d399;
  --danger: #f87171;
  --radius: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Fira Code", Menlo, monospace;
}

/* ═══════ Global reset ═══════ */
body {
  font: 14px/1.5 var(--font) !important;
  color: var(--fg);
  background: var(--bg);
  margin: 0;
  min-width: fit-content;
  -webkit-font-smoothing: antialiased;
}

/* ═══════ Links ═══════ */
a              { color: var(--accent); text-decoration: none; }
a:visited      { color: var(--accent); }
a:link:hover,
a:visited:hover { color: var(--accent-hover); text-decoration: none; }
a.text:hover   { text-decoration: none; }
a.jush-help:hover { color: inherit; }

/* ═══════ Headings ═══════ */
h1 {
  font-size: 14px; margin: 0; padding: 0 1em;
  height: 2.6em; line-height: 2.6em;
  border-bottom: 1px solid var(--border);
  font-weight: 500; color: var(--text-muted);
  background: var(--dim);
  letter-spacing: .02em;
}
h2 {
  font-size: 140%; margin: 0 0 16px 0; padding: .7em 1em;
  border-bottom: 1px solid var(--border);
  font-weight: 600; color: var(--fg);
  background: var(--lit);
  border-radius: var(--radius) var(--radius) 0 0;
}
h3 { font-weight: normal; font-size: 125%; margin: 1em 0 0; color: var(--fg); }

/* ═══════ Forms ═══════ */
form { margin: 0; }

/* ═══════ Tables — structure ═══════ */
td table { width: 100%; margin: 0; }
table {
  margin: .8em 20px 0 0; font-size: 90%;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
table, td, th, .js .column {
  border-color: var(--border);
  border-style: solid;
}
td, th {
  border-width: 0 1px 1px 0; padding: .35em .5em; margin: 0;
  color: var(--fg);
}
th {
  background: var(--dim); text-align: left; color: var(--fg);
}
thead          { position: sticky; top: 0; z-index: 2; }
thead th       { text-align: center; padding: .3em .6em; }
thead td,
thead th       { background: var(--lit); color: var(--text-muted); }

/* ═══════ Login form — table.layout ═══════ */
table.layout,
table.layout td,
table.layout th {
  border: none !important;
  background: transparent !important;
}
table.layout th {
  color: var(--text-muted) !important;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .7em 1.2em .7em 0;
  white-space: nowrap;
  vertical-align: middle;
}
table.layout td {
  color: var(--fg) !important;
  padding: .7em 0;
  vertical-align: middle;
}

/* ═══════ Login page — header from #foot ═══════ */
/* On the login page, #menu lives inside #foot at the bottom.
   Pull it to the top as a fixed header bar. On logged-in pages,
   #menu is a direct child of body (not inside #foot) so this
   selector only fires on the login/logout pages. */
#foot > #menu {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100% !important;
  height: auto;
  margin: 0 !important;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  background: var(--dim);
}
#foot > #menu h1 {
  margin: 0; padding: 0 1.2em;
  height: 3em; line-height: 3em;
}
/* Hide the language form inside the login-page menu — it clutters the header */
#foot > #menu > form { display: none; }
/* Hide the empty #foot wrapper so it doesn't take space */
.foot { min-height: 0; }

/* ═══════ Login page — centered card ═══════ */
/* Push content below the fixed header and center */
#content:first-child {
  max-width: 480px;
  margin: 6em auto 0;
  padding: 2em;
}
/* Login h2 — clean up for centered layout */
body > #content:first-child h2 {
  margin: 0 0 8px 0;
  padding: .5em 0;
  background: transparent;
  border-bottom: none;
  border-radius: 0;
  font-size: 22px;
  color: var(--fg);
}

/* Login form card wrapper */
#content > form > table.layout {
  background: var(--dim) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 1.5em 2em !important;
  margin: 1em 0 0 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
#content > form > table.layout td,
#content > form > table.layout th {
  background: transparent !important;
}
#content > form > table.layout input[type="submit"] {
  margin-top: .5em;
  width: 100%;
  padding: 10px 18px;
  font-size: 14px;
}

/* ═══════ Fieldsets ═══════ */
fieldset {
  display: inline; vertical-align: top;
  padding: .6em .9em; margin: .8em .5em 0 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--dim);
}
legend { color: var(--text-muted); padding: 0 6px; font-size: 13px; }

/* ═══════ Paragraphs ═══════ */
p { margin: .8em 20px 0 0; color: var(--fg); }

/* ═══════ Images ═══════ */
img { vertical-align: middle; border: 0; }
td img { max-width: 200px; max-height: 200px; }

/* ═══════ Row hover ═══════ */
tbody tr:hover td,
tbody tr:hover th { background: rgba(99, 102, 241, 0.08) !important; }

/* ═══════ Odd/even rows ═══════ */
.odds tbody tr            { background: var(--bg); }
.odds tbody tr:nth-child(2n) { background: rgba(255, 255, 255, 0.02); }

/* ═══════ Checkable rows ═══════ */
.js .checkable .checked td,
.js .checkable .checked th { background: var(--lit); }

/* ═══════ Code & pre ═══════ */
code {
  font-size: 100%; padding: 2px 5px;
  background: var(--lit); border-radius: 3px;
  font-family: var(--font-mono);
  color: var(--fg);
}
pre        { margin: 1em 0 0; color: var(--fg); }
td pre     { margin: 0; }
pre, textarea { font: 13px/1.4 var(--font-mono); }
pre.jush   { background: var(--bg); }
pre code   { display: block; font-size: 100%; background: transparent; }

/* ═══════ Inputs & selects ═══════ */
input, textarea { box-sizing: border-box; }
input, select   { vertical-align: middle; }
input[type="radio"] { vertical-align: text-bottom; }

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea {
  font: 13px var(--font);
  color: var(--fg) !important;
  background: var(--lit) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  padding: 7px 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* Select arrow */
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca0b0'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
}
select option { background: var(--dim); color: var(--fg); }

/* Checkbox / radio */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--accent); }

/* Input state classes */
input.default   { box-shadow: 1px 1px 1px rgba(99,102,241,.3); }
input.required,
input.maxlength { box-shadow: 1px 1px 1px var(--danger); }
input.wayoff    { left: -1000px; position: absolute; }

/* ═══════ Buttons ═══════ */
input[type="submit"],
input[type="button"],
button:not(.icon) {
  font: 13px/1 var(--font); font-weight: 500;
  color: #fff !important;
  background: var(--accent) !important;
  border: none !important; border-radius: var(--radius);
  padding: 8px 18px; cursor: pointer;
  transition: background .15s;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:not(.icon):hover {
  background: var(--accent-hover) !important;
}

/* Icon buttons (move, add, remove etc.) */
button.icon,
.icon {
  width: 18px; height: 18px;
  background-color: var(--accent) !important;
  border: 0; padding: 0; vertical-align: middle;
  border-radius: 3px;
}
.icon span { display: none; }
.icon:hover { background-color: var(--accent-hover) !important; }

/* ═══════ Labels ═══════ */
label { color: var(--fg); cursor: pointer; }

/* ═══════ Utility classes ═══════ */
.block   { display: block; }
.version { color: var(--text-muted); font-size: 62%; }
.js .hidden, .nojs .jsonly { display: none; }
.nowrap td, .nowrap th, td.nowrap, p.nowrap { white-space: pre; }
.wrap td { white-space: normal; }
.time    { color: var(--text-muted); font-size: 70%; }
.function, .number, .datetime { text-align: right; }
.type    { width: 15ex; }
.options select, .options input { width: 20ex; }
.view    { font-style: italic; }
.active  { font-weight: bold; }
.size    { width: 7ex; }
.help    { cursor: help; }
.loadmore { margin-left: 1ex; }

/* ═══════ Data-type colors (table cells) ═══════ */
.char   { color: #6ee7b7; }
.date   { color: #c4b5fd; }
.enum   { color: #67e8f9; }
.binary { color: var(--danger); }

/* ═══════ SQL area ═══════ */
.sqlarea {
  width: 98%;
  font: 13px/1.4 var(--font-mono) !important;
  color: var(--fg) !important;
  background: var(--lit) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  padding: 12px;
  min-height: 120px;
  resize: vertical;
}
.sql-footer { margin-bottom: 2.5em; }
.explain table { white-space: pre; }

/* ═══════ Sticky column ═══════ */
.js .column {
  position: absolute; background: var(--lit);
  padding: .27em 1ex .33em 0; margin-top: -.37em;
  border-width: 1px 1px 1px 0; border-radius: 0 8px 8px 0;
  color: var(--fg);
}

/* ═══════ Messages ═══════ */
.error {
  color: var(--danger) !important;
  background: rgba(248, 113, 113, 0.08) !important;
  padding: .6em .9em; margin: 1em 20px 0 0;
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: var(--radius);
}
.error b { background: transparent; font-weight: normal; }

.message, p.message {
  color: var(--success) !important;
  background: rgba(52, 211, 153, 0.08) !important;
  padding: .6em .9em; margin: 1em 20px 0 0;
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: var(--radius);
}
.message table { color: var(--fg); background: var(--bg); }

/* ═══════ Footer / sticky bottom bar ═══════ */
.footer {
  position: sticky; bottom: 0;
  margin: 23px -20px .5em 0;
  box-shadow: 0 -5px 10px 10px var(--bg);
}
.footer > div { background: var(--bg); padding: 0 0 .5em; }
.footer fieldset { margin-top: 0; }

/* ═══════ Pagination links ═══════ */
.links a {
  white-space: nowrap; margin-right: 10px;
  color: var(--text-muted) !important;
  padding: 4px 10px;
  background: var(--lit);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  display: inline-block;
}
.links a:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent);
}

/* ═══════ Logout ═══════ */
.logout {
  margin-top: .5em; position: absolute; top: 0; right: 0;
  background-color: var(--bg);
  box-shadow: 0 0 5px 5px var(--bg);
}
.logout a { color: var(--text-muted) !important; }
.logout a:hover { color: var(--accent-hover) !important; }

/* ═══════ Sidebar menu ═══════ */
#menu {
  position: absolute; margin: 10px 0 0; top: 2em; left: 0; width: 19em;
  background: var(--dim); color: var(--fg);
}
#menu p, #logins, #tables {
  padding: .8em 1em; margin: 0;
  border-bottom: 1px solid var(--border);
}
#logins li, #tables li { list-style: none; }
#dbs { overflow: hidden; }
#logins, #tables { white-space: nowrap; overflow: hidden; }
#logins a, #tables a, #tables span {
  background: var(--dim); color: var(--fg);
}
#tables a { color: var(--text-muted) !important; }
#tables a:hover { color: var(--fg) !important; }
#tables .active { color: var(--accent) !important; font-weight: bold; }
#menu select { width: 100%; margin-top: 4px; }

/* ═══════ Content area ═══════ */
/* Logged-in pages: offset for sidebar */
#content {
  margin: 2em 0 0 21em; padding: 10px 20px 20px 0;
  color: var(--fg);
}
/* Login page: #content is the first child of body (before #foot),
   override the sidebar margin — centered card handles positioning */
body > #content:first-child {
  margin-left: auto;
  margin-right: auto;
}

/* ═══════ Language selector — tucked away ═══════ */
#lang {
  position: absolute; top: 0; right: 80px; padding: .3em .8em;
  color: var(--text-muted); font-size: 12px;
  z-index: 10; line-height: 2.6em;
}
#lang label { color: var(--text-muted); font-size: 12px; }
#lang select {
  font-size: 11px !important; padding: 3px 20px 3px 6px !important;
  background: var(--dim) !important;
}

/* ═══════ Menu toggle (mobile) ═══════ */
#menuopen { display: none; }

/* ═══════ Breadcrumb ═══════ */
#breadcrumb {
  white-space: nowrap; position: absolute; top: 0; left: 21em;
  background: var(--dim); height: 2em; line-height: 1.8em;
  padding: 0 1em; margin: 0 0 0 -18px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

/* ═══════ Logo / h1 — rebrand ═══════ */
#logo { display: none; }
#h1 {
  color: var(--fg) !important; text-decoration: none; font-style: normal;
  font-weight: 600; letter-spacing: .03em;
}
#h1::after { content: " — Ontic"; color: var(--text-muted); font-weight: 400; }
#version { display: none; }

/* ═══════ Schema designer ═══════ */
#schema { margin-left: 60px; position: relative; user-select: none; -webkit-user-select: none; }
#schema .table {
  border: 1px solid var(--border); padding: 0 2px;
  cursor: move; position: absolute;
  background: var(--dim); color: var(--fg);
}
#schema .references { position: absolute; }

/* ═══════ Help tooltip ═══════ */
#help {
  position: absolute; border: 1px solid var(--border);
  background: var(--dim); padding: 5px;
  font-family: var(--font-mono); z-index: 1;
  color: var(--fg);
}

/* ═══════ Target highlight ═══════ */
:target { background: rgba(99, 102, 241, 0.12); }

/* ═══════ Icons (background sprites) — keep stock images, just fix colors ═══════ */
.icon-up, .icon-down, .icon-plus, .icon-cross, .icon-move {
  /* icons are navy-on-transparent; invert for dark mode */
  filter: invert(1) hue-rotate(180deg);
}

/* ═══════ Responsive ═══════ */
@media all and (max-width: 800px) {
  .pages { left: auto; }
  .js .logout {
    top: 1.667em;
    background-color: var(--dim);
    box-shadow: 0 0 5px 5px var(--dim);
  }
  #menu {
    position: static; width: auto; min-width: 23em;
    background: var(--bg); border: 1px solid var(--border);
    margin-top: 9px;
    box-shadow: 0 0 20px -3px rgba(0, 0, 0, 0.5);
  }
  #content { margin-left: 10px !important; }
  #lang { position: static; }
  #breadcrumb { left: 48px !important; }
  .js #foot { position: absolute; top: 2em; left: 0; }
  .js .foot { display: none; }
  .js #menuopen { display: block; position: absolute; top: 3px; left: 6px; }
  .nojs #menu { position: static; }
}

/* ═══════ Print ═══════ */
@media print {
  #lang, #menu, .logout { display: none; }
  #content { margin-left: 1em; }
  body { background: #fff !important; color: #000 !important; }
  table { border-color: #ccc; }
  th, thead td, thead th { background: #f5f5f5 !important; color: #333 !important; }
  td, th { color: #000; }
  a { color: #333 !important; }
  .nowrap td, .nowrap th, td.nowrap { white-space: normal; }
}

/* ═══════ JUSH syntax highlighting (dark palette) ═══════ */
.jush {
  --text-color: #e1e4eb;
  --bg-color: #0f1117;
  --php-color: #c4b5fd;
  --string-color: #6ee7b7;
  --string-plain-color: #34d399;
  --keyword-color: #93c5fd;
  --identifier-color: #fca5a5;
  --value-color: #c4b5fd;
  --number-color: #67e8f9;
  --attribute-color: #5eead4;
  --js-bg-color: rgba(147, 197, 253, 0.05);
  --css-bg-color: rgba(250, 204, 21, 0.05);
  --php-bg-color: rgba(196, 181, 253, 0.05);
  --php-sql-bg-color: rgba(252, 165, 165, 0.08);
}
.jush { color: var(--text-color); white-space: pre; }
.jush-htm_com, .jush-com, .jush-com_code, .jush-one,
.jush-php_doc, .jush-php_com, .jush-php_one,
.jush-js_one, .jush-js_doc { color: #6b7280; }

/* ═══════ Page footer ═══════ */
body::after {
  content: "Ontic Database Admin  ·  EC2 & Railway PostgreSQL";
  display: block;
  text-align: center;
  padding: 3em 1em 2em;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: .03em;
  opacity: .6;
}

/* ═══════ Scrollbar ═══════ */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track  { background: var(--bg); }
::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }