/* Theme Variables */
:root {
  /* Typography */
  --theme-font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  --theme-font-size-xs: 0.75rem;
  --theme-font-size-sm: 0.875rem;
  --theme-font-size-md: 1rem;
  --theme-font-size-lg: 1.125rem;
  --theme-font-size-xl: 1.25rem;
  --theme-font-size-2xl: 1.5rem;

  /* Transitions */
  --theme-transition-fast: 0.2s ease;
  --theme-transition-normal: 0.3s ease;

  /* Borders */
  --theme-radius-sm: 6px;
  --theme-radius-md: 8px;
  --theme-radius-lg: 12px;

  /* Base Colors - Light Theme Default */
  --theme-primary: #2F7164;
  --theme-primary-rgb: 47, 113, 100;
  --theme-accent: #059669;
  --theme-accent-rgb: 5, 150, 105;
  --theme-accent-gradient: linear-gradient(135deg, #34d399 0%, #059669 100%);
  --theme-text-primary: #0f172a;  /* Dark slate for primary text */
  --theme-text-secondary: #475569;  /* Medium slate for secondary text */
  --theme-bg-surface: #ffffff;
  --theme-border: rgba(0, 0, 0, 0.1);
  --theme-border-color: var(--theme-border);

  /* Accent Colors */
  --theme-accent-color: #2D6A4F;
  --theme-accent-color-hover: #1E4A36;
  --theme-accent-color-rgb: 45, 106, 79;
  --theme-text-on-accent: #FFFFFF;

  /* Color RGB Values for Opacity */
  --theme-success-color-rgb: 34, 197, 94;
  --theme-warning-color-rgb: 245, 158, 11;
  --theme-error-color-rgb: 239, 68, 68;
  --theme-info-color-rgb: 59, 130, 246;

  /* Banner Variables */
  --theme-banner-bg: #f7f7f7;
  --theme-banner-border: linear-gradient(135deg, #34d399 0%, #059669 100%);
  --theme-banner-accent: linear-gradient(135deg, #34d399 0%, #059669 100%);
  --theme-banner-decoration-1: linear-gradient(135deg, #34d399 0%, #059669 100%);
  --theme-banner-decoration-2: linear-gradient(135deg, #059669 0%, #34d399 100%);
  --theme-banner-decoration: linear-gradient(135deg, #34d399 0%, #059669 100%);

  /* Spacing */
  --theme-spacing-xs: 4px;
  --theme-spacing-sm: 8px;
  --theme-spacing-md: 12px;
  --theme-spacing-lg: 16px;
  --theme-spacing-xl: 24px;

  /* Sidebar Variables */
  --theme-sidebar-width: 250px;
  --theme-sidebar-collapsed-width: 80px;
  --theme-sidebar-transition: width 0.3s ease;
  --theme-sidebar-bg: var(--theme-bg-surface);
  --theme-sidebar-radius: var(--theme-radius-lg);
  --theme-sidebar-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  --theme-sidebar-spacing: 20px;

  /* Menu Items Container */
  --theme-menu-padding-y: 8px;
  --theme-menu-padding-x: 0;

  /* Shadows */
  --theme-shadow-sm: 0 2px 8px rgba(5, 150, 105, 0.3);
  --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* Dashboard Variables */
  --theme-dashboard-excel: #217346;
  --theme-dashboard-sql: #008080;
  --theme-dashboard-oracle: #A4D65E;
  --theme-dashboard-postgres: #4CAF50;
  --theme-dashboard-mysql: #40E0D0;

  /* Dashboard Spacing */
  --theme-dashboard-gap-xs: 1px;
  --theme-dashboard-gap-sm: 3px;
  --theme-dashboard-gap-md: 0.75rem;
  --theme-dashboard-gap-lg: 1rem;

  /* Dashboard Layout Spacing */
  --theme-dashboard-section-spacing: var(--theme-spacing-xl);
  --theme-dashboard-grid-gap: var(--theme-spacing-lg);
  --theme-dashboard-component-spacing: var(--theme-spacing-xl);

  /* Dashboard Grid Layout */
  --theme-dashboard-grid-columns: repeat(auto-fit, minmax(250px, 1fr));
  --theme-dashboard-grid-min-width: 250px;

  /* Dashboard Card */
  --theme-dashboard-card-border-width: 4px;
  --theme-dashboard-card-radius: 8px;
  --theme-dashboard-card-shadow: 0 2px 4px var(--theme-shadow-color);
  --theme-dashboard-card-padding: var(--theme-dashboard-gap-lg);

  /* Dashboard Text */
  --theme-dashboard-text-sm: 0.75rem;
  --theme-dashboard-text-md: 1rem;
  --theme-dashboard-text-lg: 1.2rem;

  /* Dashboard Stats */
  --theme-dashboard-stat-gap-xs: 1px;
  --theme-dashboard-stat-gap-sm: 3px;
  --theme-dashboard-stat-subvalue-color: var(--theme-text-secondary);
  --theme-dashboard-stat-subvalue-size: var(--theme-font-size-xs);
  --theme-dashboard-stat-icon-size: var(--theme-font-size-xs);

  /* Dashboard Icons */
  --theme-dashboard-icon-sm-size: var(--theme-font-size-xs);
  --theme-dashboard-icon-sm-color: var(--theme-text-secondary);
  --theme-dashboard-icon-md-size: var(--theme-font-size-md);
  --theme-dashboard-icon-lg-size: var(--theme-font-size-lg);

  /* Dashboard Chart */
  --theme-dashboard-chart-height: 300px;
  --theme-dashboard-chart-padding: var(--theme-spacing-md);
  --theme-dashboard-chart-bg: var(--theme-bg-surface);
  --theme-dashboard-chart-border: var(--theme-border);
  --theme-dashboard-chart-radius: var(--theme-radius-md);
  --theme-dashboard-chart-shadow: var(--theme-shadow-sm);

  /* Dashboard Chart Colors */
  --theme-dashboard-chart-line: var(--theme-accent-color);
  --theme-dashboard-chart-grid: var(--theme-border);
  --theme-dashboard-chart-text: var(--theme-text-secondary);
  --theme-dashboard-chart-area: rgba(var(--theme-accent-color-rgb), 0.1);

  /* Dashboard Table Variables */
  --theme-dashboard-table-column-sm: 80px;
  --theme-dashboard-table-column-md: 120px;
  --theme-dashboard-table-column-lg: 160px;
  --theme-dashboard-table-padding-x: var(--theme-spacing-md);
  --theme-dashboard-table-padding-y: var(--theme-spacing-sm);

  /* Dashboard Icons */
  --theme-dashboard-icon-opacity: 0.8;
  --theme-dashboard-icon-opacity-hover: 1;

  /* Dashboard Table Container */
  --theme-dashboard-table-container-padding: var(--theme-spacing-md);
  --theme-dashboard-table-container-radius: var(--theme-radius-md);
  --theme-dashboard-table-container-shadow: var(--theme-shadow-sm);

  /* Dashboard Data Source */
  --theme-dashboard-data-source-icon-size: 24px;
  --theme-dashboard-data-source-icon-padding: var(--theme-spacing-xs);
  --theme-dashboard-data-source-gap: var(--theme-spacing-sm);
  --theme-dashboard-data-source-padding-y: var(--theme-spacing-xs);

  /* Dashboard Section Title */
  --theme-dashboard-section-title-size: 1.2rem;
  --theme-dashboard-section-title-weight: 500;

  /* Card Variables */
  --theme-card-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  --theme-card-border: var(--theme-border);
  --theme-card-radius: var(--theme-radius-lg);
  --theme-card-shadow: var(--theme-shadow-sm);
  --theme-card-padding: var(--theme-spacing-xl);
  --theme-card-margin: var(--theme-spacing-md);
  --theme-card-content-padding: var(--theme-spacing-xl);

  /* Card Layout */
  --theme-card-margin-bottom: var(--theme-spacing-md);

  /* Table Base */
  --theme-table-border-spacing: 0;
  --theme-table-text-align: left;

  /* Table Header */
  --theme-table-header-bg: var(--theme-primary);
  --theme-table-header-color: #FFFFFF;
  --theme-table-header-font-weight: 600;
  --theme-table-header-padding: 0.75rem;
  --theme-table-header-border: 1px solid var(--theme-border);
  --theme-table-header-radius: var(--theme-radius-md);

  /* Table Cell */
  --theme-table-cell-padding: 0.75rem;
  --theme-table-cell-border: 1px solid var(--theme-border);
  --theme-table-cell-color: var(--theme-text-primary);

  /* Table Row */
  --theme-table-row-hover-bg: rgba(var(--theme-success-color-rgb), 0.1);

  /* Content Panel */
  --theme-content-panel-bg: var(--theme-bg-surface);
  --theme-content-panel-blur: 8px;
  --theme-content-panel-padding: var(--theme-spacing-lg);
  --theme-content-panel-radius: var(--theme-radius-lg);
  --theme-content-panel-margin: var(--theme-spacing-xl);
  --theme-content-panel-shadow: var(--theme-shadow-md);
  --theme-content-panel-border: 1px solid var(--theme-border);
  --theme-content-panel-sidebar-gap: 10px;
  --theme-content-panel-bg-hover: var(--theme-bg-surface-hover);

  /* Version Indicator */
  --theme-version-indicator-bg: var(--theme-bg-muted);
  --theme-version-indicator-text: var(--theme-text-secondary);
  --theme-version-indicator-border: var(--theme-border);

  /* Tooltip */
  --theme-tooltip-bg: var(--theme-bg-tooltip);
  --theme-tooltip-text: var(--theme-text-on-tooltip);

  /* Spinner */
  --theme-spinner-stroke: var(--theme-primary);

  /* Chip System Variables */
  --theme-chip-padding-x: var(--theme-spacing-sm);
  --theme-chip-padding-y: var(--theme-spacing-xs);
  --theme-chip-gap: var(--theme-spacing-xs);
  --theme-chip-radius: var(--theme-radius-sm);
  --theme-chip-font-size: var(--theme-font-size-sm);
  --theme-chip-font-weight: 500;
  --theme-chip-min-width: 90px;
  --theme-chip-icon-size: var(--theme-font-size-xs);
  --theme-chip-icon-opacity: 0.8;

  /* Status Indicator Variables */
  --theme-status-indicator-size: 8px;
  --theme-status-indicator-width: 4px;
  --theme-status-online-color: #4caf50;
  --theme-status-offline-color: #c62828;
  --theme-status-pending-color: #ef6c00;
  --theme-status-online-bg: #e8f5e9;
  --theme-status-offline-bg: #ffebee;
  --theme-status-pending-bg: #fff3e0;

  /* Font Weights */
  --theme-font-weight-normal: 400;
  --theme-font-weight-medium: 500;
  --theme-font-weight-semibold: 600;
  --theme-font-weight-bold: 700;

  /* Status Chip Colors */
  --theme-chip-success-bg: rgba(var(--theme-success-color-rgb), 0.1);
  --theme-chip-success-color: var(--theme-success-color);
  --theme-chip-success-border: rgba(var(--theme-success-color-rgb), 0.2);

  --theme-chip-warning-bg: rgba(var(--theme-warning-color-rgb), 0.1);
  --theme-chip-warning-color: var(--theme-warning-color);
  --theme-chip-warning-border: rgba(var(--theme-warning-color-rgb), 0.2);

  --theme-chip-error-bg: rgba(var(--theme-error-color-rgb), 0.1);
  --theme-chip-error-color: var(--theme-error-color);
  --theme-chip-error-border: rgba(var(--theme-error-color-rgb), 0.2);

  /* Progress States */
  --theme-progress-low-bg: #82c91e;
  --theme-progress-low-glow: rgba(130, 201, 30, 0.5);

  --theme-progress-medium-bg: #fcc419;
  --theme-progress-medium-glow: rgba(252, 196, 25, 0.5);

  --theme-progress-high-bg: #fa5252;
  --theme-progress-high-glow: rgba(250, 82, 82, 0.6);

  /* Progress Label */
  --theme-progress-label-color: var(--theme-text-primary);
  --theme-progress-label-margin: var(--theme-spacing-sm) 0 0;
  --theme-progress-label-weight: 600;

  /* Progress Stats Variables */
  --theme-progress-stats-margin: var(--theme-spacing-sm) 0;
  --theme-progress-stats-font-weight: 500;

  /* Progress Stats Used */
  --theme-progress-stats-used-color: var(--theme-text-primary);
  --theme-progress-stats-used-font-size: var(--theme-font-size-lg);
  --theme-progress-stats-used-font-weight: 600;

  /* Progress Stats Limit */
  --theme-progress-stats-limit-color: var(--theme-text-secondary);
  --theme-progress-stats-limit-font-size: var(--theme-font-size-lg);
  --theme-progress-stats-limit-font-weight: 500;

  /* Progress Container Variables */
  --theme-progress-container-transform: translateY(-1px);
  --theme-progress-container-shadow: var(--theme-shadow-md);

  /* Progress Bar Variables */
  --theme-progress-bar-height: 12px;
  --theme-progress-bar-bg: var(--theme-bg-surface);
  --theme-progress-bar-radius: var(--theme-radius-md);
  --theme-progress-bar-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Progress Fill Variables */
  --theme-progress-fill-gradient: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%
  );
  --theme-progress-fill-size: 30px 30px;

  /* Graph/Chart Theme Variables */
  --theme-graph-bg: #FFFFFF;
  --theme-graph-grid-color: rgba(160, 160, 160, 0.1);
  --theme-graph-text-color: #374151;
  --theme-graph-border: var(--theme-border);
  --theme-graph-shadow: var(--theme-shadow-sm);
  --theme-graph-radius: var(--theme-radius-lg);
  --theme-graph-padding: var(--theme-spacing-lg);
  --theme-graph-container-bg: var(--theme-bg-surface);
  --theme-graph-container-border: var(--theme-border);
  --theme-graph-container-shadow: var(--theme-shadow-sm);
  --theme-graph-container-radius: var(--theme-radius-lg);
  --theme-graph-container-padding: var(--theme-spacing-lg);
  --theme-graph-tooltip-bg: rgba(255, 255, 255, 0.95);
  --theme-graph-tooltip-color: var(--theme-text-primary);
  --theme-graph-tooltip-border: var(--theme-border);
  --theme-graph-tooltip-shadow: var(--theme-shadow-md);

  /* Chart Theme Variables */
  --theme-chart-container-height: 300px;
  --theme-chart-container-margin: var(--theme-spacing-md);
  --theme-chart-container-bg: var(--theme-graph-container-bg);
  --theme-chart-container-border: var(--theme-graph-container-border);
  --theme-chart-container-radius: var(--theme-graph-container-radius);
  --theme-chart-container-shadow: var(--theme-graph-container-shadow);
  --theme-chart-container-padding: var(--theme-graph-container-padding);

  /* Chart Theme Variables */
  --theme-chart-grid-color: rgba(160, 160, 160, 0.1);
  --theme-chart-text-color: var(--theme-text-primary);
  --theme-chart-line-color: var(--theme-accent-color);
  --theme-chart-point-color: var(--theme-primary);
  --theme-chart-point-hover-color: var(--theme-primary-hover);
  --theme-chart-background: var(--theme-card-bg);

  /* Support Theme Variables */
  --theme-support-panel-bg: var(--theme-bg-surface);
  --theme-support-search-bg: var(--theme-bg-surface);
  --theme-support-ticket-bg: var(--theme-bg-surface);
  --theme-support-ticket-hover: var(--theme-hover-bg);
  --theme-support-ticket-selected: rgba(var(--theme-primary-rgb), 0.1);
  --theme-support-ticket-selected-border: var(--theme-primary);
  --theme-support-id-bg: rgba(var(--theme-primary-rgb), 0.1);

  /* Support Button Colors */
  --theme-support-button-bg: var(--theme-bg-surface);
  --theme-support-button-hover: var(--theme-hover-bg);
  --theme-support-button-active: var(--theme-accent-gradient);

  /* Support Status Colors */
  --theme-support-status-open-bg: rgba(var(--theme-success-color-rgb), 0.1);
  --theme-support-status-open-color: var(--theme-success-color);
  --theme-support-status-voting-bg: rgba(var(--theme-warning-color-rgb), 0.1);
  --theme-support-status-voting-color: var(--theme-warning-color);
  --theme-support-status-closed-bg: rgba(var(--theme-error-color-rgb), 0.1);
  --theme-support-status-closed-color: var(--theme-error-color);

  /* Support Details Panel */
  --theme-support-details-bg: var(--theme-bg-surface);
  --theme-support-header-bg: var(--theme-card-bg);
  --theme-support-header-accent: var(--theme-accent-gradient);
  --theme-support-content-bg: var(--theme-bg-surface);
  --theme-support-description-bg: var(--theme-bg-surface);

  /* Support Message Colors */
  --theme-support-message-bg: var(--theme-bg-surface);
  --theme-support-message-border: var(--theme-border);
  --theme-support-message-hover: var(--theme-hover-bg);
  --theme-support-message-support-bg: rgba(var(--theme-primary-rgb), 0.05);
  --theme-support-message-support-border: rgba(var(--theme-primary-rgb), 0.1);

  /* Support Input Colors */
  --theme-support-input-container-bg: var(--theme-bg-surface);
  --theme-support-input-bg: var(--theme-bg-surface);
  --theme-support-input-border: var(--theme-border);
  --theme-support-input-focus-border: var(--theme-primary);
  --theme-support-input-focus-shadow: rgba(var(--theme-primary-rgb), 0.2);

  /* Support Category Colors */
  --theme-support-category-feature-bg: rgba(var(--theme-info-color-rgb), 0.1);
  --theme-support-category-feature-color: var(--theme-info-color);
  --theme-support-category-bug-bg: rgba(var(--theme-error-color-rgb), 0.1);
  --theme-support-category-bug-color: var(--theme-error-color);
  --theme-support-category-improvement-bg: rgba(var(--theme-success-color-rgb), 0.1);
  --theme-support-category-improvement-color: var(--theme-success-color);

  /* Support Priority Colors */
  --theme-support-priority-low-bg: rgba(var(--theme-success-color-rgb), 0.1);
  --theme-support-priority-low-color: var(--theme-success-color);
  --theme-support-priority-medium-bg: rgba(var(--theme-warning-color-rgb), 0.1);
  --theme-support-priority-medium-color: var(--theme-warning-color);
  --theme-support-priority-high-bg: rgba(var(--theme-error-color-rgb), 0.1);
  --theme-support-priority-high-color: var(--theme-error-color);

  /* Support Icons */
  --theme-support-icon-color: var(--theme-primary);
  --theme-support-icon-secondary: var(--theme-text-secondary);
  --theme-support-icon-size: var(--theme-font-size-sm);

  /* Support Attachments */
  --theme-support-attachment-bg: rgba(var(--theme-primary-rgb), 0.1);
  --theme-support-attachment-color: var(--theme-primary);
  --theme-support-attachment-hover-bg: rgba(var(--theme-primary-rgb), 0.15);

  /* Support Empty State */
  --theme-support-empty-bg: var(--theme-bg-surface);
  --theme-support-empty-icon-color: var(--theme-primary);
  --theme-support-empty-text-color: var(--theme-text-secondary);

  /* Source Name Variables */
  --theme-source-name-weight: 600;
  --theme-source-name-color: var(--theme-text-primary);
  --theme-source-name-margin: 0 0 var(--theme-spacing-sm);

  /* Chart Container Variables */
  --theme-chart-container-height: 240px;
  --theme-chart-container-margin: var(--theme-spacing-lg) 0 0;

  /* Source Status Variables */
  --theme-source-status-padding: 2px 8px;
  --theme-source-status-radius: var(--theme-radius-sm);

  /* Data Products Header Variables */
  --theme-products-header-gap: var(--theme-spacing-md);
  --theme-products-header-padding: var(--theme-spacing-lg);
  --theme-data-products-header-hover-bg: rgba(0, 0, 0, 0.02);

  /* Refill Card Variables */
  --theme-refill-card-border: 2px solid var(--theme-border);
  --theme-refill-card-disabled-bg: rgba(var(--theme-primary-rgb), 0.05);
  --theme-refill-card-disabled-text: var(--theme-text-muted);
  --theme-refill-preview-bg: var(--theme-bg-muted);
  --theme-refill-preview-border: 1px solid var(--theme-border);
  --theme-refill-slider-track-bg: var(--theme-border);
  --theme-refill-slider-thumb-bg: var(--theme-primary);
  --theme-refill-slider-thumb-border: 2px solid var(--theme-bg-surface);
  --theme-refill-card-hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  --theme-refill-card-hover-transform: translateY(-1px);

  /* Refill Card Gradient */
  --theme-refill-card-gradient: linear-gradient(90deg, var(--theme-text-secondary), var(--theme-text-muted));

  /* Refill Card Icon */
  --theme-refill-card-icon-size: var(--theme-font-size-md);
  --theme-refill-card-icon-color: var(--theme-primary);
  --theme-refill-card-icon-opacity: 0.8;

  /* Refill Card Text */
  --theme-refill-card-text-color: var(--theme-text-primary);
  --theme-refill-card-text-size: var(--theme-font-size-md);
  --theme-refill-card-text-weight: 500;

  /* Refill Card Button */
  --theme-refill-card-button-bg: var(--theme-accent-gradient);
  --theme-refill-card-button-text: var(--theme-text-on-accent);
  --theme-refill-card-button-border: 1px solid var(--theme-accent);
  --theme-refill-card-button-radius: var(--theme-radius-md);
  --theme-refill-card-button-padding: var(--theme-spacing-sm);
  --theme-refill-card-button-margin: var(--theme-spacing-xs);

  /* Refill Card Button Hover */
  --theme-refill-card-button-hover-bg: var(--theme-accent-hover);
  --theme-refill-card-button-hover-text: var(--theme-text-on-accent);
  --theme-refill-card-button-hover-border: 1px solid var(--theme-accent-hover);
  --theme-refill-card-button-hover-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

  /* Refill Card Button Active */
  --theme-refill-card-button-active-bg: var(--theme-accent-active);
  --theme-refill-card-button-active-text: var(--theme-text-on-accent);
  --theme-refill-card-button-active-border: 1px solid var(--theme-accent-active);
  --theme-refill-card-button-active-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

  /* Manual Refill Card Variables */
  --theme-refill-card-bg: var(--theme-card-bg);
  --theme-refill-card-border: var(--theme-card-border);
  --theme-refill-card-radius: var(--theme-radius-lg);
  --theme-refill-card-padding: var(--theme-spacing-xl);
  --theme-refill-card-shadow: var(--theme-shadow-sm);
  --theme-refill-card-shadow-hover: var(--theme-shadow-md);
  --theme-refill-card-spacing: var(--theme-spacing-lg);

  /* Refill Card Typography */
  --theme-refill-card-title-color: var(--theme-text-primary);
  --theme-refill-card-text-color: var(--theme-text-secondary);
  --theme-refill-card-title-size: var(--theme-font-size-lg);
  --theme-refill-card-text-size: var(--theme-font-size-sm);

  /* Manual Refill Card Header */
  --theme-refill-header-color: var(--theme-text-primary);
  --theme-refill-header-bg: var(--theme-bg-surface);
  --theme-refill-header-icon-color: var(--theme-text-secondary);
  --theme-refill-header-icon-size: 1.2em;
  --theme-refill-header-gap: var(--theme-spacing-sm);
  --theme-refill-header-padding: var(--theme-spacing-md);
  --theme-refill-header-font-size: var(--theme-font-size-lg);
  --theme-refill-header-font-weight: 600;

  /* Manual Refill Card Description */
  --theme-refill-desc-color: var(--theme-text-secondary);
  --theme-refill-desc-size: var(--theme-font-size-base);
  --theme-refill-desc-margin: var(--theme-spacing-md);
  --theme-refill-desc-line-height: 1.5;

  /* Auto Refill Card Variables */
  --theme-auto-refill-card-bg: linear-gradient(135deg, var(--theme-bg-surface), var(--theme-bg-elevated));
  --theme-auto-refill-card-border: var(--theme-border);
  --theme-auto-refill-card-radius: var(--theme-radius-lg);
  --theme-auto-refill-card-padding: var(--theme-spacing-xl);
  --theme-auto-refill-card-shadow: var(--theme-shadow-sm);
  --theme-auto-refill-card-shadow-hover: var(--theme-shadow-md);
  --theme-auto-refill-card-spacing: var(--theme-spacing-lg);

  /* Auto Refill Switch Variables */
  --theme-auto-refill-switch-bg: var(--theme-bg-surface);
  --theme-auto-refill-switch-active: var(--theme-primary);
  --theme-auto-refill-switch-disabled: var(--theme-text-muted);

  /* Auto Refill Buffer Preview */
  --theme-buffer-preview-bg: var(--theme-bg-surface);
  --theme-buffer-preview-border: var(--theme-border);
  --theme-buffer-preview-radius: var(--theme-radius-md);
  --theme-buffer-preview-padding: var(--theme-spacing-lg);

  /* Buffer Slider Variables */
  --theme-buffer-slider-bg: var(--theme-bg-surface);
  --theme-buffer-slider-border: var(--theme-border);
  --theme-buffer-slider-radius: var(--theme-radius-md);
  --theme-buffer-slider-padding: var(--theme-spacing-lg);
  --theme-buffer-slider-shadow: var(--theme-shadow-sm);
  --theme-buffer-slider-thumb-color: var(--theme-primary);
  --theme-buffer-slider-track-color: var(--theme-bg-elevated);

  /* How It Works Container */
  --theme-how-it-works-bg: var(--theme-bg-surface);
  --theme-how-it-works-border: var(--theme-border);
  --theme-how-it-works-radius: var(--theme-radius-md);
  --theme-how-it-works-padding: var(--theme-spacing-lg);
  --theme-how-it-works-shadow: var(--theme-shadow-sm);

  /* Purchase Button Variables */
  --theme-purchase-btn-bg: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
  --theme-purchase-btn-color: #ffffff;
  --theme-purchase-btn-radius: var(--theme-radius-md);
  --theme-purchase-btn-padding: var(--theme-spacing-md) var(--theme-spacing-xl);
  --theme-purchase-btn-shadow: 0 2px 4px rgba(var(--theme-primary-rgb), 0.2);
  --theme-purchase-btn-shadow-hover: 0 4px 8px rgba(var(--theme-primary-rgb), 0.3);
  --theme-purchase-btn-font-size: var(--theme-font-size-sm);
  --theme-purchase-btn-gap: var(--theme-spacing-sm);

  /* Hover Effects */
  --theme-refill-card-transform: translateY(-2px);
  --theme-purchase-btn-transform: translateY(-1px);
  --theme-purchase-btn-icon-transform: translateX(2px);

  /* Quick Purchase Card Variables */
  --theme-purchase-card-bg: var(--theme-card-bg);
  --theme-purchase-card-border: var(--theme-border);
  --theme-purchase-card-border-hover: var(--theme-primary);
  --theme-purchase-card-radius: var(--theme-radius-lg);
  --theme-purchase-card-padding: var(--theme-spacing-xl);
  --theme-purchase-card-shadow: var(--theme-shadow-sm);
  --theme-purchase-card-shadow-hover: var(--theme-shadow-md);

  /* Quick Purchase Card Typography */
  --theme-purchase-card-amount-color: var(--theme-text-primary);
  --theme-purchase-card-price-color: var(--theme-primary);
  --theme-purchase-card-text-color: var(--theme-text-secondary);
  --theme-purchase-card-amount-size: 1.3em;
  --theme-purchase-card-price-size: 1.6em;
  --theme-purchase-card-text-size: 0.95em;

  /* Quick Purchase Card Accents */
  --theme-purchase-card-accent: var(--theme-primary);
  --theme-purchase-card-accent-gradient: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));

  /* Quick Purchase Card Badge */
  --theme-purchase-card-badge-bg: #ecfdf5;
  --theme-purchase-card-badge-color: var(--theme-accent);
  --theme-purchase-card-badge-border: rgba(5, 150, 105, 0.2);
  --theme-purchase-card-badge-shadow: 0 2px 4px rgba(5, 150, 105, 0.1);

  /* Quick Purchase Card Disabled State */
  --theme-purchase-card-disabled-bg: var(--theme-bg-surface);
  --theme-purchase-card-disabled-border: var(--theme-border);
  --theme-purchase-card-disabled-opacity: 0.75;
  --theme-purchase-card-disabled-btn-bg: #e2e8f0;
  --theme-purchase-card-disabled-btn-color: #a0aec0;

  /* Expand Button Variables */
  --theme-expand-btn-size: 24px;
  --theme-expand-btn-arrow-size: 10px;
  --theme-expand-btn-arrow-color: var(--theme-text-secondary);
  --theme-expand-btn-arrow-hover: var(--theme-text-primary);
  --theme-expand-btn-bg-hover: var(--theme-bg-surface);
  --theme-expand-btn-active-bg: #e3f2fd;
  --theme-expand-btn-active-color: #1976d2;
  --theme-expand-btn-transition: var(--theme-transition-normal);

  /* Usage Card Variables */
  --theme-usage-card-bg: var(--theme-bg-surface);
  --theme-usage-card-radius: var(--theme-radius-lg);
  --theme-usage-card-padding: var(--theme-spacing-md);
  --theme-usage-card-shadow: var(--theme-shadow-sm);
  --theme-usage-card-shadow-hover: var(--theme-shadow-md);

  /* Source Detail Variables */
  --theme-source-detail-bg: var(--theme-bg-surface);
  --theme-source-detail-radius: var(--theme-radius-md);
  --theme-source-detail-padding: var(--theme-spacing-md);
  --theme-source-detail-shadow: var(--theme-shadow-sm);
  --theme-source-detail-margin: 0 0 var(--theme-spacing-sm);

  /* Source Name */
  --theme-source-name-color: var(--theme-text-primary);
  --theme-source-name-weight: 500;
  --theme-source-name-margin: 0 0 var(--theme-spacing-xs);

  /* Source Info */
  --theme-source-info-gap: var(--theme-spacing-sm);
  --theme-source-info-font-size: var(--theme-font-size-sm);

  /* Source Info Tags */
  --theme-source-tag-padding: var(--theme-spacing-xs) var(--theme-spacing-sm);
  --theme-source-tag-radius: var(--theme-radius-sm);
  --theme-source-tag-bg: var(--theme-bg-muted);
  --theme-source-tag-color: var(--theme-text-secondary);

  /* Source Type Tags */
  --theme-source-type-bg: #e3f2fd;
  --theme-source-type-color: #1976d2;
  --theme-source-db-bg: #f3e5f5;
  --theme-source-db-color: #7b1fa2;
  --theme-source-agent-bg: #f1f8e9;
  --theme-source-agent-color: #558b2f;

  /* Source Status */
  --theme-source-status-weight: 500;
  --theme-source-status-active-bg: #e8f5e9;
  --theme-source-status-active-color: #2e7d32;
  --theme-source-status-inactive-bg: #ffebee;
  --theme-source-status-inactive-color: #c62828;

  /* No Sources Message */
  --theme-no-sources-padding: var(--theme-spacing-lg);
  --theme-no-sources-color: var(--theme-text-secondary);

  /* Usage Header */
  --theme-usage-title-color: var(--theme-text-primary);
  --theme-usage-title-size: var(--theme-font-size-md);
  --theme-usage-title-weight: 600;
  --theme-usage-header-margin: 0 0 var(--theme-spacing-sm);

  /* Realm Status */
  --theme-realm-status-padding: var(--theme-spacing-xs) var(--theme-spacing-sm);
  --theme-realm-status-radius: var(--theme-radius-pill);
  --theme-realm-status-font-size: var(--theme-font-size-sm);
  --theme-realm-status-margin: 0 0 0 var(--theme-spacing-sm);

  /* Realm Status States */
  --theme-realm-status-active-bg: #e3f2fd;
  --theme-realm-status-active-color: #1976d2;
  --theme-realm-status-inactive-bg: #ffebee;
  --theme-realm-status-inactive-color: #c62828;

  /* Progress Container */
  --theme-progress-container-bg: linear-gradient(135deg, var(--theme-bg-muted) 0%, var(--theme-bg-subtle) 100%);
  --theme-progress-container-padding: var(--theme-spacing-md);
  --theme-progress-container-radius: var(--theme-radius-md);
  --theme-progress-container-shadow: var(--theme-shadow-sm);
  --theme-progress-container-margin: var(--theme-spacing-md) 0;

  /* Source Card Variables */
  --theme-source-card-bg: #ffffff;
  --theme-source-card-radius: var(--theme-radius-lg);
  --theme-source-card-padding: var(--theme-spacing-lg);
  --theme-source-card-shadow: var(--theme-shadow-sm);
  --theme-source-card-shadow-hover: var(--theme-shadow-md);
  --theme-source-card-transform: translateY(-2px);
  --theme-source-card-border-width: 4px;

  /* Agent Status Variables */
  --theme-agent-status-size: 8px;
  --theme-agent-status-shadow-online: 0 0 0 2px rgba(46, 125, 50, 0.2);
  --theme-agent-status-shadow-offline: 0 0 0 2px rgba(198, 40, 40, 0.2);
  --theme-agent-status-shadow-pending: 0 0 0 2px rgba(245, 124, 0, 0.2);

  /* Stats Group Variables */
  --theme-stats-group-bg: #f8f9fa;
  --theme-stats-group-radius: var(--theme-radius-md);
  --theme-stats-group-padding: var(--theme-spacing-sm) var(--theme-spacing-md);
  --theme-stats-label-color: #64748b;
  --theme-stats-value-color: #2c3e50;
  --theme-stats-value-weight: var(--theme-font-weight-semibold);


  /* Product Feature Variables */
  --theme-product-feature-bg: #f8fafc;
  --theme-product-feature-radius: var(--theme-radius-md);
  --theme-product-feature-padding: var(--theme-spacing-xs) var(--theme-spacing-sm);
  --theme-product-feature-font-size: var(--theme-font-size-sm);
  --theme-product-feature-icon-color: var(--theme-primary);
  --theme-product-feature-icon-size: 1.1em;
  --theme-product-feature-icon-width: 20px;

  /* Product Action Button Variables */
  --theme-action-btn-gradient: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
  --theme-action-btn-gradient-hover: linear-gradient(90deg, var(--theme-accent), var(--theme-primary));
  --theme-action-btn-disabled-bg: #e2e8f0;
  --theme-action-btn-disabled-color: #94a3b8;
  --theme-action-btn-selected-bg: #e2e8f0;
  --theme-action-btn-selected-color: #64748b;

  /* Collapsible Component Variables */
  --theme-collapse-toggle-size: 32px;
  --theme-collapse-toggle-color: var(--theme-primary);
  --theme-collapse-toggle-bg: rgba(47, 113, 100, 0.1);
  --theme-collapse-toggle-bg-hover: rgba(47, 113, 100, 0.2);
  --theme-collapse-header-gap: var(--theme-spacing-md);
  --theme-collapse-header-padding: var(--theme-spacing-sm);
  --theme-collapse-header-hover-bg: rgba(0, 0, 0, 0.02);
  --theme-collapse-content-margin: var(--theme-spacing-md);

  /* Warning and Indicator Variables */
  --theme-warning-bg: #fff5f5;
  --theme-warning-border: #feb2b2;
  --theme-warning-color: #c53030;
  --theme-warning-padding: var(--theme-spacing-sm) var(--theme-spacing-md);
  --theme-warning-radius: var(--theme-radius-md);

  /* No Refill Card Variables */
  --theme-no-refill-border: #e2e8f0;
  --theme-no-refill-gradient: linear-gradient(90deg, #64748b, #94a3b8);
  --theme-no-refill-price-bg: #f1f5f9;
  --theme-no-refill-price-color: #64748b;
  --theme-no-refill-icon-color: #64748b;

  /* Data Products Theme Variables */
  --theme-data-products-section-bg: var(--theme-bg-surface);
  --theme-data-products-section-radius: var(--theme-radius-lg);
  --theme-data-products-section-padding: var(--theme-spacing-lg);
  --theme-data-products-section-margin: var(--theme-spacing-md) 0;
  --theme-data-products-section-shadow: var(--theme-shadow-sm);

  --theme-data-products-header-gap: var(--theme-spacing-md);
  --theme-data-products-header-padding: var(--theme-spacing-md);

  --theme-data-products-grid-gap: var(--theme-spacing-md);
  --theme-data-products-grid-padding: var(--theme-spacing-sm);
  --theme-data-products-grid-margin: var(--theme-spacing-md);

  /* Account Layout Variables */
  --theme-account-nav-bg: var(--theme-bg-surface);
  --theme-account-nav-border: var(--theme-border);
  --theme-account-nav-shadow: var(--theme-shadow-sm);
  --theme-account-tab-color: var(--theme-text-secondary);
  --theme-account-tab-hover: var(--theme-primary);
  --theme-account-tab-hover-bg: rgba(var(--theme-primary-rgb), 0.05);
  --theme-account-tab-active: var(--theme-primary);
  --theme-account-tab-indicator: var(--theme-primary);
  --theme-account-tab-spacing: var(--theme-spacing-md);
  --theme-account-icon-size: 1.125rem;


  /* Dropdown Variables */
  --theme-dropdown-bg: var(--theme-bg-surface);
  --theme-dropdown-text: var(--theme-text-primary);
  --theme-dropdown-border: var(--theme-border);
  --theme-dropdown-shadow: var(--theme-shadow-sm);
  --theme-dropdown-hover-bg: var(--theme-hover-bg, rgba(0, 0, 0, 0.05));
  --theme-dropdown-focus-border: var(--theme-accent-color);
  --theme-dropdown-placeholder: var(--theme-text-secondary);
  --theme-dropdown-disabled-bg: var(--theme-bg-muted, rgba(0, 0, 0, 0.05));
  --theme-dropdown-disabled-text: var(--theme-text-muted, rgba(0, 0, 0, 0.4));

  /* Shared Queries Component Variables */
  --theme-sharedqueries-chip-bg: #5C7CFA;
  --theme-sharedqueries-chip-text: #FFFFFF;
  --theme-sharedqueries-chip-hover-bg: #4C6EF5;
  --theme-sharedqueries-chip-shadow: 0 2px 4px rgba(92, 124, 250, 0.2);

}
/* Datasource Status Chips */
:root {
  /* Status Chip Base */
  --theme-status-chip-height: 24px;
  --theme-status-chip-padding: 0 var(--theme-spacing-sm);
  --theme-status-chip-radius: var(--theme-radius-sm);
  --theme-status-chip-font: var(--theme-font-size-xs);
  --theme-status-chip-weight: 500;

  /* Online Status */
  --theme-status-online-bg: rgba(34, 197, 94, 0.1);
  --theme-status-online-color: rgb(34, 197, 94);
  --theme-status-online-border: rgba(34, 197, 94, 0.2);

  /* Disabled Status */
  --theme-status-disabled-bg: rgba(245, 158, 11, 0.1);
  --theme-status-disabled-color: rgb(245, 158, 11);
  --theme-status-disabled-border: rgba(245, 158, 11, 0.2);

  /* Offline Status */
  --theme-status-offline-bg: rgba(239, 68, 68, 0.1);
  --theme-status-offline-color: rgb(239, 68, 68);
  --theme-status-offline-border: rgba(239, 68, 68, 0.2);
}

/* Shared Queries Status Chips */
.sharedqueries_status-chip {
  display: inline-flex;
  align-items: center;
  height: var(--theme-status-chip-height);
  padding: var(--theme-status-chip-padding);
  border-radius: var(--theme-status-chip-radius);
  font-size: var(--theme-status-chip-font);
  font-weight: var(--theme-status-chip-weight);
  line-height: 1;
  white-space: nowrap;
}

.sharedqueries_status-chip.online {
  background: var(--theme-status-online-bg);
  color: var(--theme-status-online-color);
  border: 1px solid var(--theme-status-online-border);
}

.sharedqueries_status-chip.disabled {
  background: var(--theme-status-disabled-bg);
  color: var(--theme-status-disabled-color);
  border: 1px solid var(--theme-status-disabled-border);
}

.sharedqueries_status-chip.offline {
  background: var(--theme-status-offline-bg);
  color: var(--theme-status-offline-color);
  border: 1px solid var(--theme-status-offline-border);
}

/* Category Selector Variables */
:root {
  --theme-category-card-bg: var(--theme-bg-surface);
  --theme-category-card-border: var(--theme-border);
  --theme-category-card-radius: var(--theme-radius-md);
  --theme-category-card-shadow: var(--theme-shadow-sm);
  --theme-category-card-padding: 1.5rem;
  --theme-category-card-gap: 1rem;

  --theme-category-icon-color: var(--theme-primary);
  --theme-category-icon-size: 1.5rem;

  --theme-coming-soon-bg: var(--theme-accent);
  --theme-coming-soon-text: var(--theme-text-on-accent);

  /* Disabled State */
  --theme-category-card-disabled-bg: var(--theme-bg-surface);
  --theme-category-card-disabled-border: var(--theme-border);
  --theme-category-card-disabled-opacity: 0.6;
  --theme-category-card-disabled-cursor: not-allowed;
}

/* Subscription Component Variables */
:root {
  /* Card Effects */
  --theme-subscription-card-shadow: var(--theme-shadow-md);
  --theme-subscription-card-border: 1px solid var(--theme-border);
  --theme-subscription-card-hover-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  --theme-subscription-badge-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* Category Cards */
  --theme-category-card-bg: var(--theme-bg-surface);
  --theme-category-card-border: 1px solid var(--theme-border);
  --theme-category-card-shadow: var(--theme-shadow-sm);
  --theme-category-card-hover-shadow: var(--theme-shadow-md);
  --theme-category-card-active-border: 2px solid var(--theme-primary);
  --theme-category-card-transition: all 0.3s ease;
  --theme-category-card-hover-transform: translateY(-2px);
  --theme-category-card-active-bg: var(--theme-bg-surface-hover);
  --theme-category-card-padding: 1rem;
  --theme-category-card-radius: 8px;

  /* Subscription Buttons */
  --theme-subscription-btn-radius: 8px;
  --theme-subscription-btn-font: 0.8rem;
  --theme-subscription-btn-weight: 600;
  --theme-subscription-btn-padding: 0.6rem 0.75rem;
  --theme-subscription-btn-transition: all 0.3s ease;
  --theme-subscription-btn-disabled-bg: #e2e8f0;
  --theme-subscription-btn-disabled-color: #1e293b;
  --theme-subscription-btn-active-color: #ffffff;
  --theme-subscription-btn-active-border: #2563eb;
  --theme-subscription-btn-active-hover-color: #ffffff;
  --theme-subscription-btn-active-hover-border: #1d4ed8;

  /* Cancel/Downgrade Button */
  --theme-subscription-cancel-btn-bg: #ef4444;
  --theme-subscription-cancel-btn-hover: #dc2626;
  --theme-subscription-cancel-btn-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
  --theme-subscription-cancel-btn-radius: 6px;

  /* Plan Price Badge */
  --theme-plan-price-bg: rgba(14, 165, 233, 0.1);
  --theme-plan-price-color: var(--theme-text-primary);
  --theme-plan-price-radius: 20px;
  --theme-plan-price-font: 1rem;
  --theme-plan-price-weight: 600;
  --theme-plan-price-padding: 0.25rem 0.75rem;

  /* Change Note */
  --theme-change-note-bg: linear-gradient(to bottom right, #fff7ed, #ffedd5);
  --theme-change-note-border: 1px solid #fed7aa;
  --theme-change-note-radius: 8px;
  --theme-change-note-padding: 1rem;
  --theme-change-note-text-color: var(--theme-text-primary);
  --theme-change-note-text-size: 0.875rem;
  --theme-change-note-text-weight: 500;
  --theme-change-note-line-height: 1.5;

  /* Section Headers */
  --theme-section-header-border: 4px solid #22c55e;
  --theme-section-header-padding: 0.5rem 0 0.5rem 1rem;
  --theme-section-header-margin: 1.5rem 0 1rem;
  --theme-section-header-font: 1.25rem;
  --theme-section-header-weight: 600;
  --theme-section-header-color: var(--theme-text-primary);

  /* Feature Description */
  --theme-feature-title-color: var(--theme-text-primary);
  --theme-feature-title-size: 1rem;
  --theme-feature-title-weight: 600;
  --theme-feature-title-margin: 0 0 0.5rem;
  --theme-feature-desc-color: var(--theme-text-secondary);
  --theme-feature-desc-size: 0.875rem;
  --theme-feature-desc-line-height: 1.5;
  --theme-feature-desc-margin: 0 0 1rem;

  /* Current Plan Badge */
  --theme-current-plan-bg: #2563eb;
  --theme-current-plan-color: #ffffff;
  --theme-current-plan-radius: 20px;
  --theme-current-plan-font: 0.75rem;
  --theme-current-plan-weight: 600;
  --theme-current-plan-padding: 0.25rem 0.75rem;
  --theme-current-plan-shadow: var(--theme-shadow-sm);
  --theme-current-plan-margin: 0.5rem 0;
}

:root {
  /* Subscription Price Section */
  --theme-price-gap: 2px;
  --theme-price-margin: 1rem 0;
  --theme-price-transition: all 0.3s ease;
  --theme-price-color: #0f172a;  /* Dark slate for price */
  --theme-price-currency-color: #334155;  /* Slate for currency */
  --theme-price-period-color: #475569;  /* Medium slate for period */

  /* Feature List Styles */
  --theme-feature-item-gap: 0.5rem;
  --theme-feature-item-margin: 0.15rem 0;
  --theme-feature-item-bg: transparent;
  --theme-feature-item-border: 1px solid var(--theme-border);
  --theme-feature-item-radius: var(--theme-radius-md);

  /* Feature Icon Container */
  --theme-feature-icon-container-padding: 0.15rem;
  --theme-feature-icon-wrapper-padding: 0.25rem;
  --theme-feature-icon-wrapper-radius: var(--theme-radius-sm);
  --theme-feature-icon-wrapper-bg: transparent;

  /* Feature Text Container */
  --theme-feature-text-padding: 0.15rem 0.35rem;

  /* Feature Icon */
  --theme-feature-icon-color: #4ade80;  /* Bright green */
  --theme-feature-icon-size: 1.25rem;

  /* Feature Text */
  --theme-feature-text-color: #334155;  /* Slate for feature text */
  --theme-feature-text-size: 0.95rem;
  --theme-feature-text-weight: 400;
  --theme-feature-text-line-height: 1.5;

  /* Vision Vote Variables */
  --theme-vv-stat-card-bg: var(--theme-bg-surface);
  --theme-vv-stat-card-shadow: var(--theme-shadow-sm);
  --theme-vv-stat-card-radius: var(--theme-radius-lg);
  --theme-vv-stat-value-color: var(--theme-text-primary);
  --theme-vv-stat-label-color: var(--theme-text-secondary);
  --theme-vv-stat-icon-color: var(--theme-accent);

  /* Vision Vote Medal Colors */
  --theme-vv-medal-gold: #FFD700;
  --theme-vv-medal-silver: #C0C0C0;
  --theme-vv-medal-bronze: #CD7F32;

  /* Vision Vote Medal Colors with Gradients */
  --theme-vv-medal-gold-gradient: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
  --theme-vv-medal-gold-bg: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(253, 185, 49, 0.2) 100%);
  --theme-vv-medal-silver-gradient: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
  --theme-vv-medal-silver-bg: linear-gradient(135deg, rgba(192, 192, 192, 0.15) 0%, rgba(160, 160, 160, 0.2) 100%);
  --theme-vv-medal-bronze-gradient: linear-gradient(135deg, #CD7F32 0%, #A0522D 100%);
  --theme-vv-medal-bronze-bg: linear-gradient(135deg, rgba(205, 127, 50, 0.15) 0%, rgba(160, 82, 45, 0.2) 100%);

  /* Vision Vote Card Variables */
  --theme-vv-card-bg: var(--theme-bg-surface);
  --theme-vv-card-shadow: var(--theme-shadow-sm);
  --theme-vv-card-radius: var(--theme-radius-md);
  --theme-vv-card-border: var(--theme-border);

  /* Vision Vote Info Box */
  --theme-vv-info-bg: rgba(var(--theme-info-color-rgb), 0.1);
  --theme-vv-info-border: rgba(var(--theme-info-color-rgb), 0.2);
  --theme-vv-info-color: var(--theme-text-primary);
  --theme-vv-info-icon-color: var(--theme-info-color);

  /* Vision Vote Leaderboard */
  --theme-vv-leader-card-bg: var(--theme-bg-surface);
  --theme-vv-leader-card-shadow: var(--theme-shadow-sm);
  --theme-vv-leader-card-radius: var(--theme-radius-lg);
  --theme-vv-leader-card-padding: var(--theme-spacing-lg);
  --theme-vv-leader-card-border: var(--theme-border);

  /* Vision Vote Medal Colors with Gradients */
  --theme-vv-medal-gold-gradient: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
  --theme-vv-medal-silver-gradient: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
  --theme-vv-medal-bronze-gradient: linear-gradient(135deg, #CD7F32 0%, #A0522D 100%);

  /* Vision Vote Leader Typography */
  --theme-vv-leader-title-color: var(--theme-text-primary);
  --theme-vv-leader-desc-color: var(--theme-text-secondary);
  --theme-vv-leader-votes-color: var(--theme-accent);
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Utility Classes */
.theme-text-primary { color: var(--theme-text-primary); }
.theme-text-secondary { color: var(--theme-text-secondary); }
.theme-bg-surface { background: var(--theme-bg-surface); }
.theme-border { border: 1px solid var(--theme-border); }
.theme-shadow-sm { box-shadow: var(--theme-shadow-sm); }
.theme-shadow-md { box-shadow: var(--theme-shadow-md); }
.theme-radius-sm { border-radius: var(--theme-radius-sm); }
.theme-radius-md { border-radius: var(--theme-radius-md); }
.theme-radius-lg { border-radius: var(--theme-radius-lg); }

/* Menu Item States */
.menu-item.active {
  background: rgba(var(--theme-primary-rgb), 0.2);
  border-left: 4px solid var(--theme-primary);
  padding-left: 12px;
}

/* Banner Component - Shared across pages */
.page-banner {
  padding: var(--theme-spacing-xl);
  background: var(--theme-content-panel-bg);
  backdrop-filter: blur(var(--theme-content-panel-blur));
  border-radius: var(--theme-radius-lg);
  margin-top: var(--theme-content-panel-margin);
  margin-bottom: var(--theme-spacing-lg);
  box-shadow: var(--theme-content-panel-shadow);
  position: relative;
  overflow: hidden;
  border: var(--theme-content-panel-border);
  z-index: 1;
}

.page-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--theme-banner-border);
  z-index: 2;
}

.page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--theme-banner-accent);
  opacity: 0.04;
  z-index: 1;
}

.banner-content {
  position: relative;
  z-index: 3;
  padding-right: 25%;
}

.banner-title {
  font-family: var(--theme-font-family);
  font-size: var(--theme-font-size-2xl);
  font-weight: 800;
  color: var(--theme-text-primary);
  margin: 0;
  margin-bottom: var(--theme-spacing-xs);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.banner-title span {
  color: var(--theme-primary);
  position: relative;
  display: inline-block;
  background: var(--theme-banner-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.banner-subtitle {
  font-family: var(--theme-font-family);
  font-size: var(--theme-font-size-md);
  color: var(--theme-text-secondary);
  margin: 0;
  max-width: 600px;
  line-height: 1.5;
  opacity: 0.95;
}

.banner-decoration {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60%;
  overflow: hidden;
}

.banner-decoration::before,
.banner-decoration::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
}

.banner-decoration::before {
  background: var(--theme-banner-decoration-1);
  clip-path: polygon(100% 0, 100% 100%, 20% 100%, 40% 0);
}

.banner-decoration::after {
  background: var(--theme-banner-decoration-2);
  clip-path: polygon(100% 0, 100% 100%, 35% 100%, 55% 0);
}

/* Table Styles */
.theme-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: var(--theme-table-border-spacing);
  text-align: var(--theme-table-text-align);
}

.theme-table th {
  background: var(--theme-table-header-bg);
  padding: var(--theme-table-header-padding);
  font-weight: var(--theme-table-header-font-weight);
  color: var(--theme-table-header-color);
  border-bottom: var(--theme-table-header-border);
}

.theme-table th:first-child {
  border-top-left-radius: var(--theme-table-header-radius);
}

.theme-table th:last-child {
  border-top-right-radius: var(--theme-table-header-radius);
}

.theme-table td {
  padding: var(--theme-table-cell-padding);
  border-bottom: var(--theme-table-cell-border);
  color: var(--theme-text-primary);
}

.theme-table tr:hover {
  background: var(--theme-table-row-hover-bg);
}

/* Size Chip System */
.dashboard-size-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--theme-chip-gap);
  padding: var(--theme-chip-padding-y) var(--theme-chip-padding-x);
  border-radius: var(--theme-chip-radius);
  font-size: var(--theme-chip-font-size);
  font-weight: var(--theme-chip-font-weight);
  min-width: var(--theme-chip-min-width);
  justify-content: flex-end;
}

.dashboard-size-chip i {
  font-size: var(--theme-chip-icon-size);
  color: var(--theme-primary);
  opacity: var(--theme-chip-icon-opacity);
}

/* Size ranges */
.dashboard-size-chip.mb-small {
  background: var(--theme-chip-success-bg);
  color: var(--theme-chip-success-color);
  border: 1px solid var(--theme-chip-success-border);
}

.dashboard-size-chip.mb-medium {
  background: var(--theme-chip-warning-bg);
  color: var(--theme-chip-warning-color);
  border: 1px solid var(--theme-chip-warning-border);
}

.dashboard-size-chip.mb-large {
  background: var(--theme-chip-error-bg);
  color: var(--theme-chip-error-color);
  border: 1px solid var(--theme-chip-error-border);
}

/* Status Indicators */
.dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: var(--theme-chip-gap);
  font-weight: var(--theme-chip-font-weight);
}

.dashboard-status i {
  opacity: 1;
}

.dashboard-status-success {
  color: var(--theme-chip-success-color);
}

.dashboard-status-success::before {
  content: "";
  color: var(--theme-chip-success-color);
}

.dashboard-status-error {
  color: var(--theme-chip-error-color);
}

.dashboard-status-error::before {
  content: "";
  color: var(--theme-chip-error-color);
}

/* Metric with chip */
.dashboard-metric.with-chip {
  display: flex;
  align-items: center;
  gap: var(--theme-chip-gap);
  justify-content: flex-end;
}

/* Size Chip Component */
.theme-size-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--theme-spacing-xs);
  padding: var(--theme-spacing-xs) var(--theme-spacing-sm);
  border-radius: var(--theme-radius-sm);
  font-size: var(--theme-font-size-sm);
  font-weight: 500;
  min-width: 90px;
  justify-content: flex-end;
}

