/* 
 * Design Tokens extracted from your best table
 * Based on: manager_first_place_alltime_bars_with_extra_colors.html
 */

:root {
  /* === SPACING === */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 15px;
  --space-5: 20px;
  --space-6: 25px;
  --space-8: 40px;
  
  /* === TYPOGRAPHY === */
  --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  --font-size-xs: 9px;
  --font-size-sm: 10px;
  --font-size-base: 11px;
  --font-size-md: 12px;
  --font-size-lg: 13px;
  --font-size-xl: 14px;
  --font-size-title: 28px;
  --font-size-subtitle: 13px;
  
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --letter-spacing-tight: -0.3px;
  --letter-spacing-wide: 0.8px;
  --letter-spacing-wider: 1px;
  
  --line-height-normal: 1.6;
  
  /* === COLORS === */
  --color-black: #000;
  --color-text-primary: #333;
  --color-text-muted: #666;
  --color-text-subtle: #767676;
  --color-text-faint: #999;
  --color-text-disabled: #aaa;
  
  --color-bg-body: #f8f8f8;
  --color-bg-container: white;
  --color-bg-hover: #fafafa;
  --color-bg-highlight: #f0f0f0;
  
  --color-border-header: #000;
  --color-border-row: #f0f0f0;
  --color-border-footer: #e8e8e8;
  --color-border-tooltip: #ddd;
  
  --shadow-container: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-tooltip: 0 2px 8px rgba(0,0,0,0.15);
  
  /* === TABLE SPECIFIC === */
  --table-font-size: var(--font-size-lg);
  --table-header-font-size: var(--font-size-sm);
  --table-rank-font-size: var(--font-size-md);
  --table-team-font-size: var(--font-size-xl);
  
  --table-cell-height: 35px;
  --table-cell-padding-y: 5px;
  --table-cell-padding-x: var(--space-5);
  --table-header-padding-y: var(--space-2);
  --table-header-padding-bottom: var(--space-1);
  
  --table-header-border: 2px solid var(--color-border-header);
  --table-row-border: 1px solid var(--color-border-row);
  
  /* === BAR CHARTS === */
  --bar-margin-y: 3px;
  --bar-border-radius: 2px;
  --bar-opacity: 0.85;
  --bar-max-width: 85%; /* Leave room for labels */
  --bar-label-margin: 2%; /* Space between bar and label */
  --bar-text-padding: var(--space-1);
  
  /* === HEATMAP === */
  --heatmap-box-padding: var(--space-2);
  --heatmap-box-height: 25px;
  --heatmap-box-min-width: 40px;
  --heatmap-box-border-radius: var(--bar-border-radius);
  
  /* === TOOLTIPS === */
  --tooltip-padding: var(--space-5) var(--space-3);
  --tooltip-border-radius: var(--space-1);
  --tooltip-min-width: 200px;
  --tooltip-chart-height: 50px;
  --tooltip-bar-gap: var(--space-1);
  --tooltip-bar-min-width: var(--space-2);
  --tooltip-bar-border-radius: var(--bar-border-radius);
  --tooltip-label-offset-y: 18px;
  --tooltip-value-offset-y: 18px;
  
  /* === COLUMN WIDTHS === */
  --col-rank-min: 30px;
  --col-rank-max: 40px;
  --col-team-min: 60px;
  --col-team-max: none; /* Let intelligent sizing determine team column width */
  --col-bar-min: 130px;
  --col-bar-max: 170px;
  --col-seasons-min: 50px;
  --col-seasons-max: 60px;
  --col-numeric-min: 70px;
  --col-numeric-max: 90px;
  
  /* === ANIMATIONS === */
  --animation-duration-fast: 200ms;
  --animation-duration-normal: 500ms;
  --animation-duration-slow: 1000ms;
  --animation-stagger-delay: 50ms;
  
  /* === SORTING === */
  --sort-indicator-size: 10px;
  --sort-indicator-color: var(--color-text-muted);
  --sort-indicator-active-color: var(--color-black);
  --sort-hover-bg: var(--color-bg-hover);
  --sort-transition-duration: var(--animation-duration-fast);

  /* === RESPONSIVE === */
  --container-padding-mobile: var(--space-6) var(--space-5);
  --title-font-size-mobile: 22px;
  --table-font-size-mobile: var(--font-size-md);
  --table-header-font-size-mobile: var(--font-size-xs);
}

/* === UTILITY CLASSES === */
.auto-width {
  white-space: nowrap;
  /* width handled by JavaScript - no CSS width property */
}

.align-right {
  text-align: right;
}

.align-center {
  text-align: center;
}

/* === HIGHLIGHTING === */
.highlight-column {
  background-color: var(--color-bg-highlight);
}

.highlight-column .bar-background {
  left: var(--space-3);
}

.highlight-column .bar-value {
  margin-left: var(--space-3);
}

.highlight-header {
  background-color: var(--color-bg-highlight);
}

.highlight-row {
  background-color: var(--color-bg-highlight);
}

/* Ensure highlighted rows don't lose highlighting on hover */
.highlight-row:hover {
  background-color: var(--color-bg-highlight);
}

/* === SORTABLE FUNCTIONALITY === */
.sortable-header {
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: background-color var(--sort-transition-duration) ease;
}

.sortable-header:hover {
  background-color: var(--sort-hover-bg);
}

.sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: var(--sort-indicator-size);
  opacity: 0.3;
  transition: opacity var(--sort-transition-duration) ease;
}

.sort-indicator.active {
  opacity: 1;
  color: var(--sort-indicator-active-color);
}

.sort-indicator.asc::after {
  content: '↑';
}

.sort-indicator.desc::after {
  content: '↓';
}

.sort-indicator.inactive::after {
  content: '↕';
}