/* ==========================================================================
   ECOSSISTEMA SUPER DBA — design system TUI (Fase 1, estático)
   Paleta do prompt: preto, grafite, verde terminal, branco, azul discreto.
   Arquivo próprio: não importa nada do portal (acoplamento zero).
   ========================================================================== */
:root {
  --eco-bg: #0B0D10;
  --eco-panel: #14171C;
  --eco-panel-2: #1A1F26;
  --eco-line: #2A313B;
  --eco-line-soft: #1E242D;
  --eco-fg: #E6EDF3;
  --eco-dim: #8B949E;
  --eco-faint: #5B6570;
  --eco-green: #3FB950;
  --eco-green-hi: #7EE787;
  --eco-blue: #58A6FF;
  --eco-amber: #D29922;
  --eco-red: #F85149;
  --eco-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --eco-r: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--eco-bg);
  background-image:
    linear-gradient(rgba(88, 166, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 166, 255, .035) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--eco-fg);
  font-family: var(--eco-mono);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100svh;
}
::selection { background: rgba(63, 185, 80, .35); }
a { color: var(--eco-blue); }

/* ---------- barra superior ---------- */
.etop {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--eco-line);
  padding: 8px 16px;
  color: var(--eco-green-hi);
  font-size: 12px;
  position: sticky; top: 0; z-index: 30;
  background: rgba(11, 13, 16, .92);
  backdrop-filter: blur(6px);
}
.etop__title { font-weight: 700; letter-spacing: .06em; }
.etop__sp { flex: 1; }
.etop__clock { color: var(--eco-dim); font-variant-numeric: tabular-nums; }
.burger {
  display: none; background: none; border: 1px solid var(--eco-line);
  border-radius: 6px; color: var(--eco-green-hi); cursor: pointer;
  font-family: var(--eco-mono); font-size: 14px; padding: 4px 10px;
}

/* ---------- moldura ---------- */
.ewrap { max-width: 1280px; margin: 0 auto; padding: 16px clamp(12px, 3vw, 28px) 48px; }

/* ---------- banner ---------- */
.ebanner {
  border: 1px solid var(--eco-blue);
  border-radius: var(--eco-r);
  background: linear-gradient(180deg, #10141A, #0C0F13);
  padding: clamp(16px, 3vw, 32px);
  text-align: center;
  overflow-x: auto;
}
.ebanner pre {
  margin: 0; color: var(--eco-green-hi);
  font-size: clamp(6px, 1.35vw, 13px);
  line-height: 1.25;
  text-shadow: 0 0 18px rgba(63, 185, 80, .35);
  white-space: pre;
}
.ebanner__meta {
  margin: 14px 0 0; color: var(--eco-dim); font-size: 12px;
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
}
.ebanner__meta b { color: var(--eco-fg); font-weight: 600; }

/* ---------- stats ---------- */
.estats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin: 16px 0 0;
}
.estat {
  border: 1px solid var(--eco-line); border-radius: var(--eco-r);
  background: var(--eco-panel); padding: 12px 14px;
}
.estat__num { font-size: 24px; font-weight: 700; color: var(--eco-green-hi); font-variant-numeric: tabular-nums; }
.estat__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--eco-dim); margin-top: 2px; }

/* ---------- layout menu + status ---------- */
/* Coluna unica: o painel lateral de status das VMs foi removido — era mock
   sem backend e nao ia ser usado. O menu ocupa a largura toda. */
.elayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }

/* painel com legenda (estilo fieldset TUI) */
.epanel { position: relative; border: 1px solid var(--eco-line); border-radius: var(--eco-r); background: var(--eco-panel); }
.epanel > .eleg {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--eco-bg); padding: 0 10px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--eco-blue);
  white-space: nowrap;
}
.emenu { padding: 22px clamp(12px, 2vw, 22px) 18px; }
.emenu__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.eblock { margin: 0 0 18px; }
.eblock > h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .12em; color: var(--eco-green); font-weight: 700; }
.eopt {
  display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: baseline;
  width: 100%; background: none; border: 0; cursor: pointer;
  color: var(--eco-fg); font-family: var(--eco-mono); font-size: 13px;
  text-align: left; padding: 3px 6px; border-radius: 4px; text-decoration: none;
}
a.eopt { display: grid; }
.eopt:hover, .eopt:focus-visible { background: rgba(63, 185, 80, .12); outline: none; }
.eopt__key { color: var(--eco-amber); font-weight: 700; white-space: nowrap; }
.eopt__sub { display: block; color: var(--eco-faint); font-size: 12px; }
.eopt[disabled] { cursor: not-allowed; opacity: .55; }