.theme-size-chip i {
  font-size: var(--theme-font-size-xs);
  margin-right: var(--theme-spacing-xs);
  color: var(--theme-primary);
  opacity: 0.8;
}

/* Size ranges with theme variables */
.theme-size-chip.size-small {
  background: rgba(var(--theme-success-color-rgb), 0.1);
  color: var(--theme-success-color);
  border: 1px solid rgba(var(--theme-success-color-rgb), 0.2);
}

.theme-size-chip.size-medium {
  background: rgba(var(--theme-warning-color-rgb), 0.1);
  color: var(--theme-warning-color);
  border: 1px solid rgba(var(--theme-warning-color-rgb), 0.2);
}

.theme-size-chip.size-large {
  background: rgba(var(--theme-error-color-rgb), 0.1);
  color: var(--theme-error-color);
  border: 1px solid rgba(var(--theme-error-color-rgb), 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .page-banner {
    padding: var(--theme-spacing-lg);
  }

  .banner-title {
    font-size: var(--theme-font-size-xl);
  }

  .banner-subtitle {
    font-size: var(--theme-font-size-sm);
  }
}

/* Chart Section */
.dashboard-chart-section {
  margin-top: var(--dashboard-section-spacing);
  background: var(--theme-graph-container-bg);
  border-radius: var(--theme-graph-container-radius);
  padding: var(--theme-graph-container-padding);
  box-shadow: var(--theme-graph-container-shadow);
  border: 1px solid var(--theme-graph-container-border);
}

.dashboard-chart-container {
  position: relative;
  height: 240px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--theme-graph-bg);
  border-radius: var(--theme-graph-radius);
  padding: var(--theme-graph-padding);
  box-shadow: var(--theme-graph-shadow);
  border: 1px solid var(--theme-graph-border);
}

