* {
  color: #fff;
  font-family: monospace, sans-serif;
  text-rendering: geometricPrecision;
}

body {
  margin: 0;
  padding: 0;
  background-color: #000;
}

select {
    background-color: transparent;
}

.xp-analytics-root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* background: #181a1b; */
  /* padding: 16px; */
  box-shadow: 0 0 16px #0004;
}

.xp-analytics-header {
  padding: 16px;
}

.xp-analytics-org-avatar {
  height: 36px; /* Adjust size as needed */
  width: 36px;
  border-radius: 4px; /* Optional: rounded corners */
  margin: auto 16px; /* Space between avatar and text */
  vertical-align: middle; /* Align with text */
}

.xp-analytics-context-label {
  color: #ccc; /* Match other labels */
  font-size: 20px;
  /* Add other styles as needed, e.g., margin-right */
  /* margin-left: 20px; */
  /* font-weight: 600; */
}

/* Container for the slider above the chart */
.xp-analytics-slider-container {
  padding: 8px 16px; /* Add some padding */
  display: flex;
  flex-direction: column; /* Stack slider and label */
  align-items: center; /* Center items */
  gap: 4px; /* Space between slider and label */
}

.xp-analytics-header-row {
  display: flex;
  /* gap: 32px; */
  align-items: center;
}
.xp-analytics-label {
  font-size: 12px;
  color: #ccc;
  min-width: 120px;
}
.xp-analytics-select {
  font-size: 12px;
  padding: 8px 16px;
  /* min-width: 160px; */
  border-radius: 4px;
}
button {
  margin-left: 4px;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  background: #222;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}

/* Issue Filter Styles */
.xp-analytics-filter-group {
  display: flex;
  align-items: center;
  margin-left: 16px; /* Add some space from the spacer */
}

.xp-analytics-filter-label {
  font-size: 12px;
  color: #ccc;
  margin-right: 8px;
  white-space: nowrap; /* Prevent label wrapping */
}

.xp-analytics-filter-input {
  font-size: 12px;
  padding: 8px 12px; /* Match select padding */
  border-radius: 4px;
  border: 1px solid #444; /* Slightly visible border */
  background-color: #222; /* Match button background */
  color: #fff; /* Match button text color */
  width: 150px; /* Adjust width as needed */
}

.xp-analytics-flex-spacer {
  flex: 1;
}
.xp-analytics-time-range-label {
  font-size: 12px;
  color: #ccc;
  /* min-width: 120px; */
  text-align: center; /* Center the date range text */
  display: block;
  padding-top: 12px;
}
.xp-analytics-time-range-input {
  width: 100%; /* Make slider full width */
  box-sizing: border-box; /* Include padding/border in width */
}
.xp-analytics-chart-area {
  flex: 1;
  width: 100%;
  /* background: #111; */
  border-radius: 4px;
  /* padding: 16px; */
  box-sizing: border-box;
  overflow: hidden;
  /* align-items: center; */
  /* Removed width: 100% as flex will handle it */
}

/* New styles for main content layout */
.main-content {
  display: flex;
  flex: 1; /* Allow this container to grow and fill space */
  overflow: hidden; /* Prevent content overflow */
  /* gap: 16px; */ /* Add gap between chart and sidebar */
  /* padding: 0 16px 16px 16px; */ /* Add padding around main content, except top */
  box-sizing: border-box;
}

.main-content > #xp-analytics-chart-area {
  flex: 1; /* Chart area takes most space */
  min-width: 0; /* Allow chart area to shrink */
}

.main-content > recent-runs-widget { /* Updated tag name */
  flex: 0 0 320px; /* Sidebar fixed width, don't grow or shrink */
  overflow-y: auto; /* Allow sidebar content to scroll if needed */
  border-left: 1px solid #222; /* Optional separator */
  padding-left: 16px; /* Optional padding */
  box-sizing: border-box;
}


svg {
  width: 100%;
}


input#time-range {
    appearance: none; /* Remove default browser styling */
    width: 100%; /* Ensure it takes full width */
    height: 1px; /* Track height - multiple of 4 */
    background: #404040; /* Track color - light grey */
    border-radius: 0; /* Slightly rounded track */
    cursor: pointer;
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
}