/* ---------- status ---------- */
.estatus { padding: 22px 14px 14px; align-self: start; }
.estatus__group { margin-bottom: 12px; }
.estatus__group > h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: .12em; color: var(--eco-green); }
.evm {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: none; border: 0; cursor: pointer;
  color: var(--eco-fg); font-family: var(--eco-mono); font-size: 12px;
  padding: 3px 6px; border-radius: 4px; text-align: left; text-decoration: none;
}
.evm:hover { background: rgba(88, 166, 255, .12); }
.evm__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  border-radius: 4px; padding: 1px 7px; white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: "● "; }
.badge--offline { color: #FF9D97; border-color: rgba(248, 81, 73, .5); background: rgba(248, 81, 73, .12); }
.badge--online { color: var(--eco-green-hi); border-color: rgba(63, 185, 80, .5); background: rgba(63, 185, 80, .12); }
.badge--starting, .badge--stopping { color: var(--eco-amber); border-color: rgba(210, 153, 34, .5); background: rgba(210, 153, 34, .12); }

/* ---------- rodapé ---------- */
.efoot {
  margin-top: 16px; border: 1px dashed var(--eco-line); border-radius: var(--eco-r);
  padding: 12px 16px; color: var(--eco-dim); font-size: 12px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
}
.efoot .mock { color: var(--eco-amber); border: 1px solid rgba(210, 153, 34, .5); border-radius: 4px; padding: 0 8px; font-size: 11px; }

/* ---------- toast ---------- */
.etoast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--eco-panel-2); border: 1px solid var(--eco-blue); color: var(--eco-fg);
  border-radius: 8px; padding: 10px 18px; font-size: 13px; opacity: 0;
  transition: opacity .2s ease, transform .2s ease; pointer-events: none;
  max-width: min(92vw, 560px); text-align: center; z-index: 50;
}
.etoast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- tabelas (vm-manager) ---------- */
.etable { width: 100%; border-collapse: collapse; font-size: 13px; }
.etable th, .etable td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--eco-line-soft); }
.etable th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--eco-dim); font-weight: 600; }
.etable tr:hover td { background: rgba(88, 166, 255, .06); }
.ebtn {
  font-family: var(--eco-mono); font-size: 12px; cursor: pointer;
  background: var(--eco-panel-2); color: var(--eco-fg);
  border: 1px solid var(--eco-line); border-radius: 6px; padding: 5px 12px;
}
.ebtn:hover { border-color: var(--eco-green); color: var(--eco-green-hi); }
.ebtn--primary { border-color: var(--eco-green); color: var(--eco-green-hi); }
.ebtn--danger:hover { border-color: var(--eco-red); color: #FF9D97; }
.ebtn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- terminal ---------- */
.ewrap--wide { max-width: min(1760px, 100% - 16px); }
.eterm { background: #0A0C0E; border: 1px solid var(--eco-line); border-radius: var(--eco-r); overflow: hidden; }
.eterm__bar {
  display: flex; align-items: center; gap: 8px;
  background: #161B22; border-bottom: 1px solid var(--eco-line);
  padding: 8px 12px; font-size: 12px; color: var(--eco-dim);
}
.eterm__dots { display: flex; gap: 6px; }
.eterm__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.eterm__dots i:nth-child(1) { background: #F85149; }
.eterm__dots i:nth-child(2) { background: #D29922; }
.eterm__dots i:nth-child(3) { background: #3FB950; }
#xterm { height: clamp(560px, 78svh, 920px); padding: 12px; }
#xterm .xterm-viewport { scrollbar-width: thin; }
.eterm__fallback { padding: 16px; }
.eterm__fallback pre {
  background: #000; border: 1px solid var(--eco-line-soft); border-radius: 6px;
  padding: 14px; overflow-x: auto; color: var(--eco-green-hi); font-size: 13px;
}

/* ---------- responsivo: menu vira drawer ---------- */
@media (max-width: 980px) {
  .elayout { grid-template-columns: minmax(0, 1fr); }
  .estatus { order: 2; }
}
@media (max-width: 720px) {
  .burger { display: block; }
  .emenu__cols { grid-template-columns: 1fr; }
  .estats { grid-template-columns: repeat(2, 1fr); }
  #navDrawer {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 340px); z-index: 40;
    background: var(--eco-panel); border-right: 1px solid var(--eco-line);
    transform: translateX(-105%); transition: transform .22s ease;
    overflow-y: auto; padding: 18px 14px;
  }
  body.drawer-on #navDrawer { transform: none; }
  body.drawer-on::after {
    content: ''; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .55);
  }
}
@media (min-width: 721px) { #navDrawer { display: contents; } }

/* ---------- gráficos SVG (dashboard) ---------- */
.echarts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.echart { padding: 22px clamp(12px, 2vw, 22px) 18px; }
.echart h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--eco-dim); }
.echart svg { width: 100%; height: auto; display: block; }
.echart .eleg-t { fill: var(--eco-dim); font-size: 11px; }
.echart .eleg-v { fill: var(--eco-fg); font-size: 12px; font-weight: 700; }
@media (max-width: 720px) { .echarts { grid-template-columns: 1fr; } }

/* ---------- runbooks (operacoes/labs) ---------- */
.erun { padding: 22px clamp(12px, 2vw, 22px) 18px; margin-top: 16px; }
.erun h2 { margin: 0 0 4px; font-size: 16px; color: var(--eco-green-hi); }
.erun h2 .etag { color: var(--eco-faint); font-size: 11px; letter-spacing: .1em; margin-left: 8px; }
.erun p { color: var(--eco-dim); font-size: 13px; margin: 4px 0 10px; max-width: 90ch; }
.erun h5 { margin: 14px 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--eco-blue); }
.erun ol, .erun ul { margin: 0; padding-left: 20px; font-size: 13px; }
.erun li { margin-bottom: 4px; }
.erun code { background: #000; border: 1px solid var(--eco-line-soft); border-radius: 4px; padding: 0 6px; font-size: 12px; color: var(--eco-green-hi); }
.erun pre {
  background: #000; border: 1px solid var(--eco-line-soft); border-radius: 6px;
  padding: 12px 14px; overflow-x: auto; font-size: 12px; color: var(--eco-fg);
}
.erun table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.erun th, .erun td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--eco-line-soft); }
.erun th { color: var(--eco-dim); text-transform: uppercase; font-size: 10px; letter-spacing: .1em; }

