/**
 * Google Ads MCP — Dark Theme Override
 * Overrides base.css light theme with the dark navy palette from theme.ts
 */

:root {
  --gads-bg-primary: #1a1a2e;
  --gads-bg-card: #16213e;
  --gads-bg-card-hover: #1a2744;
  --gads-bg-accent: #0f3460;
  --gads-bg-input: #0d1b2a;
  --gads-highlight: #e94560;
  --gads-highlight-dim: rgba(233, 69, 96, 0.15);
  --gads-text-primary: #e8e8e8;
  --gads-text-secondary: #a0a0b8;
  --gads-text-muted: #6c6c8a;
  --gads-border: rgba(255, 255, 255, 0.06);
  --gads-border-light: rgba(255, 255, 255, 0.1);
  --gads-green: #00c897;
  --gads-green-dim: rgba(0, 200, 151, 0.15);
  --gads-yellow: #f0c040;
  --gads-yellow-dim: rgba(240, 192, 64, 0.15);
  --gads-red: #e94560;
  --gads-red-dim: rgba(233, 69, 96, 0.15);
  --gads-blue: #4ea8de;
  --gads-blue-dim: rgba(78, 168, 222, 0.15);
  --gads-purple: #9b5de5;
  --gads-purple-dim: rgba(155, 93, 229, 0.15);
  --gads-orange: #f48c06;
  --gads-orange-dim: rgba(244, 140, 6, 0.15);
}

body {
  background: var(--gads-bg-primary);
  color: var(--gads-text-primary);
}

#app, #root { padding: 12px; }

a { color: var(--gads-blue); }

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

/* Loading & Error States */
.loading-state { color: var(--gads-text-secondary); }
.loading-spinner { border-color: var(--gads-border-light); border-top-color: var(--gads-highlight); }
.error-state { background: var(--gads-red-dim); border-color: var(--gads-red); color: var(--gads-red); }
.error-state p { color: var(--gads-red); }

/* Status Badges */
.status-active { background: var(--gads-blue-dim); color: var(--gads-blue); }
.status-complete { background: var(--gads-green-dim); color: var(--gads-green); }
.status-paused { background: var(--gads-yellow-dim); color: var(--gads-yellow); }
.status-draft { background: var(--gads-border); color: var(--gads-text-muted); }
.status-error { background: var(--gads-red-dim); color: var(--gads-red); }

