/* DjinniPulse Styles */

/* Theme CSS Variables */
:root {
  /* Light theme (default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #e5e5e5;
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --border-primary: #d4d4d4;
  --border-secondary: #e5e5e5;
  --accent-primary: #10b981;
  --accent-hover: #0ea472;
  --accent-alpha: rgba(16, 185, 129, 0.2);
  --accent-shadow: rgba(16, 185, 129, 0.25);
  --success-color: #10b981;
  --warning-color: #eab308;
  --danger-color: #ef4444;
  --info-color: #3b82f6;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #333333;
  --text-primary: #e5e5e5;
  --text-secondary: #888888;
  --text-tertiary: #666666;
  --border-primary: #333333;
  --border-secondary: #444444;
}

/* Smooth transitions */
body,
.card,
.form-control,
.form-select,
.btn,
.autocomplete-dropdown,
.autocomplete-item,
.nav-link,
.progress {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Space Mono', monospace;
}

/* Form elements */
.form-control, .form-select {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.form-control:focus, .form-select:focus {
  background-color: var(--bg-secondary);
  border-color: var(--accent-primary);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.2rem var(--accent-shadow);
}

.form-control::placeholder {
  color: var(--text-tertiary);
}

/* Primary button */
.btn-primary {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #000;
  font-weight: bold;
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #000;
}

/* Secondary button */
.btn-outline-secondary {
  border-color: var(--border-secondary);
  color: var(--text-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary.active {
  background-color: var(--accent-alpha);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* Cards */
.card {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

/* Text colors */
.text-muted, footer a {
  color: var(--text-secondary) !important;
}

.text-success {
  color: var(--success-color) !important;
}

/* Progress bars */
.progress {
  background-color: var(--bg-tertiary);
  height: 8px;
}

/* Autocomplete dropdown */
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 0.375rem;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

.autocomplete-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: var(--text-primary);
}

.autocomplete-item:hover {
  background-color: var(--bg-tertiary);
}

/* Navigation */
.nav-link {
  color: var(--text-secondary);
}

.nav-link:hover, .nav-link.active {
  color: var(--accent-primary);
}

/* Dashboard specific */
.chart-label {
  color: var(--text-primary);
}

.chart-title {
  color: var(--text-tertiary);
}

.chart-percent {
  color: var(--text-primary);
  font-weight: bold;
}

.chart-count {
  color: var(--text-secondary);
}

/* Filter pills */
.filter-select {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

.filter-select.active {
  background-color: var(--accent-alpha);
  border-color: var(--accent-primary);
}

/* Market pulse card */
.pulse-score {
  font-size: 3rem;
  font-weight: bold;
}

.pulse-good { color: #10b981; }
.pulse-warning { color: #eab308; }
.pulse-bad { color: #ef4444; }

/* Metric colors */
.metric-danger { color: #ef4444; }
.metric-warning { color: #eab308; }
.metric-info { color: #3b82f6; }
.metric-success { color: #10b981; }