/* Statistics Dashboard Styles */

/* ====================== */
/* COLOR SCHEMES          */
/* ====================== */
:root {
  /* Default color scheme - WCAG AA compliant (4.5:1 minimum) */
  --balance-positive: #15803d;  /* Darker green - 5.2:1 */
  --balance-neutral: #f8f9fa;
  --balance-negative: #b91c1c;  /* Darker red - 5.5:1 */
  --balance-positive-light: rgba(21, 128, 61, 0.2);
  --balance-negative-light: rgba(185, 28, 28, 0.2);
  
  /* Chart colors - WCAG AA compliant (4.5:1 contrast on white) */
  --chart-1: #d95319;  /* Darker orange - 4.6:1 */
  --chart-2: #0a7b73;  /* Darker teal - 4.5:1 */
  --chart-3: #7b2d8e;  /* Darker purple - 5.0:1 */
  --chart-4: #6b5714;  /* Darker gold - 5.2:1 */
  --chart-5: #c4237a;  /* Darker pink - 4.6:1 */
  
  /* Chart text/label colors - WCAG AA compliant for LIGHT mode */
  --chart-label-color: #1f2937;      /* 14.7:1 - very dark gray */
  --chart-title-color: #111827;       /* 18.0:1 - almost black */
  --chart-grid-color: rgba(0, 0, 0, 0.15);
  --chart-axis-color: #374151;        /* 9.4:1 - dark gray */
  --chart-legend-color: #1f2937;      /* 14.7:1 - very dark gray */
  --chart-tick-color: #374151;        /* 9.4:1 - dark gray */
  
  /* Rarity colors (inherited from brand.css) */
}

/* Dark mode chart colors - WCAG AA compliant */
@media (prefers-color-scheme: dark) {
  :root {
    /* Chart text/label colors for DARK mode */
    --chart-label-color: #f3f4f6;     /* 13.1:1 on dark bg */
    --chart-title-color: #ffffff;      /* 21:1 on dark bg */
    --chart-grid-color: rgba(255, 255, 255, 0.15);
    --chart-axis-color: #d1d5db;       /* 9.8:1 on dark bg */
    --chart-legend-color: #f3f4f6;     /* 13.1:1 on dark bg */
    --chart-tick-color: #d1d5db;       /* 9.8:1 on dark bg */
  }
}

/* Colorblind-safe schemes - WCAG AA compliant (4.5:1 minimum) */
.color-scheme-colorblind-deuteranopia {
  --balance-positive: #005a8c;  /* Darker blue - 5.6:1 */
  --balance-neutral: #f8f9fa;
  --balance-negative: #c65a00;  /* Darker orange - 4.5:1 */
  --balance-positive-light: rgba(0, 90, 140, 0.2);
  --balance-negative-light: rgba(198, 90, 0, 0.2);
}

.color-scheme-colorblind-protanopia {
  --balance-positive: #005a8c;  /* Darker blue - 5.6:1 */
  --balance-neutral: #f8f9fa;
  --balance-negative: #a32800;  /* Darker red-orange - 5.8:1 */
  --balance-positive-light: rgba(0, 90, 140, 0.2);
  --balance-negative-light: rgba(163, 40, 0, 0.2);
}

.color-scheme-colorblind-tritanopia {
  --balance-positive: #0e7490;  /* Darker cyan - 4.6:1 */
  --balance-neutral: #f8f9fa;
  --balance-negative: #be185d;  /* Darker pink - 5.1:1 */
  --balance-positive-light: rgba(14, 116, 144, 0.2);
  --balance-negative-light: rgba(190, 24, 93, 0.2);
}

/* ====================== */
/* PAGE LAYOUT            */
/* ====================== */
.stats-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.stats-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-color);
}

.stats-title h1 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-2xl);
}

.stats-title .subtitle {
  margin: 0;
  color: var(--text-muted);
}

/* ====================== */
/* RUN SELECTOR           */
/* ====================== */
.run-selector-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.run-selector {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.run-selector label {
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-primary);
}

.run-selector select {
  padding: 8px 12px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  min-width: 280px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.run-selector select:hover {
  border-color: var(--accent-primary);
}

.run-selector select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(255, 46, 147, 0.2);
}

.run-selector select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 8px;
}

.run-selector select optgroup {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-weight: 600;
}

.run-meta {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.run-meta-item {
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* ====================== */
/* COLOR SCHEME TOGGLE    */
/* ====================== */
.color-scheme-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.color-scheme-toggle select {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

/* ====================== */
/* BUTTONS                */
/* ====================== */
.btn {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
}

.btn:hover {
  background: var(--bg-secondary);
  border-color: var(--brand-pink);
}

.btn-primary {
  background: var(--brand-pink);
  color: white;
  border-color: var(--brand-pink);
}

.btn-primary:hover {
  background: var(--brand-pink-dark);
}

/* ====================== */
/* MODAL                  */
/* ====================== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-muted);
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: var(--space-md);
}

/* ====================== */
/* UPLOAD ZONE            */
/* ====================== */
.upload-zone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--brand-pink);
  background: var(--balance-positive-light);
}

.upload-zone input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-icon {
  font-size: 48px;
  display: block;
  margin-bottom: var(--space-sm);
}

#upload-status {
  margin-top: var(--space-md);
}