/* Page Header */
.page-header {
  background: var(--gads-bg-card);
  border: 1px solid var(--gads-border);
  box-shadow: none;
}
.page-header-gradient {
  background: linear-gradient(135deg, #0f3460, #16213e);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.page-header-title { color: var(--gads-text-primary); }
.page-header-subtitle { color: var(--gads-text-secondary); }
.stat-item { color: var(--gads-text-secondary); }
.stat-value { color: var(--gads-text-primary); }

/* Card */
.card {
  background: var(--gads-bg-card);
  border: 1px solid var(--gads-border);
  box-shadow: none;
}
.card:hover { border-color: var(--gads-border-light); }
.card-header { border-bottom-color: var(--gads-border); }
.card-title { color: var(--gads-text-primary); }
.card-subtitle { color: var(--gads-text-secondary); }

/* Metric Card */
.metric-card {
  background: var(--gads-bg-card);
  border: 1px solid var(--gads-border);
  box-shadow: none;
}
.metric-value { color: var(--gads-text-primary); }
.metric-green { color: var(--gads-green); }
.metric-blue { color: var(--gads-blue); }
.metric-purple { color: var(--gads-purple); }
.metric-yellow { color: var(--gads-yellow); }
.metric-red { color: var(--gads-red); }
.metric-label { color: var(--gads-text-muted); }
.trend-up { color: var(--gads-green); }
.trend-down { color: var(--gads-red); }
.trend-flat { color: var(--gads-text-muted); }

/* Data Table */
.data-table-wrap {
  background: var(--gads-bg-card);
  border: 1px solid var(--gads-border);
  box-shadow: none;
}
.data-table th {
  background: var(--gads-bg-accent);
  color: var(--gads-text-secondary);
  border-bottom-color: var(--gads-border);
}
.data-table th.sortable:hover { background: var(--gads-bg-card-hover); }
.data-table td {
  border-bottom-color: var(--gads-border);
  color: var(--gads-text-primary);
}
.data-table tr:hover { background: rgba(255, 255, 255, 0.02); }
.clickable-row:hover { background: rgba(78, 168, 222, 0.06) !important; }
.table-pagination { border-top-color: var(--gads-border); }
.pagination-info { color: var(--gads-text-secondary); }

.avatar-cell span { color: var(--gads-text-primary); }
.font-medium { color: var(--gads-text-primary); }
.font-mono { color: var(--gads-text-primary); }
.tag { background: var(--gads-blue-dim); color: var(--gads-blue); }
.tag-more { background: var(--gads-border); color: var(--gads-text-muted); }
.link { color: var(--gads-blue); }

/* Empty State */
.empty-state p { color: var(--gads-text-secondary); }

/* Section */
.section-title { color: var(--gads-text-primary); }
.section-desc { color: var(--gads-text-secondary); }

/* Progress Bar */
.progress-track { background: var(--gads-bg-input); }
.progress-label { color: var(--gads-text-secondary); }
.progress-value { color: var(--gads-text-secondary); }
.progress-value strong { color: var(--gads-text-primary); }

/* Buttons */
.btn-primary { background: var(--gads-highlight); }
.btn-primary:hover:not(:disabled) { background: #c9374f; }
.btn-secondary {
  background: var(--gads-bg-card);
  color: var(--gads-text-primary);
  border-color: var(--gads-border-light);
}
.btn-secondary:hover:not(:disabled) { background: var(--gads-bg-card-hover); }
.btn-ghost { color: var(--gads-text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--gads-bg-accent); color: var(--gads-text-primary); }

/* Search Bar */
.search-bar { background: var(--gads-bg-accent); border-bottom-color: var(--gads-border); }
.search-input {
  background: var(--gads-bg-input);
  border-color: var(--gads-border-light);
  color: var(--gads-text-primary);
}
.search-input:focus { border-color: var(--gads-highlight); box-shadow: 0 0 0 3px var(--gads-highlight-dim); }
.search-input::placeholder { color: var(--gads-text-muted); }

/* Filter Chips */
.filter-chips { border-bottom-color: var(--gads-border); }
.chip { background: var(--gads-bg-accent); color: var(--gads-text-secondary); }
.chip:hover { background: var(--gads-bg-card-hover); }
.chip-active { background: var(--gads-highlight); color: white; }
.chip-active:hover { background: #c9374f; }

/* Tab Group */
.tab-group { border-bottom-color: var(--gads-border); }
.tab { color: var(--gads-text-muted); }
.tab:hover { color: var(--gads-text-secondary); border-bottom-color: var(--gads-border-light); }
.tab-active { color: var(--gads-highlight); border-bottom-color: var(--gads-highlight); }
.tab-count { background: var(--gads-border); color: var(--gads-text-muted); }

/* Key-Value */
.kv-list { background: var(--gads-bg-card); border: 1px solid var(--gads-border); box-shadow: none; }
.kv-row { border-bottom-color: var(--gads-border); }
.kv-label { color: var(--gads-text-secondary); }
.kv-value { color: var(--gads-text-primary); }
.kv-value-bold { color: var(--gads-text-primary); }
.kv-value-success { color: var(--gads-green); }
.kv-value-danger { color: var(--gads-red); }
.kv-total { background: var(--gads-bg-accent); }
.kv-total .kv-label { color: var(--gads-text-primary); }
.kv-highlight { background: var(--gads-bg-card-hover); }

/* Chart Container */
.chart-container {
  background: var(--gads-bg-card);
  border: 1px solid var(--gads-border);
  box-shadow: none;
}
.chart-title { color: var(--gads-text-primary); }
.chart-empty { color: var(--gads-text-muted); }
.bar-h-label { color: var(--gads-text-secondary); }
.bar-h-track { background: var(--gads-bg-input); }
.bar-h-value { color: var(--gads-text-primary); }
.bar-v-val { fill: var(--gads-text-primary); }
.bar-v-label { fill: var(--gads-text-muted); }
.chart-axis-text { fill: var(--gads-text-muted); }
.chart-axis-label { fill: var(--gads-text-secondary); }

/* Sparkline */
.sparkline-empty { color: var(--gads-text-muted); }

/* Stats Grid */
.stats-grid { gap: 12px; }

/* Modal */
.mcp-modal { background: var(--gads-bg-card); border: 1px solid var(--gads-border-light); }
.mcp-modal-header { border-bottom-color: var(--gads-border); }
.mcp-modal-title { color: var(--gads-text-primary); }
.mcp-modal-close { color: var(--gads-text-muted); }
.mcp-modal-close:hover { color: var(--gads-text-primary); }
.mcp-modal-footer { border-top-color: var(--gads-border); }
.mcp-field-label { color: var(--gads-text-secondary); }
.mcp-field-input {
  background: var(--gads-bg-input);
  border-color: var(--gads-border-light);
  color: var(--gads-text-primary);
}
.mcp-field-input:focus { border-color: var(--gads-highlight); }
