/* ===================================
   Unified Theme Styles - Pablo AI Hub Design
   PabloTradeMaster
   =================================== */

/* === Theme Variables Override === */
/* Light theme (default) */
:root,
[data-theme="light"] {
  /* Primary Colors */
  --theme-primary: #2563eb;
  --theme-primary-dark: #1d4ed8;
  --theme-primary-light: #3b82f6;
  
  /* Background Colors */
  --theme-bg-primary: #f4f6f9;
  --theme-bg-secondary: #ffffff;
  --theme-bg-tertiary: #f1f5f9;
  --theme-bg-elevated: #ffffff;
  
  /* Surface Colors */
  --theme-surface: #ffffff;
  --theme-surface-hover: #f8fafc;
  --theme-surface-active: #eff6ff;
  
  /* Text Colors */
  --theme-text-primary: #1e293b;
  --theme-text-secondary: #64748b;
  --theme-text-tertiary: #94a3b8;
  --theme-text-inverse: #ffffff;
  
  /* Border Colors */
  --theme-border-primary: #e2e8f0;
  --theme-border-secondary: #cbd5e1;
  --theme-border-focus: #3b82f6;
  
  /* Status Colors */
  --theme-success: #10b981;
  --theme-warning: #f59e0b;
  --theme-danger: #ef4444;
  --theme-info: #3b82f6;
  
  /* Shadows */
  --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --theme-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Special Effects */
  --theme-glow-primary: 0 0 20px rgba(37, 99, 235, 0.15);
  --theme-gradient-primary: linear-gradient(135deg, #3b82f6, #2563eb);
  --theme-gradient-accent: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

/* Dark theme */
[data-theme="dark"] {
  /* Primary Colors */
  --theme-primary: #3b82f6;
  --theme-primary-dark: #2563eb;
  --theme-primary-light: #60a5fa;
  
  /* Background Colors */
  --theme-bg-primary: #0f172a;
  --theme-bg-secondary: #1e293b;
  --theme-bg-tertiary: #334155;
  --theme-bg-elevated: #1e293b;
  
  /* Surface Colors */
  --theme-surface: #1a1f2e;
  --theme-surface-hover: #242937;
  --theme-surface-active: rgba(59, 130, 246, 0.1);
  
  /* Text Colors */
  --theme-text-primary: #f1f5f9;
  --theme-text-secondary: #cbd5e1;
  --theme-text-tertiary: #94a3b8;
  --theme-text-inverse: #0f172a;
  
  /* Border Colors */
  --theme-border-primary: #334155;
  --theme-border-secondary: #475569;
  --theme-border-focus: #60a5fa;
  
  /* Status Colors */
  --theme-success: #10b981;
  --theme-warning: #f59e0b;
  --theme-danger: #ef4444;
  --theme-info: #60a5fa;
  
  /* Shadows */
  --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --theme-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  
  /* Special Effects */
  --theme-glow-primary: 0 0 20px rgba(59, 130, 246, 0.25);
  --theme-gradient-primary: linear-gradient(135deg, #3b82f6, #60a5fa);
  --theme-gradient-accent: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

/* === Apply Theme Variables to Common Properties === */
body {
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
}

/* === Component Theme Overrides === */

/* Sidebar */
.sidebar {
  background-color: var(--theme-bg-secondary);
  border-right-color: var(--theme-border-primary);
}

.sidebar-header {
  background-color: var(--theme-surface);
  border-bottom-color: var(--theme-border-primary);
}

.nav-link {
  color: var(--theme-text-secondary);
}

.nav-link:hover {
  background-color: var(--theme-surface-active);
  color: var(--theme-primary);
}

.nav-link.active {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

/* Header */
.top-header {
  background-color: var(--theme-bg-primary);
  border-bottom-color: var(--theme-border-primary);
}

[data-theme="dark"] .top-header {
  background-color: rgba(15, 23, 42, 0.8);
}

[data-theme="light"] .top-header {
  background-color: rgba(255, 255, 255, 0.8);
}

.header-brand {
  color: var(--theme-text-primary);
}

.theme-toggle-btn,
.mobile-menu-toggle {
  background-color: var(--theme-surface);
  border-color: var(--theme-border-primary);
  color: var(--theme-text-primary);
}

.theme-toggle-btn:hover,
.mobile-menu-toggle:hover {
  background-color: var(--theme-surface-hover);
  border-color: var(--theme-primary);
  box-shadow: var(--theme-shadow-md);
}

/* Cards */
.card,
.metric-card,
.edu-box,
.news-card {
  background-color: var(--theme-surface);
  border-color: var(--theme-border-primary);
  box-shadow: var(--theme-shadow-sm);
}

.card:hover,
.metric-card:hover,
.edu-box:hover,
.news-card:hover {
  border-color: var(--theme-primary);
  box-shadow: var(--theme-shadow-lg);
}

/* Buttons */
.btn,
.filter-button,
.chart-control-btn {
  background-color: var(--theme-surface);
  border-color: var(--theme-border-primary);
  color: var(--theme-text-primary);
}

.btn:hover,
.filter-button:hover,
.chart-control-btn:hover {
  background-color: var(--theme-surface-hover);
  border-color: var(--theme-primary);
}

.btn-primary,
.filter-button.active,
.chart-control-btn.active {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

.btn-primary:hover,
.filter-button.active:hover {
  background-color: var(--theme-primary-dark);
  border-color: var(--theme-primary-dark);
}

/* Form Elements */
input,
textarea,
select {
  background-color: var(--theme-surface);
  border-color: var(--theme-border-primary);
  color: var(--theme-text-primary);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Text Elements */
h1, h2, h3, h4, h5, h6 {
  color: var(--theme-text-primary);
}

p {
  color: var(--theme-text-primary);
}

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

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

/* Links */
a {
  color: var(--theme-primary);
}

a:hover {
  color: var(--theme-primary-dark);
}

/* Dividers */
.nav-divider,
hr {
  background-color: var(--theme-border-primary);
}

/* Scrollbar */
::-webkit-scrollbar-track {
  background-color: var(--theme-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background-color: var(--theme-border-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--theme-text-tertiary);
}

/* === Specific Component Themes === */

/* Footer */
.app-footer {
  margin-top: auto;
  padding: var(--space-6) var(--space-4);
  background-color: var(--theme-bg-secondary);
  border-top: 1px solid var(--theme-border-primary);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

.app-footer p {
  color: var(--theme-text-tertiary);
}

/* Dashboard */
.dashboard-header {
  color: var(--theme-text-primary);
}

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

.metric-value {
  color: var(--theme-text-primary);
}

.metric-card.primary {
  background: var(--theme-gradient-primary);
  color: var(--theme-text-inverse);
  border: none;
}

/* News */
.news-header {
  background: linear-gradient(135deg, var(--theme-surface), var(--theme-bg-elevated));
}

.category-filter-section {
  background-color: var(--theme-surface);
  border-color: var(--theme-border-primary);
}

.news-title {
  color: var(--theme-text-primary);
}

.news-source {
  background-color: var(--theme-bg-tertiary);
  color: var(--theme-text-secondary);
}

.news-date,
.news-summary {
  color: var(--theme-text-secondary);
}

/* Education */
.edu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.edu-box {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--theme-border-primary);
  background-color: var(--theme-surface);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.edu-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--theme-gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.edu-box:hover {
  transform: translateY(-4px);
}

.edu-box:hover::before {
  opacity: 1;
}

.edu-box h2 {
  font-size: var(--text-xl);
  color: var(--theme-text-primary);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.edu-box p {
  color: var(--theme-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.article-content h1,
.article-content h2,
.article-content h3 {
  color: var(--theme-primary);
}

.article-content p,
.article-content li {
  color: var(--theme-text-primary);
}

.article-content code {
  background-color: var(--theme-surface-active);
  color: var(--theme-primary);
}

/* Status Indicators */
.status-dot.online {
  background-color: var(--theme-success);
}

.status-dot.offline {
  background-color: var(--theme-danger);
}

.status-dot.pending {
  background-color: var(--theme-warning);
}

/* Trends */
.metric-trend.positive {
  color: var(--theme-success);
  background-color: rgba(16, 185, 129, 0.1);
}

.metric-trend.negative {
  color: var(--theme-danger);
  background-color: rgba(239, 68, 68, 0.1);
}

/* === Theme Transition === */
* {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Disable transitions during theme switch for instant feedback */
.theme-transitioning * {
  transition: none !important;
}

/* === Mobile Overlay === */
.mobile-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .mobile-overlay {
  background-color: rgba(0, 0, 0, 0.3);
}

/* === Loading States === */
.metric-loading {
  background: linear-gradient(90deg, 
    var(--theme-border-primary) 25%, 
    var(--theme-surface) 50%, 
    var(--theme-border-primary) 75%);
}

/* === Print Styles === */
@media print {
  [data-theme="dark"] {
    --theme-bg-primary: #ffffff;
    --theme-text-primary: #000000;
  }
}