/* ====================== */
/* INSIGHTS PANEL         */
/* ====================== */
.insights-panel {
  margin-bottom: var(--space-xl);
}

.insights-panel h2 {
  margin-bottom: var(--space-md);
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

.insight-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.insight-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.insight-icon {
  font-size: 20px;
}

.insight-header h3 {
  margin: 0;
  font-size: var(--font-size-md);
}

.insight-body {
  padding: var(--space-md);
  min-height: 100px;
}

.insight-outliers .insight-header {
  background: var(--balance-negative-light);
}

.insight-meta .insight-header {
  background: rgba(78, 205, 196, 0.1);
}

.insight-efficiency .insight-header {
  background: rgba(241, 196, 15, 0.1);
}

.insight-synergy .insight-header {
  background: rgba(160, 108, 213, 0.1);
}

/* Insight content styles */
.outlier-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.outlier-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-color);
}

.outlier-item:last-child {
  border-bottom: none;
}

.outlier-name {
  font-weight: 500;
}

.outlier-delta {
  font-weight: 600;
}

.outlier-delta.nerf {
  color: var(--balance-negative);
}

.outlier-delta.buff {
  color: var(--balance-positive);
}

.meta-stat {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
}

.meta-stat-label {
  color: var(--text-muted);
}

.meta-stat-value {
  font-weight: 600;
}

/* ====================== */
/* CHART SECTION          */
/* ====================== */
.overview-section {
  margin-bottom: var(--space-xl);
}

.overview-section h2 {
  margin-bottom: var(--space-md);
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-md);
}

/* Chart Accessibility - WCAG AA Compliant Labels */
.chart-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.chart-card h3 {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-md);
}

.chart-card.chart-wide {
  grid-column: span 2;
}

.chart-container {
  position: relative;
  height: 250px;
}

.chart-container canvas {
  max-height: 100%;
}

/* ====================== */
/* STATS TABLE            */
/* ====================== */
.quick-stats-section {
  margin-bottom: var(--space-xl);
}

.stats-table-container {
  overflow-x: auto;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.stats-table th,
.stats-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.stats-table th {
  background: var(--bg-secondary);
  font-weight: 600;
}

.stats-table tr:hover {
  background: var(--bg-secondary);
}

/* ====================== */
/* NAV CARDS              */
/* ====================== */
.nav-cards-section h2 {
  margin-bottom: var(--space-md);
}

.nav-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

.nav-card {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
}

.nav-card:hover {
  border-color: var(--brand-pink);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-card-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.nav-card-content h3 {
  margin: 0 0 var(--space-xs) 0;
  color: var(--brand-pink);
}

.nav-card-content p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ====================== */
/* LOADING SPINNER        */
/* ====================== */
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-color);
  border-top-color: var(--brand-pink);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: var(--space-md) auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Chart container loading state */
.chart-container.loading {
  position: relative;
}

.chart-container.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid var(--border-color);
  border-top-color: var(--brand-pink);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 10;
}

.chart-container.loading canvas {
  opacity: 0.3;
}

/* ====================== */
/* HEATMAP STYLES         */
/* ====================== */
.heatmap-container {
  overflow-x: auto;
  margin: var(--space-md) 0;
}

