/* Jarvis — plain CSS (Tailwind CDN doesn't process @apply in external files) */

.nav-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: #cbd5e1;
  transition: background-color 150ms, color 150ms;
  text-decoration: none;
}
.nav-link:hover {
  background-color: #171a23;
  color: #ffffff;
}

.card {
  background-color: #11131a;
  border: 1px solid #1f2330;
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.card-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
  border: 1px solid;
}
.pill-red { background-color: rgba(127, 29, 29, 0.5); color: #fca5a5; border-color: rgba(185, 28, 28, 0.5); }
.pill-green { background-color: rgba(6, 78, 59, 0.5); color: #6ee7b7; border-color: rgba(5, 150, 105, 0.5); }
.pill-yellow { background-color: rgba(120, 53, 15, 0.5); color: #fcd34d; border-color: rgba(180, 83, 9, 0.5); }
.pill-blue { background-color: rgba(49, 46, 129, 0.5); color: #a5b4fc; border-color: rgba(79, 70, 229, 0.5); }
.pill-slate { background-color: rgba(51, 65, 85, 0.5); color: #cbd5e1; border-color: rgba(71, 85, 105, 0.5); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: #6366f1;
  color: #ffffff;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background-color 150ms;
  text-decoration: none;
}
.btn-primary:hover { background-color: #818cf8; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: #171a23;
  color: #e2e8f0;
  border: 1px solid #2b3040;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms;
}
.btn-secondary:hover { background-color: #1f2330; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: rgba(127, 29, 29, 0.5);
  color: #fecaca;
  border: 1px solid rgba(185, 28, 28, 0.5);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.btn-danger:hover { background-color: rgba(153, 27, 27, 0.5); }

.input, .textarea, .select {
  width: 100%;
  background-color: #0a0b0f;
  border: 1px solid #2b3040;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: #f1f5f9;
  font-family: inherit;
  font-size: 0.9375rem;
}
.input::placeholder, .textarea::placeholder { color: #64748b; }
.input:focus, .textarea:focus, .select:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 1px #6366f1;
}

.kpi {
  background-color: #11131a;
  border: 1px solid #1f2330;
  border-radius: 0.75rem;
  padding: 1.25rem;
}
.kpi-label {
  font-size: 0.75rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.kpi-value {
  font-size: 1.875rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-top: 0.25rem;
}
.kpi-sub { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; }

/* Chat bubbles */
.bubble-user {
  background-color: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 1rem 0.25rem 1rem 1rem;
  padding: 0.75rem 1rem;
  max-width: 80%;
  margin-left: auto;
  color: #f1f5f9;
}
.bubble-ai {
  background-color: #11131a;
  border: 1px solid #1f2330;
  border-radius: 0.25rem 1rem 1rem 1rem;
  padding: 0.75rem 1rem;
  max-width: 85%;
  color: #e2e8f0;
}

.bubble-ai .applied-changes {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #1f2330;
  font-size: 0.75rem;
  color: #94a3b8;
}

.bubble-ai h1, .bubble-ai h2, .bubble-ai h3 { font-weight: 600; color: #f1f5f9; margin: 0.75rem 0 0.25rem; }
.bubble-ai h1 { font-size: 1.125rem; }
.bubble-ai h2 { font-size: 1rem; }
.bubble-ai h3 { font-size: 0.9375rem; }
.bubble-ai p { margin-bottom: 0.5rem; }
.bubble-ai p:last-child { margin-bottom: 0; }
.bubble-ai ul, .bubble-ai ol { margin-left: 1.25rem; margin-bottom: 0.5rem; list-style: disc; }
.bubble-ai ol { list-style: decimal; }
.bubble-ai code { background-color: #0a0b0f; padding: 0.125rem 0.25rem; border-radius: 0.25rem; color: #a5b4fc; font-size: 0.875rem; font-family: 'JetBrains Mono', monospace; }
.bubble-ai strong { color: #f1f5f9; font-weight: 600; }
.bubble-ai a { color: #a5b4fc; text-decoration: underline; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #11131a; }
::-webkit-scrollbar-thumb { background: #2b3040; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a4052; }

/* Section header */
.section-h {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

/* Health / momentum dots */
.dot-green { background-color: #10b981; }
.dot-red { background-color: #ef4444; }
.dot-amber { background-color: #f59e0b; }
.dot-slate { background-color: #475569; }

/* Typography helpers */
.text-muted { color: #94a3b8; }
.text-dim { color: #64748b; }
.text-num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