/* Style the thumb (the draggable handle) for WebKit browsers */
input#time-range::-webkit-slider-thumb {
    appearance: none;
    width: 8px; /* Thumb width - multiple of 4 */
    height: 8px; /* Thumb height - multiple of 4 */
    background: #fff; /* Thumb color - white */
    border-radius: 8px; /* Slightly rounded thumb */
    cursor: pointer;
}

/* Style the thumb for Firefox */
input#time-range::-moz-range-thumb {
    width: 8px; /* Thumb width - multiple of 4 */
    height: 8px; /* Thumb height - multiple of 4 */
    background: #fff; /* Thumb color - white */
    border: none; /* Remove default border */
    border-radius: 8px; /* Slightly rounded thumb */
    cursor: pointer;
}

/* Style the track for Firefox */
input#time-range::-moz-range-track {
    width: 100%;
    height: 4px;
    background: #ccc;
    border-radius: 4px;
    cursor: pointer;
}

/* Loading overlay styles */
.loading-overlay {
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
  /* right: 0; */
  /* bottom: 0; */
  background: rgba(24, 26, 27, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #00e0ff;
  font-size: 16px;
  /* z-index: 1000; */
  padding: 16px;
}

.loading-overlay-progress {
  /* margin-top: 16px; */
}

.loading-overlay-progress.error {
  color: #ff2d2d;
}

/* Dev mode message styles */
.dev-mode-message {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  color: #00e0ff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.dev-mode-message > div {
  text-align: center;
}


text {
    user-select: none;
    /* Keep pointer-events: none; globally for non-interactive text like axes */
    pointer-events: none;
    font-weight: 900;
}

/* Allow pointer events specifically for warning symbols so tooltips work */
.chart-warning-symbol {
    pointer-events: auto;
}

/* --- Insights View Styles --- */
.insights-view {
  padding: 16px;
  overflow-y: auto; /* Allow scrolling if content overflows */
  height: 100%; /* Ensure it takes available height */
  box-sizing: border-box;
  color: #ccc; /* Lighter text for readability */
}

.contributor-insights {
  margin-bottom: 24px;
  padding-bottom: 16px;
  /* border-bottom: 1px solid #333; */ /* Optional separator */
}

.contributor-insights h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 16px; /* Slightly larger font for contributor name */
  color: #fff; /* White for emphasis */
  border-bottom: 1px solid #444;
  padding-bottom: 8px;
}

.insights-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 12px;
}

.insights-table caption {
  font-weight: bold;
  text-align: left;
  padding-bottom: 8px;
  color: #eee;
  font-size: 14px;
}

.insights-table td {
  padding: 4px 8px;
  border: 1px solid #333; /* Light borders */
  text-align: left;
}

.insights-table td:first-child {
  color: #aaa; /* Dim the labels slightly */
  width: 180px; /* Fixed width for labels */
}

.insights-table td:last-child {
  text-align: right;
  font-weight: bold;
  color: #fff; /* White for values */
  width: 80px; /* Fixed width for values */
}

/* Styles for consolidated tables */
.insights-table.consolidated {
  table-layout: auto; /* Allow table to determine column widths */
  width: 100%; /* Use full width */
}

.insights-table.consolidated th,
.insights-table.consolidated td {
  white-space: nowrap; /* Prevent text wrapping in cells */
  text-align: right; /* Right-align numbers */
  padding: 4px 8px; /* Consistent padding */
}

.insights-table.consolidated th:first-child,
.insights-table.consolidated td:first-child {
  text-align: left; /* Left-align contributor name */
  font-weight: bold;
  color: #fff;
  width: auto; /* Allow contributor column to resize */
  white-space: normal; /* Allow contributor name to wrap if needed */
}

/* Make consolidated headers look clickable and add sort indicators */
.insights-table.consolidated th {
  cursor: pointer;
  position: relative; /* For positioning the indicator */
}

.insights-table.consolidated th:hover {
  background-color: #333; /* Slight hover effect */
}

.insights-table.consolidated th.sorted {
  background-color: #444; /* Indicate sorted column */
}

/* Style for sort indicators (using text content ▲/▼ added in JS) */
.insights-table.consolidated th::after {
  /* content: ''; */ /* Content is set in JS */
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
}


.contributor-separator {
    border: 0;
    height: 1px;
    background-color: #444; /* Darker separator */
    margin-top: 8px; /* Space above separator */
}


button {
    /* font-weight: 600; */
}