/* ==========================================================================
   Ponte visual com o portal (login gate v1.1)
   Traz marca, tipografia e botões do portal para dentro do TUI sem matar
   a identidade de terminal: o mono continua no corpo, Poppins nos títulos.
   ========================================================================== */
:root {
  --eco-brand: #FF8A4C;
  --eco-brand-2: #2ED8C3;
  --eco-info: #4B93FF;
  --eco-font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --eco-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

h1, h2, .ehero__title, .estat__num { font-family: var(--eco-font-display), var(--eco-mono); }

/* ---------- marca + sessão no topo ---------- */
.ebrand {
  display: flex; align-items: center; gap: 10px;
  color: var(--eco-fg); text-decoration: none; white-space: nowrap;
}
.ebrand img { width: 30px; height: 30px; border-radius: 50%; display: block; }
.ebrand span { font-family: var(--eco-font-display); font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1.1; }
.ebrand span b { color: var(--eco-brand); font-weight: 800; }
.ebrand small { display: block; font-family: var(--eco-mono); font-size: 10px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--eco-dim); }
.euser {
  font-size: 11px; color: var(--eco-green-hi);
  border: 1px solid rgba(63, 185, 80, .5); border-radius: 100px; padding: 2px 10px;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.euser::before { content: "● "; }
.esair {
  font-size: 12px; color: var(--eco-fg); text-decoration: none;
  border: 1px solid var(--eco-line); border-radius: 6px; padding: 4px 12px;
  background: var(--eco-panel-2); white-space: nowrap;
}
.esair:hover { border-color: var(--eco-brand); color: var(--eco-brand); }
.esair--ghost { background: none; }

/* ---------- herói do hub (estilo portal, alma terminal) ---------- */
.ehero { text-align: center; }
.ehero__eyebrow {
  margin: 0 0 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--eco-brand-2);
}
.ehero__title {
  margin: 0 0 8px; font-size: clamp(1.7rem, 4.5vw, 2.9rem); font-weight: 800;
  letter-spacing: .02em; color: var(--eco-fg); line-height: 1.1;
}
.ehero__title span {
  background: linear-gradient(100deg, var(--eco-brand), #E8B33C);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ehero__claim { margin: 0 0 4px; color: var(--eco-dim); font-size: 13px; font-family: var(--eco-font-body); }

/* ---------- login ---------- */
.elogin { display: grid; place-items: center; padding: 32px 0; }
.elogin__card { width: min(480px, 100%); padding: 30px clamp(18px, 4vw, 32px) 26px; }
.elogin__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.elogin__marca img { width: 44px; height: 44px; border-radius: 50%; }
.elogin__marca b { font-family: var(--eco-font-display); font-size: 15px; letter-spacing: .03em; display: block; }
.elogin__marca span { font-size: 11px; color: var(--eco-dim); }
.elogin__card h1 { font-size: 1.4rem; margin: 0 0 4px; }
.elogin__sub { color: var(--eco-dim); font-size: 13px; font-family: var(--eco-font-body); margin: 0 0 18px; }
.elogin form { display: grid; gap: 14px; margin-top: 6px; }
.ecampo { display: grid; gap: 6px; }
.ecampo label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--eco-dim); }
.ecampo input {
  width: 100%; padding: 10px 12px; background: #000; color: var(--eco-fg);
  border: 1px solid var(--eco-line); border-radius: 8px;
  font-family: var(--eco-mono); font-size: 14px;
}
.ecampo input:focus-visible { outline: 2px solid var(--eco-brand); outline-offset: 1px; border-color: transparent; }
.e-erro {
  display: none; font-size: 13px; color: #FF9D97;
  background: rgba(248, 81, 73, .1); border: 1px solid rgba(248, 81, 73, .35);
  border-radius: 8px; padding: 10px 14px;
}
.e-erro.is-on { display: block; }
.e-ok {
  margin-top: 16px; font-size: 13px; color: var(--eco-green-hi);
  background: rgba(63, 185, 80, .08); border: 1px solid rgba(63, 185, 80, .35);
  border-radius: 8px; padding: 12px 14px;
}
.elogin__nota { font-size: 12px; color: var(--eco-faint); margin: 14px 0 0; }
.elogin__nota a { color: var(--eco-dim); }
.ebtn--block { width: 100%; padding: 10px 12px; font-size: 13px; }

