/* SilentBase dashboard.
   No external stylesheet, no webfont request, no CDN. This ships into networks
   that have no route to the internet, and a security product that phones out
   for a font is not one. Inter and JetBrains Mono are used when the machine
   already has them and fall back cleanly when it does not. */

:root {
  --bg:        #000000;
  --panel:     #0B0B0F;
  --panel-2:   #101017;
  --line:      #20202A;
  --line-soft: #17171E;

  /* Gloss. A surface is lit from above: a bright hairline on its top edge, a
     fall to near black, and a shadow underneath. Kept as three tokens so every
     panel in the product catches the light the same way. */
  --gloss: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 34%, rgba(255,255,255,0) 62%);
  --sheen: inset 0 1px 0 rgba(255,255,255,.07);
  --lift:  0 1px 2px rgba(0,0,0,.6), 0 8px 26px rgba(0,0,0,.45);
  --ink:       #ECECF1;
  --ink-dim:   #9A9AA8;
  --ink-faint: #6A6A78;
  --accent:    #4ADE9B;
  --accent-dim:#1F7A55;
  --danger:    #FF5D5D;
  --warn:      #F5B23D;
  --radius:    10px;
  --sans: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* A class that sets display beats the browser's own [hidden] rule, so the gate
   stayed on screen with the shell already open behind it. Anything toggled with
   el.hidden needs this to actually disappear. */
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* House rule: never italics. Carry emphasis with weight and space. */
i, em, cite, dfn, address { font-style: normal; }

button, input, textarea, select { font: inherit; color: inherit; }
code, pre, .mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }

/* ------------------------------------------------------------- the mark -- */
.mark {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px;
  background: linear-gradient(150deg, var(--accent), var(--accent-dim));
  position: relative;
}
.mark::after {
  content: ""; position: absolute; inset: 8px 8px auto 8px; height: 2px;
  background: var(--bg); border-radius: 2px;
  box-shadow: 0 5px 0 var(--bg);
}

