/* ─── MATRIX THEME ─── */
:root {
  --mx-green: #00ff41;
  --mx-green-dim: #008f11;
  --mx-green-dark: #003b00;
  --mx-bg: #050505;
  --mx-panel: #0a0f0a;
  --mx-border: #00ff4133;
}

* { font-family: 'Share Tech Mono', 'Fira Code', Consolas, monospace !important; }

html, body {
  background: var(--mx-bg);
  color: var(--mx-green);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,255,65,0.03) 0, rgba(0,255,65,0.03) 1px, transparent 1px, transparent 3px);
  pointer-events: none; z-index: 1;
}

#matrix-rain {
  position: fixed; inset: 0;
  z-index: 0; opacity: 0.18; pointer-events: none;
}

.container, .container-fluid { position: relative; z-index: 2; }

.navbar {
  background: rgba(0,0,0,0.85) !important;
  border-bottom: 1px solid var(--mx-green);
  box-shadow: 0 0 20px var(--mx-green-dark);
}
.navbar-brand, .nav-link {
  color: var(--mx-green) !important;
  text-shadow: 0 0 8px var(--mx-green);
}
.nav-link:hover { color: #fff !important; text-shadow: 0 0 12px var(--mx-green); }

.card {
  background: var(--mx-panel) !important;
  border: 1px solid var(--mx-green) !important;
  box-shadow: 0 0 14px rgba(0,255,65,0.18);
  color: var(--mx-green);
}
.card-header {
  background: rgba(0,255,65,0.08) !important;
  border-bottom: 1px solid var(--mx-green) !important;
  font-weight: bold;
  text-shadow: 0 0 5px var(--mx-green);
}

.btn-primary, .btn-success {
  background: var(--mx-green-dark) !important;
  border: 1px solid var(--mx-green) !important;
  color: var(--mx-green) !important;
  text-shadow: 0 0 5px var(--mx-green);
}
.btn-primary:hover, .btn-success:hover {
  background: var(--mx-green) !important; color: #000 !important;
  box-shadow: 0 0 16px var(--mx-green);
}
.btn-danger {
  background: #2a0000 !important; border: 1px solid #ff0033 !important;
  color: #ff3355 !important;
}
.btn-danger:hover { background: #ff0033 !important; color: #000 !important; }

.form-control, .form-select {
  background: #000 !important;
  border: 1px solid var(--mx-green) !important;
  color: var(--mx-green) !important;
}
.form-control:focus, .form-select:focus {
  border-color: #fff !important;
  box-shadow: 0 0 12px var(--mx-green) !important;
  background: #000 !important; color: var(--mx-green) !important;
}
.form-label { color: var(--mx-green); }

.table {
  color: var(--mx-green) !important;
  border-color: var(--mx-border) !important;
}
.table th { border-color: var(--mx-green) !important; color: var(--mx-green); text-shadow: 0 0 5px var(--mx-green); }
.table td { border-color: var(--mx-border) !important; }
.table-hover tbody tr:hover { background: rgba(0,255,65,0.08) !important; color: var(--mx-green); }

.progress { background: #000; border: 1px solid var(--mx-green); height: 18px; }
.progress-bar { background: var(--mx-green); color: #000; font-weight: bold; }

.badge.bg-success { background: var(--mx-green) !important; color: #000 !important; }
.badge.bg-danger  { background: #ff0033 !important; }
.badge.bg-warning { background: #ffcc00 !important; color: #000 !important; }
.badge.bg-secondary { background: #222 !important; color: var(--mx-green) !important; border: 1px solid var(--mx-green); }

.alert-success { background: rgba(0,255,65,0.1); border: 1px solid var(--mx-green); color: var(--mx-green); }
.alert-danger  { background: rgba(255,0,51,0.1); border: 1px solid #ff0033; color: #ff3355; }
.alert-info    { background: rgba(0,255,65,0.08); border: 1px solid var(--mx-green); color: var(--mx-green); }

h1, h2, h3, h4, h5 { text-shadow: 0 0 8px var(--mx-green); letter-spacing: 1px; }
a { color: var(--mx-green); }
a:hover { color: #fff; }
code, pre { color: var(--mx-green); background: #000; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--mx-border); }

.stat-card .stat-value { font-size: 2.2rem; font-weight: bold; text-shadow: 0 0 14px var(--mx-green); }
.stat-card .stat-label { font-size: 0.85rem; opacity: 0.85; text-transform: uppercase; }

.dropdown-menu { background: var(--mx-panel); border: 1px solid var(--mx-green); }
.dropdown-item { color: var(--mx-green); }
.dropdown-item:hover { background: rgba(0,255,65,0.15); color: #fff; }

/* ─── Blocos de código da documentação ─── */
.code-block {
  position: relative;
  background: #000;
  border: 1px solid var(--mx-green);
  border-radius: 4px;
  margin-bottom: 1rem;
  box-shadow: 0 0 10px rgba(0,255,65,0.15);
}
.code-block pre {
  margin: 0;
  padding: 14px 16px 14px 16px;
  overflow-x: auto;
  color: var(--mx-green);
  background: transparent;
  border: none;
  font-size: 0.85rem;
  line-height: 1.5;
}
.code-block pre code {
  color: var(--mx-green);
  background: transparent;
  border: none;
  padding: 0;
  white-space: pre;
  text-shadow: 0 0 2px var(--mx-green);
}
.code-block .copy-code {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  font-size: 0.75rem;
  padding: 4px 10px;
}

/* ─── Abas (tabs) Matrix ─── */
.nav-tabs {
  border-bottom: 1px solid var(--mx-green);
}
.nav-tabs .nav-link {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--mx-green-dim) !important;
  margin-right: 2px;
}
.nav-tabs .nav-link:hover {
  color: var(--mx-green) !important;
  background: rgba(0,255,65,0.05);
  border-color: var(--mx-border);
}
.nav-tabs .nav-link.active {
  background: var(--mx-panel) !important;
  border: 1px solid var(--mx-green) !important;
  border-bottom-color: var(--mx-panel) !important;
  color: var(--mx-green) !important;
  text-shadow: 0 0 8px var(--mx-green);
}

/* Input das API keys */
.api-key-field {
  font-family: monospace !important;
  letter-spacing: 1px;
}