/* ---------- cards com respiro do portal ---------- */
.estat { transition: border-color .15s ease; }
.estat:hover { border-color: var(--eco-brand); }
.eopt:hover, .eopt:focus-visible { background: rgba(255, 138, 76, .1); }

/* ==========================================================================
   Ponte bonita: cards de ambiente com a cor de cada tecnologia
   ========================================================================== */
.ecards { display: grid; gap: 10px; }
.ecard {
  --accent: var(--eco-brand);
  position: relative;
  display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 18px 14px 20px;
  border: 1px solid var(--eco-line); border-radius: 12px;
  background: linear-gradient(180deg, var(--eco-panel-2), var(--eco-panel));
  color: var(--eco-fg); text-decoration: none; overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.ecard::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.ecard:hover, .ecard:focus-visible {
  transform: translateY(-2px); border-color: var(--accent); outline: none;
  box-shadow: 0 12px 32px -14px var(--accent);
}
.ecard__key {
  font-family: var(--eco-mono); font-size: 12px; font-weight: 700;
  color: var(--accent); border: 1px solid var(--eco-line); border-radius: 8px;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .35);
  transition: border-color .16s ease;
}
.ecard:hover .ecard__key { border-color: var(--accent); }
.ecard__name {
  display: block; font-family: var(--eco-font-display); font-size: 1.02rem;
  font-weight: 700; letter-spacing: .01em;
}
.ecard__name b { color: var(--accent); font-weight: 800; }
.ecard__sub {
  display: block; font-family: var(--eco-mono); font-size: 12px;
  color: var(--eco-dim); margin-top: 2px;
}
.ecard__go {
  font-size: 20px; color: var(--eco-faint);
  transition: transform .16s ease, color .16s ease;
}
.ecard:hover .ecard__go { transform: translateX(4px); color: var(--accent); }
.ecard--ghost { border-style: dashed; }
.ecard--ghost .ecard__name b { color: inherit; }

