/* LayerBrick DB console theme for Adminer 4.8.x.
   Goal: calm, spacious admin UI in the Evallot/Spark look (warm paper + clay),
   cohesive in both light and dark. Targets Adminer's real DOM ids/classes. */

:root{
  --paper:#f3efe6; --surface:#ffffff; --surface-2:#faf7f0;
  --ink:#2a2723; --ink-2:#6b6459; --ink-3:#9a9184;
  --clay:#b4552f; --clay-2:#c9714b;
  --line:#e7dfd1; --line-2:#d9cfbd; --menu:#efe9dd;
  --ok:#3f7d52; --ok-bg:#eaf1ea; --err:#c0603a; --err-bg:#f7e7df;
  --side:248px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#17150f; --surface:#201d16; --surface-2:#252118;
    --ink:#efe9dd; --ink-2:#bcb4a4; --ink-3:#8b8474;
    --clay:#d07a4f; --clay-2:#e08a5c;
    --line:#332e24; --line-2:#453e30; --menu:#1c1912;
    --ok:#7fb08c; --ok-bg:#22281f; --err:#e0916f; --err-bg:#2c211b;
  }
}

/* ---- base ---- */
html,body{ background:var(--paper); color:var(--ink); margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
a, a:visited{ color:var(--clay); text-decoration:none; }
a:hover{ color:var(--clay-2); text-decoration:underline; }
abbr{ border:0; }

/* ---- left menu ---- */
#menu{ position:fixed; top:0; left:0; bottom:0; width:var(--side); margin:0;
  background:var(--menu); border-right:1px solid var(--line-2);
  padding:1.1rem 1rem; overflow:auto; box-shadow:none; }
#menu h1{ margin:0 0 1.1rem; font-size:0; line-height:0; border:0; background:none; }
#menu h1 a{ display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.04em;
  color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:8px; padding:.4rem .7rem; }
#menu h1 .version{ color:var(--ink-3); font-weight:400; }
#menu p{ margin:.5rem 0; font-size:.86rem; color:var(--ink-2); }
#menu p.logout{ display:flex; align-items:center; gap:.5rem; margin:.2rem 0 1rem; }
#menu a{ color:var(--ink-2); }
#menu a:hover{ color:var(--clay); }
#dbs, #logins{ margin:.6rem 0; }
#dbs select, #logins select{ width:100%; }
#tables{ margin-top:.4rem; padding:.4rem 0 0; border-top:1px solid var(--line-2);
  font-size:.9rem; line-height:1.9; }
#tables a{ display:inline; }
#tables a.select{ color:var(--ink-3); margin-right:.4rem; }
#tables .message{ background:none; border:0; color:var(--ink-3); padding:.4rem 0; }

/* ---- top breadcrumb ---- */
#breadcrumb{ position:fixed; top:0; left:var(--side); right:0; height:auto; margin:0;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:.7rem 2rem; font-size:.82rem; color:var(--ink-3); z-index:5; }
#breadcrumb a{ color:var(--ink-2); }

/* ---- main content ---- */
#content{ margin:0 0 0 var(--side); padding:3.4rem 2.2rem 4rem; max-width:1180px; }
#content > p{ color:var(--ink-2); }
h2{ font-size:1.5rem; font-weight:600; margin:0 0 1.3rem; padding:0 0 .7rem;
  border-bottom:1px solid var(--line); color:var(--ink); background:none; }
h3{ font-size:1.05rem; font-weight:600; margin:1.6rem 0 .7rem; color:var(--ink); }

/* the row of section actions (Alter database / schema / Privileges etc.) */
p.links, .links{ margin:.2rem 0 1.4rem; }
p.links a, .links a{ display:inline-block; margin:0 1.1rem .3rem 0; }

/* ---- buttons ---- */
input[type=submit], input[type=button], button, .button{
  background:var(--clay); color:#fff; border:1px solid var(--clay);
  border-radius:8px; padding:.46rem .9rem; font-size:.88rem; cursor:pointer; box-shadow:none; }
input[type=submit]:hover, button:hover, .button:hover{ background:var(--clay-2); border-color:var(--clay-2); }
.logout input[type=submit], input[value=Logout]{ background:var(--surface); color:var(--ink-2); border-color:var(--line-2); }
.logout input[type=submit]:hover{ background:var(--surface-2); }

/* ---- inputs ---- */
input, textarea, select{ border:1px solid var(--line-2); border-radius:8px;
  padding:.44rem .55rem; background:var(--surface); color:var(--ink); font-size:.9rem; }
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--clay); box-shadow:0 0 0 3px rgba(180,85,47,.12); }
input[type=checkbox], input[type=radio]{ box-shadow:none; }

/* ---- tables ---- */
table{ border-collapse:separate; border-spacing:0; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:.4rem 0 1.4rem; }
th{ background:var(--surface-2); color:var(--ink-2); font-weight:600; text-align:left;
  border-bottom:1px solid var(--line); padding:.55rem .8rem; }
td{ border-bottom:1px solid var(--line); padding:.5rem .8rem; }
tr:last-child td{ border-bottom:0; }
tr:hover td{ background:var(--surface-2); }

/* ---- messages ---- */
.error{ background:var(--err-bg); color:var(--err); border:1px solid var(--line-2);
  border-radius:10px; padding:.7rem .9rem; margin:.6rem 0; }
.message{ background:var(--ok-bg); color:var(--ok); border:1px solid var(--line-2);
  border-radius:10px; padding:.7rem .9rem; margin:.6rem 0; }

fieldset{ border:1px solid var(--line-2); border-radius:12px; padding:.9rem 1.1rem; margin:.8rem 0; }
legend{ color:var(--ink-2); padding:0 .4rem; }
code, pre, .jush{ background:var(--surface-2); border-radius:6px; }
pre{ padding:.8rem 1rem; border:1px solid var(--line); overflow:auto; }
.active{ font-weight:600; color:var(--ink); }
#lang{ position:fixed; top:.55rem; right:1.2rem; font-size:.8rem; color:var(--ink-3); z-index:6; }
#lang select{ font-size:.8rem; padding:.2rem .4rem; }

@media (max-width:760px){
  #menu{ position:static; width:auto; border-right:0; border-bottom:1px solid var(--line-2); }
  #breadcrumb{ position:static; left:0; }
  #content{ margin:0; padding:1.2rem 1rem 3rem; }
}