@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

body {
  background: #06080a;
  color: #e2e8f0;
  font-family: 'IBM Plex Sans', sans-serif;
  margin: 0;
}

/* Layout real do dashboard (genesis-plug/grade de pipelines) vive em
   app/views/pipelines/_genesis_style.html.erb (content_for :head) — porta
   fiel de /root/tmp/eva-connectors/genesis-plug.html, não duplicar aqui. */

/* --- Devise (login / senha) --- */
.auth-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  width: 100%;
  max-width: 360px;
  background: #0d1116;
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 8px;
  padding: 28px 28px 24px;
}
.auth-card h1 { font-size: 18px; margin: 14px 0 20px; color: #e2e8f0; }
.auth-card .field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.auth-card .field.check { flex-direction: row; align-items: center; gap: 8px; }
.auth-card label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #94a3b8; letter-spacing: .04em; }
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  background: #13181f;
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 4px;
  padding: 9px 10px;
  color: #e2e8f0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
}
.auth-card input:focus { outline: none; border-color: #e11d48; }
.auth-card .actions { margin-top: 18px; }
.auth-card input[type="submit"] {
  width: 100%;
  background: #e11d48;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .05em;
}
.auth-card input[type="submit"]:hover { background: #be123c; }
.auth-card .links { margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.auth-card .links a { color: #64748b; }
.auth-card p.notice, .auth-card p.alert {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 4px;
  margin: 0 0 14px;
}
.auth-card p.alert { background: rgba(239,68,68,.12); color: #ef4444; border: 1px solid rgba(239,68,68,.4); }
.auth-card p.notice { background: rgba(0,255,157,.1); color: #00ff9d; border: 1px solid rgba(0,255,157,.4); }

/* --- Flash (renderizado no layout, fora de qualquer card) --- */
.flash-notice, .flash-alert {
  max-width: 1100px;
  margin: 12px auto 0;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.flash-notice { background: rgba(0,255,157,.1); color: #00ff9d; border: 1px solid rgba(0,255,157,.4); }
.flash-alert { background: rgba(239,68,68,.12); color: #ef4444; border: 1px solid rgba(239,68,68,.4); }

.auth-card #error_explanation {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.4);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #ef4444;
}
.auth-card #error_explanation h2 { font-size: 12px; margin: 0 0 6px; }
.auth-card #error_explanation ul { margin: 0; padding-left: 18px; }
.auth-card small { color: #64748b; font-size: 11px; }

/* --- Console (telas de cadastro: conectores, conexões, usuários, tenants) ---
   Mesmos tokens do genesis-plug (_genesis_style.html.erb), mas o CSS de lá é
   uma porta 1:1 do HTML original e não deve ser editado — por isso as classes
   de CRUD vivem aqui, num arquivo global. */
body.console-page { padding: 0; }

.console { width: 100%; max-width: 1140px; margin: 0 auto; padding: 20px 16px 60px; }
.console h1 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
  color: #e2e8f0; margin: 0;
}
.console h1 small { display: block; font-size: 11px; letter-spacing: .04em; text-transform: none; color: #64748b; margin-top: 5px; font-weight: 400; }
.console-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 8px 0 22px; }
.console-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Navegação principal */
.nav-bar {
  max-width: 1140px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(148,163,184,.14);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
}
.nav-bar .brand { display: flex; align-items: center; gap: 8px; color: #e2e8f0; font-weight: 700; letter-spacing: .1em; text-decoration: none; }
.nav-bar .brand img { width: 22px; height: 22px; }
.nav-bar nav { display: flex; gap: 14px; flex: 1; }
.nav-bar nav a { color: #64748b; text-decoration: none; letter-spacing: .06em; text-transform: uppercase; padding: 3px 0; border-bottom: 1px solid transparent; }
.nav-bar nav a:hover { color: #e2e8f0; }
.nav-bar nav a.on { color: #00ff9d; border-bottom-color: #00ff9d; }
.nav-bar .who { color: #475569; display: flex; align-items: center; gap: 10px; }
.nav-bar select {
  background: #13181f; border: 1px solid rgba(148,163,184,.25); color: #94a3b8;
  border-radius: 3px; padding: 3px 6px; font-family: inherit; font-size: 11px;
}
.nav-bar .badge { background: rgba(245,158,11,.16); color: #f59e0b; padding: 2px 6px; border-radius: 2px; font-size: 9px; letter-spacing: .08em; }
.nav-bar .linklike { background: none; border: 1px solid rgba(148,163,184,.2); color: #64748b; border-radius: 3px; padding: 3px 9px; cursor: pointer; font-family: inherit; font-size: 10px; }
.nav-bar .linklike:hover { color: #e2e8f0; border-color: #94a3b8; }

/* Botões */
.btn {
  display: inline-block; border-radius: 4px; padding: 7px 14px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em;
  text-decoration: none; border: 1px solid rgba(148,163,184,.25);
  background: #13181f; color: #94a3b8;
}
.btn:hover { color: #e2e8f0; border-color: #94a3b8; }
.btn-primary { background: #e11d48; border-color: #e11d48; color: #fff; }
.btn-primary:hover { background: #be123c; color: #fff; }
.btn-danger { color: #ef4444; border-color: rgba(239,68,68,.4); }
.btn-danger:hover { color: #fff; background: #ef4444; }
.btn-sm { padding: 4px 9px; font-size: 10px; }

/* Tabelas */
.console-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.console-table th {
  text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: #475569;
  padding: 0 12px 8px; border-bottom: 1px solid rgba(148,163,184,.14); font-weight: 500;
}
.console-table td { padding: 11px 12px; border-bottom: 1px solid rgba(148,163,184,.08); color: #cbd5e1; vertical-align: middle; }
.console-table tr:hover td { background: rgba(148,163,184,.04); }
.console-table td.right, .console-table th.right { text-align: right; white-space: nowrap; }
.console-table .mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #94a3b8; }
.row-actions { display: inline-flex; gap: 6px; align-items: center; }
.row-actions form { display: inline; }

/* Pills de estado */
.pill { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; border: 1px solid; }
.pill.on   { color: #00ff9d; border-color: rgba(0,255,157,.4); background: rgba(0,255,157,.1); }
.pill.off  { color: #64748b; border-color: rgba(148,163,184,.25); background: rgba(148,163,184,.06); }
.pill.warn { color: #f59e0b; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.12); }
.pill.src  { color: #f59e0b; border-color: rgba(245,158,11,.4); }
.pill.dst  { color: #38bdf8; border-color: rgba(56,189,248,.4); }

/* Cards do catálogo de conectores */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card { background: #0c1015; border: 1px solid rgba(148,163,184,.14); border-radius: 8px; padding: 16px 18px; }
.card h3 { margin: 0 0 4px; font-size: 14px; color: #e2e8f0; }
.card .slug { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #475569; }
.card p { font-size: 12.5px; color: #94a3b8; line-height: 1.5; margin: 10px 0 14px; }
.card .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Formulários */
.console-form { max-width: 560px; background: #0c1015; border: 1px solid rgba(148,163,184,.14); border-radius: 8px; padding: 22px 24px; }
.console-form .field { margin-bottom: 15px; display: flex; flex-direction: column; gap: 5px; }
.console-form label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #94a3b8; letter-spacing: .04em; }
.console-form input[type="text"], .console-form input[type="email"], .console-form input[type="password"],
.console-form input[type="number"], .console-form select {
  background: #13181f; border: 1px solid rgba(148,163,184,.25); border-radius: 4px;
  padding: 9px 10px; color: #e2e8f0; font-family: 'IBM Plex Sans', sans-serif; font-size: 14px;
}
.console-form input:focus, .console-form select:focus { outline: none; border-color: #e11d48; }
.console-form .hint { font-size: 11px; color: #475569; }
.console-form .checks { display: flex; gap: 16px; flex-wrap: wrap; }
.console-form .checks label { display: flex; align-items: center; gap: 6px; color: #cbd5e1; font-size: 12px; }
.console-form .form-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; }
.console-form #error_explanation {
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); border-radius: 4px;
  padding: 10px 14px; margin-bottom: 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #ef4444;
}
.console-form #error_explanation h2 { font-size: 12px; margin: 0 0 6px; }
.console-form #error_explanation ul { margin: 0; padding-left: 18px; }

/* Estado vazio — nunca uma tela em branco sem explicação */
.empty { border: 1px dashed rgba(148,163,184,.22); border-radius: 8px; padding: 34px 26px; text-align: center; }
.empty h3 { margin: 0 0 6px; font-size: 14px; color: #cbd5e1; }
.empty p { margin: 0 0 16px; font-size: 12.5px; color: #64748b; }

/* Cabeçalho da grade de pipelines (o resto do dashboard vem do genesis_style) */
.pipeline-head {
  width: 100%; max-width: 1140px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 4px 0;
}
.pipeline-head-title {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: #64748b;
}

.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 4px 0; }
.modal-foot form { display: inline; }