/* ---------- herói com brilho ---------- */
.ehero { position: relative; overflow: hidden; }
.ehero::after {
  content: ''; position: absolute; inset: -40% -10% auto; height: 180%;
  background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(255, 138, 76, .12), transparent 70%);
  pointer-events: none;
}
.ehero__eyebrow, .ehero__title, .ehero__claim, .ebanner__meta { position: relative; }

/* ---------- status com ponto por tecnologia ---------- */
.edot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px;
  box-shadow: 0 0 8px currentColor;
}
.estatus__group > h4 { display: flex; align-items: center; }
.evm { border: 1px solid transparent; }
.evm:hover { border-color: var(--eco-line); }

/* ---------- terminal com abas (tela quase cheia) ---------- */
.ewrap--term { max-width: none; padding: 10px clamp(8px, 1.2vw, 18px) 8px; display: flex; flex-direction: column; height: calc(100svh - 52px); min-height: 520px; }
.ewrap--term .efoot { margin-top: 8px; padding-top: 6px; flex: 0 0 auto; }
.eterm { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.eterm__sp { flex: 1; }
.eterm__hint { font-size: 11px; opacity: .8; white-space: nowrap; }
.eterm__max, .eterm__new {
  background: #0D1117; color: var(--eco-fg); border: 1px solid var(--eco-line); border-radius: 6px;
  cursor: pointer; font-family: var(--eco-mono); font-size: 14px; line-height: 1; padding: 4px 9px;
}
.eterm__max:hover, .eterm__new:hover:not([disabled]) { border-color: var(--eco-green-hi); color: var(--eco-green-hi); }
.eterm__new[disabled] { opacity: .4; cursor: not-allowed; }
.eterm__tabsbar { display: flex; align-items: stretch; gap: 6px; background: #0D1117; border-bottom: 1px solid var(--eco-line); padding: 6px 8px 0; }
.eterm__tabs { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.eterm__tab { display: flex; align-items: center; background: #161B22; border: 1px solid var(--eco-line); border-bottom: 0; border-radius: 6px 6px 0 0; flex: 0 0 auto; max-width: 240px; }
.eterm__tab.is-on { background: #0A0C0E; border-color: var(--eco-green-hi); }
.eterm__tabbtn { background: none; border: 0; color: var(--eco-dim); cursor: pointer; font-family: var(--eco-mono); font-size: 12px; padding: 7px 4px 7px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eterm__tab.is-on .eterm__tabbtn { color: var(--eco-fg); }
.eterm__tabx { background: none; border: 0; color: var(--eco-dim); cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 9px; border-radius: 4px; }
.eterm__tabx:hover { color: #FF9D97; }
.eterm__sel { align-self: center; background: #0D1117; color: var(--eco-fg); border: 1px solid var(--eco-line); border-radius: 6px; font-family: var(--eco-mono); font-size: 12px; padding: 4px 6px; margin-bottom: 4px; max-width: 150px; }
.eterm__new { align-self: center; margin-bottom: 4px; }
.eterm #xterm { flex: 1 1 auto; height: auto; min-height: 0; padding: 0; position: relative; }
.eterm__pane { position: absolute; inset: 0; padding: 10px 12px; }
.eterm__pane[hidden] { display: none; }
.eterm--max { position: fixed; inset: 0; z-index: 60; border-radius: 0; border: 0; }
body.term-max { overflow: hidden; }
@media (max-width: 720px) { .eterm__hint { display: none; } .eterm__sel { max-width: 110px; } }