/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* The Analyst Brand Identity - CSS Custom Properties */
:root {
  /* Brand Palette: The Analyst */
  --color-background: #F9FAFB;      /* Very light off-white for the page background */
  --color-surface: #FFFFFF;         /* Crisp white for card backgrounds */
  --color-text-primary: #111827;    /* Charcoal for main headings and text */
  --color-text-secondary: #4B5563;  /* Muted gray for subheadings and less important text */
  --color-accent: #06B6D4;          /* Vibrant teal for highlights, links, and buttons */
  --color-accent-hover: #0891B2;    /* Slightly darker teal for hover states */
  --color-border: #E5E7EB;          /* Light gray for borders and dividers */
}

/* Global Styles */
body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Custom Component Styles */
.analyst-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}

.analyst-button-primary {
  background-color: var(--color-accent);
  color: var(--color-surface);
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.analyst-button-primary:hover {
  background-color: var(--color-accent-hover);
}

.analyst-button-secondary {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.analyst-button-secondary:hover {
  background-color: var(--color-background);
  border-color: var(--color-accent);
}

.analyst-nav-active {
  color: var(--color-accent) !important;
  border-bottom-color: var(--color-accent) !important;
}

.analyst-nav-inactive {
  color: var(--color-text-secondary) !important;
}

.analyst-nav-inactive:hover {
  color: var(--color-accent) !important;
}

.analyst-progress-bar {
  background-color: var(--color-accent) !important;
}

.analyst-category-dot {
  background-color: var(--color-accent) !important;
}

/* Typography */
.analyst-title {
  color: var(--color-text-primary);
}

.analyst-subtitle {
  color: var(--color-text-secondary);
}

.analyst-amount {
  color: var(--color-text-primary);
}

.analyst-label {
  color: var(--color-text-secondary);
}

/* Browser Frame Styles */
.browser-frame {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.browser-header {
  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
  border-bottom: 1px solid #dee2e6;
}

.browser-content {
  background: var(--color-background);
  min-height: 300px;
}