/* Custom styles for Multi-Stock Earnings Analysis System */
/* Using Bootstrap variables and minimal custom overrides */

:root {
  --custom-accent: var(--bs-info);
  --custom-success: var(--bs-success);
  --custom-warning: var(--bs-warning);
  --custom-danger: var(--bs-danger);
}

/* Ensure proper dark theme consistency */
[data-bs-theme="dark"] {
  color-scheme: dark;
}

/* Custom card styles for metrics */
.metric-card {
  transition: transform 0.2s ease-in-out;
}

.metric-card:hover {
  transform: translateY(-2px);
}

/* Status indicators */
.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

.status-healthy {
  background-color: var(--bs-success);
}

.status-warning {
  background-color: var(--bs-warning);
}

.status-error {
  background-color: var(--bs-danger);
}

/* Loading spinner */
.loading-spinner {
  border: 2px solid var(--bs-secondary);
  border-top: 2px solid var(--bs-primary);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  display: inline-block;
  margin-right: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* JSON output styling */
.json-output {
  background-color: var(--bs-dark);
  border: 1px solid var(--bs-secondary);
  border-radius: var(--bs-border-radius);
  max-height: 400px;
  overflow-y: auto;
}

/* Form improvements */
.form-floating label {
  color: var(--bs-secondary);
}

/* Navigation improvements */
.navbar-brand {
  font-weight: 600;
}

/* Button spacing */
.btn + .btn {
  margin-left: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .btn + .btn {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

/* Error message styling */
.error-message {
  background-color: var(--bs-danger-bg-subtle);
  border: 1px solid var(--bs-danger-border-subtle);
  color: var(--bs-danger-text-emphasis);
}

/* Success message styling */
.success-message {
  background-color: var(--bs-success-bg-subtle);
  border: 1px solid var(--bs-success-border-subtle);
  color: var(--bs-success-text-emphasis);
}