.heatmap-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.heatmap-control {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.heatmap-control label {
  font-weight: 500;
  font-size: var(--font-size-sm);
}

.heatmap-control select {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.heatmap-cell {
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.heatmap-cell:hover {
  opacity: 0.8;
  stroke: var(--text-primary);
  stroke-width: 2px;
}

.heatmap-tooltip {
  position: absolute;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  font-size: var(--font-size-sm);
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Dendrogram */
.dendrogram-container {
  margin: var(--space-md) 0;
}

.dendrogram-link {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.5px;
}

.dendrogram-node circle {
  fill: var(--bg-primary);
  stroke: var(--brand-pink);
  stroke-width: 2px;
}

.dendrogram-node text {
  font-size: 10px;
  fill: var(--text-primary);
}

/* ====================== */
/* EFFICIENCY SCATTER     */
/* ====================== */
.scatter-container {
  position: relative;
}

.scatter-tooltip {
  position: absolute;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  pointer-events: none;
  z-index: 100;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.scatter-tooltip h4 {
  margin: 0 0 var(--space-sm) 0;
}

.scatter-tooltip-stat {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  padding: 2px 0;
}

/* ====================== */
/* HAND SIMULATOR         */
/* ====================== */
.simulator-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-lg);
}

.hand-builder {
  min-height: 400px;
}

.hand-drop-zone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  min-height: 200px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-content: flex-start;
}

.hand-drop-zone.drag-over {
  border-color: var(--brand-pink);
  background: var(--balance-positive-light);
}

.card-picker {
  margin-top: var(--space-md);
}

.card-picker-search {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

.card-picker-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.card-picker-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm);
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}

.card-picker-item:hover {
  background: var(--bg-secondary);
}

.simulator-results {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.simulator-results h3 {
  margin: 0 0 var(--space-md) 0;
}

.sim-stat {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-color);
}

.sim-stat:last-child {
  border-bottom: none;
}

.sim-stat-value {
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.sim-progress {
  height: 20px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: var(--space-sm) 0;
}

.sim-progress-bar {
  height: 100%;
  background: var(--brand-pink);
  transition: width 0.3s ease;
}

/* ====================== */
/* COMPARISON TOOL        */
/* ====================== */
.comparison-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.comparison-slot {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  min-height: 400px;
}

.comparison-slot h3 {
  margin: 0 0 var(--space-md) 0;
  text-align: center;
}

.card-select-dropdown {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.radar-chart-container {
  height: 250px;
  margin: var(--space-md) 0;
}

.comparison-stats {
  display: grid;
  gap: var(--space-xs);
}

.comparison-stat-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  font-size: var(--font-size-sm);
}

.comparison-stat-row.winner {
  font-weight: 600;
  color: var(--balance-positive);
}

/* Head to head section */
.head-to-head {
  grid-column: span 2;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}

.h2h-result {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin: var(--space-md) 0;
}

.h2h-bar {
  height: 30px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
}

.h2h-bar-left {
  background: var(--chart-1);
  transition: width 0.5s ease;
}

.h2h-bar-right {
  background: var(--chart-2);
  transition: width 0.5s ease;
}

/* ====================== */
/* CORRELATION MATRIX     */
/* ====================== */
.correlation-matrix {
  overflow-x: auto;
}

.correlation-cell {
  font-size: 11px;
}

.correlation-label {
  font-size: 11px;
  font-weight: 500;
}

/* ====================== */
/* RESPONSIVE             */
/* ====================== */
@media (max-width: 1024px) {
  .chart-card.chart-wide {
    grid-column: span 1;
  }
  
  .simulator-layout {
    grid-template-columns: 1fr;
  }
  
  .comparison-layout {
    grid-template-columns: 1fr;
  }
  
  .head-to-head {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .stats-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .chart-grid {
    grid-template-columns: 1fr;
  }
  
  .nav-cards-grid {
    grid-template-columns: 1fr;
  }
  
  .insights-grid {
    grid-template-columns: 1fr;
  }
}

/* ====================== */
/* UTILITY CLASSES        */
/* ====================== */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-positive { color: var(--balance-positive); }
.text-negative { color: var(--balance-negative); }
.mb-0 { margin-bottom: 0; }
.mt-md { margin-top: var(--space-md); }

/* ====================== */
/* CARD HOVER PREVIEW     */
/* ====================== */
.card-hover-preview-tooltip {
  position: fixed;
  z-index: 100000;
  pointer-events: auto;
  display: none;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}

.card-hover-preview-content {
  width: 260px;
}

.card-hover-preview-tooltip .hover-preview-card {
  min-height: auto;
  font-size: 12px;
  transform: none !important;
  cursor: default;
}

.card-hover-preview-tooltip .card-header {
  padding: var(--space-sm);
}

.card-hover-preview-tooltip .card-name {
  font-size: 13px;
}

.card-hover-preview-tooltip .card-meta {
  gap: 4px;
}

.card-hover-preview-tooltip .rarity-badge,
.card-hover-preview-tooltip .type-badge {
  font-size: 9px;
  padding: 1px 6px;
}

.card-hover-preview-tooltip .card-body {
  padding: var(--space-sm);
}

.card-hover-preview-tooltip .card-effect {
  font-size: 11px;
  line-height: 1.4;
}

.card-hover-preview-tooltip .card-footer {
  padding: var(--space-xs) var(--space-sm);
  gap: var(--space-xs);
}

.card-hover-preview-tooltip .card-footer-item {
  font-size: 9px;
}

.card-hover-preview-tooltip .card-footer-item span {
  font-size: 8px;
}

.card-hover-preview-tooltip .pip {
  width: 16px;
  height: 16px;
}

.card-hover-preview-tooltip .pip-power,
.card-hover-preview-tooltip .pip-cost {
  width: 20px;
  height: 20px;
}

.card-hover-preview-tooltip .power-badge,
.card-hover-preview-tooltip .cost-badge {
  font-size: 10px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
}

/* Hoverable card name styling for lists/tables */
.card-name-hoverable {
  cursor: pointer;
  transition: color 0.15s;
}

.card-name-hoverable:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}
/* Badge styles for status indicators */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-success {
  background-color: var(--balance-positive-light);
  color: var(--balance-positive);
  border: 1px solid var(--balance-positive);
}

.badge-warning {
  background-color: rgba(217, 119, 6, 0.2);
  color: #b45309;  /* WCAG AA compliant amber */
  border: 1px solid #b45309;
}

.badge-info {
  background-color: rgba(14, 116, 144, 0.2);
  color: #0e7490;
  border: 1px solid #0e7490;
}

.metrics-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}