/* ------------------------------------------------------------------ gate -- */
.gate {
  display: grid; place-items: center; min-height: 100%;
  padding: 24px;
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(74,222,155,.07), transparent 68%),
    var(--bg);
}
.gate-card {
  width: 100%; max-width: 460px;
  background: var(--gloss), var(--panel); border: 1px solid var(--line);
  box-shadow: var(--sheen), var(--lift);
  border-radius: 14px; padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.gate-card h1 { margin: 12px 0 0; font-size: 22px; letter-spacing: -0.01em; }
.gate-card p { margin: 0 0 6px; }
.gate-card label {
  margin-top: 8px; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint);
}
.gate-card textarea, .gate-card input {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px;
  font-family: var(--mono); font-size: 12px; resize: vertical;
}
.gate-card textarea:focus, .gate-card input:focus {
  outline: none; border-color: var(--accent-dim);
}
.gate-error {
  color: var(--danger); font-size: 13px;
  border-left: 2px solid var(--danger); padding-left: 10px;
}
.gate-note { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

/* --------------------------------------------------------------- buttons -- */
.btn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  border-radius: var(--radius); padding: 9px 14px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.btn:hover { border-color: #34343F; background: #1F1F28; }
.btn.primary {
  background: var(--accent); color: #06110C; border-color: transparent;
  font-weight: 600; margin-top: 14px;
}
.btn.primary:hover { background: #5FE8AC; }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 10px; font-size: 12.5px; }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------- layout -- */
#shell { display: grid; grid-template-columns: 232px 1fr; height: 100vh; }

.sidebar {
  background: linear-gradient(180deg, #0D0D12 0%, #08080B 100%);
  border-right: 1px solid var(--line);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.02);
  display: flex; flex-direction: column; padding: 16px 12px;
  min-width: 0;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 4px 6px 18px; }
.brand-name { font-weight: 650; letter-spacing: -0.01em; }
.brand-sub {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;
}

nav { display: flex; flex-direction: column; gap: 2px; }
.nav {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; border-radius: 8px;
  padding: 9px 10px; cursor: pointer; color: var(--ink-dim);
  text-align: start; width: 100%;
}
.nav:hover { background: var(--panel-2); color: var(--ink); }
.nav.on { background: var(--panel-2); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.ico { font-family: var(--mono); width: 16px; color: var(--ink-faint); }
.nav.on .ico { color: var(--accent); }

.sidebar-foot { margin-top: auto; display: flex; gap: 6px; padding-top: 12px; }

main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 52px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; flex: 0 0 auto;
}
.crumb { font-weight: 600; }
.pill {
  font-family: var(--mono); font-size: 11px; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim);
}
.pill.ok { color: var(--accent); border-color: var(--accent-dim); }
.pill.bad { color: var(--danger); border-color: #5A2626; }

.view { flex: 1 1 auto; overflow: auto; padding: 20px; min-width: 0; }

/* ----------------------------------------------------------------- panes -- */
.split { display: grid; grid-template-columns: 236px 1fr; gap: 16px; height: 100%; }
.pane {
  background: var(--gloss), var(--panel); border: 1px solid var(--line);
  box-shadow: var(--sheen), var(--lift);
  border-radius: 12px; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column;
}
.pane-head {
  padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex: 0 0 auto;
}
.pane-head h2 { margin: 0; font-size: 13px; letter-spacing: 0.02em; }
.pane-body { padding: 14px; overflow: auto; flex: 1 1 auto; }
.pane-body.flush { padding: 0; }

.list { display: flex; flex-direction: column; }
.list button {
  background: transparent; border: 0; border-bottom: 1px solid var(--line-soft);
  padding: 9px 14px; text-align: start; cursor: pointer; color: var(--ink-dim);
  font-family: var(--mono); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list button:hover { background: var(--panel-2); color: var(--ink); }
.list button.on { background: var(--panel-2); color: var(--accent); }

/* ---------------------------------------------------------------- tables -- */
.tablewrap { overflow: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td {
  border-bottom: 1px solid var(--line-soft); padding: 8px 12px;
  text-align: start; white-space: nowrap;
  max-width: 380px; overflow: hidden; text-overflow: ellipsis;
}
th {
  position: sticky; top: 0; background: var(--panel-2);
  color: var(--ink-faint); font-weight: 600;
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
}
td { font-family: var(--mono); color: var(--ink-dim); }
tbody tr:hover td { background: #16161D; color: var(--ink); }
td.null { color: var(--ink-faint); }

/* ------------------------------------------------------------------- sql -- */
.sql-editor {
  width: 100%; min-height: 150px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; font-family: var(--mono); font-size: 13px; resize: vertical;
}
.sql-editor:focus { outline: none; border-color: var(--accent-dim); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: 12px; }

.err {
  background: #1C1214; border: 1px solid #4A2226; color: #FFB4B4;
  border-radius: var(--radius); padding: 12px; font-family: var(--mono);
  font-size: 12.5px; white-space: pre-wrap; word-break: break-word;
}

.kv { display: grid; grid-template-columns: 190px 1fr; gap: 8px 16px; align-items: start; }
.kv dt { color: var(--ink-faint); font-size: 12.5px; }
.kv dd { margin: 0; font-family: var(--mono); font-size: 12.5px; word-break: break-all; }

.keybox {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; font-family: var(--mono); font-size: 11.5px;
  word-break: break-all; user-select: all;
}
.warnbox {
  border-left: 2px solid var(--warn); padding: 2px 0 2px 12px;
  color: var(--ink-dim); font-size: 13px;
}

.empty { color: var(--ink-faint); padding: 28px 4px; text-align: center; font-size: 13px; }
.spin { color: var(--ink-faint); padding: 20px 4px; font-size: 13px; }

.toast {
  position: fixed; inset-inline-end: 20px; inset-block-end: 20px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px; font-size: 13px;
  max-width: 380px; z-index: 50;
}
.toast.bad { border-color: #4A2226; color: #FFB4B4; }

/* ---------------------------------------------------------------- arabic -- */
/* Direction is a document-level flip. Everything above uses logical
   properties (inset-inline, text-align: start) so nothing needs a mirror. */
html[dir="rtl"] .nav.on { box-shadow: inset -2px 0 0 var(--accent); }
html[dir="rtl"] .gate-error { border-left: 0; border-right: 2px solid var(--danger); padding: 0 10px 0 0; }
html[dir="rtl"] .warnbox { border-left: 0; border-right: 2px solid var(--warn); padding: 2px 12px 2px 0; }
html[dir="rtl"] .mono, html[dir="rtl"] td, html[dir="rtl"] .keybox { direction: ltr; text-align: start; }

/* An English sentence inside an RTL page has its full stop dragged to the front.
   plaintext lets each paragraph take direction from its own first strong
   character, so mixed Arabic and English copy both read correctly. */
.warnbox, .empty, .faint, .gate-note, .pane-head h2, dd { unicode-bidi: plaintext; }

@media (max-width: 860px) {
  #shell { grid-template-columns: 64px 1fr; }
  .brand > div:last-child, .nav span:not(.ico), .sidebar-foot { display: none; }
  .split { grid-template-columns: 1fr; }
}