.dashboard-transfer-chart {
  width: 100% !important;
  height: 100% !important;
  max-height: 240px;
}

/* Collapsible Component */
.theme-collapsible {
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-lg);
  overflow: hidden;
  margin-bottom: var(--theme-spacing-md);
}

.theme-collapsible-header {
  padding: var(--theme-spacing-md) var(--theme-spacing-lg);
  background: var(--theme-bg-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  transition: background-color var(--theme-transition-normal);
}

.theme-collapsible-header:hover {
  background: var(--theme-hover-bg);
}

.theme-collapsible-title {
  display: flex;
  align-items: center;
  gap: var(--theme-spacing-sm);
  color: var(--theme-text-primary);
  font-weight: 500;
  font-size: var(--theme-font-size-md);
}

.theme-collapsible-icon {
  color: var(--theme-text-secondary);
  transition: transform var(--theme-transition-normal);
}

.theme-collapsible-content {
  transition: max-height var(--theme-transition-normal);
  overflow: hidden;
}

.theme-collapsible-content.collapsed {
  max-height: 0;
}

/* Collapsible Transitions */
.collapsible-transition {
  transition: var(--theme-transition-normal);
  overflow: hidden;
}

.collapsible-shadow {
  box-shadow: var(--theme-shadow-md);
}

/* Chart Styles */
.chart-container {
  position: relative;
  width: 100%;
  height: var(--theme-chart-container-height);
  margin-top: var(--theme-chart-container-margin);
  background: var(--theme-chart-container-bg);
  border: 1px solid var(--theme-chart-container-border);
  border-radius: var(--theme-chart-container-radius);
  box-shadow: var(--theme-chart-container-shadow);
  padding: var(--theme-chart-container-padding);
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Content Panel Spacing */
.content-panel {
  margin-left: var(--theme-content-panel-sidebar-gap);
}