/* General body styling */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f7f8fc;
    min-height: 100vh;  /* Minimum height for the body */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;  /* Allow vertical scrolling if content overflows */
}

/* Style the title */
h1 {
    color: #333;
    margin-bottom: 10px;  /* Space below the title */
    font-size: 2em;
    text-align: center;    /* Center the title */
    width: 100%;           /* Ensure it spans full width */
    padding-top: 20px;     /* Add padding at the top */
    box-sizing: border-box; /* To include padding in the element's total width */
}


/* Left Column (Buttons + Table/Map) */
#left-column {
    display: flex;
    flex-direction: column; /* Stack buttons and table/map vertically */
    gap: 10px; /* Space between buttons and table/map */
    width: 45%; /* Allocate 60% of the width for this column */
}


/* View Switcher Buttons */
#view-switcher {
    margin: 20px 0;
    text-align: left;
}

#view-switcher button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 5px 5px 5px 0; /* Ensure spacing between buttons */
    font-size: 1em;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    display: inline-block; /* Ensure buttons stay inline */
}

#view-switcher button:hover {
    background-color: #45a049;
}


#map-area {
    height: 500px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none; /* Hidden by default */
}



/* Wrapper for the table and charts */
#content-wrapper {
    display: flex;
    flex-direction: row; /* Align table and charts side by side */
    justify-content: space-between; /* Space between table and chart areas */
    align-items: center; /* Align items to the top */
    gap: 20px; /* Add spacing between table and chart sections */
    width: 100%; /* Ensure the wrapper spans the full width */
    box-sizing: border-box;
    margin-bottom: 40px;
}

/* Date range slider container styling */
#date-range-slider-container {
    width: 90%;
    margin: 20px auto;
    text-align: center;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Date range slider label styling */
#date-range-slider-container label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #333;
}

/* Date range slider styling */
#date-range-slider {
    width: 80%;
    margin: 10px 0;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: #ddd;
    outline: none;
    opacity: 0.9;
    transition: opacity 0.2s;
    border-radius: 4px;
}

#date-range-slider:hover {
    opacity: 1;
}

#date-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #4CAF50;
    cursor: pointer;
    border-radius: 50%;
}

#date-range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #4CAF50;
    cursor: pointer;
    border-radius: 50%;
}

/* Date range values display styling */
#date-range-values {
    display: block;
    margin-top: 10px;
    font-size: 1em;
    color: #333;
}

/* General table styling */
.table-wrapper {
    width: 50vw; /* Take up 90% of viewport width */
    margin: 20px auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#table-area {
    max-height: 500px;
    min-width: 120px; /* Minimum width to ensure horizontal scroll on smaller screens */
    overflow-x: auto; /* Enable horizontal scroll */
    overflow-y: auto; /* Enable vertical scroll */
    position: relative;
    border: 1px solid #ddd;
}

#table-area table {
    width: 50%;
    table-layout: fixed; /* This ensures columns maintain their widths */
    border-collapse: separate;
    border-spacing: 0;
}

/* Sticky header styling */
#table-area thead th {
    position: sticky;
    top: 0;
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    text-align: left;
    font-size: 1.1em;
    z-index: 1;
    border-bottom: 2px solid #ddd;
}

/* Data cell styling */
#table-area th,
#table-area td {
    padding: 12px;
    border: 1px solid #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Specific column widths */
#table-area td:first-child {
    min-width: 50px;
    width: 50px;
}

#table-area td:nth-child(2) {
    min-width: 200px;
}

/* Alternate row styling */
#table-area tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Hover effects */
#table-area tbody tr:hover {
    background-color: #f0f7ff;
}

#table-area td:hover {
    white-space: normal;
    overflow: visible;
    background-color: #f5f5f5;
    position: relative;
    z-index: 1;
}
/* Truncated content styling */
.truncate {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tooltip styling */
#table-area td span {
    cursor: help;
    border-bottom: 1px dotted #333;
}

/* Scrollbar styling for better visibility */
#table-area::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#table-area::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#table-area::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

#table-area::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Specific column widths */
.col-select { width: 50px; }
.col-case-name { width: 200px; }
.col-docket { width: 150px; }
.col-date { width: 120px; }
.col-court { width: 150px; }
.col-jurisdiction { width: 120px; }
.col-citations { width: 200px; }
.col-word-count { width: 120px; }
.col-page-range { width: 120px; }
.col-judges { width: 200px; }
.col-attorneys { width: 200px; }
/* Radar chart container styling */
#radar-chart-area {
    width: 600px;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Radar chart tooltip styling */
.radar-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none; /* Prevent interaction */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out;
    z-index: 1000; /* Ensure visibility over other elements */
}

/* Radar chart circles (grid lines) */
.axisWrapper circle {
    stroke: #e0e0e0;  /* Light gray for grid circles */
    stroke-width: 0.7;
}

/* Axis lines styling */
.axis line {
    stroke: #cdcdcd;
    stroke-width: 1px;
}

/* Axis labels */
.axis text {
    font-size: 12px;
    fill: #555;
    font-weight: bold;
}

/* Radar area (polygon) styling */
.radarArea {
    fill-opacity: 0.5;
    stroke-width: 2px;
    transition: fill-opacity 0.3s ease;
}

.radarArea:hover {
    fill-opacity: 0.7;
}

/* Radar chart data points */
.radarCircle {
    fill: orange;
    fill-opacity: 0.8;
}
/* Parallel coordinates plot container */
#parallel-coordinates-area {
    position: relative;
    width: 700px;
    margin: 20px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    background-color: #ffffff;
    margin-right: auto; /* Automatically push the chart to the left */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Chart title styling */
.chart-title {
    fill: #333;
    font-family: Arial, sans-serif;
    dominant-baseline: middle;
    font-size: 20px;
    font-weight: bold;
}

.axis-label {
    font-size: 12px;
    fill: #666;
}

#parallel-coordinates-area .dimension-label {
    font-size: 14px;
    fill: #333;
}
/* Styling for lines in the plot */
#parallel-coordinates-area path {
    stroke-width: 2;
    opacity: 0.3; /* Default opacity for all lines */
    transition: opacity 0.3s ease-in-out; /* Smooth transition on hover */
}

#parallel-coordinates-area path:hover {
    stroke: orange; /* Highlight color */
    stroke-width: 4;
    opacity: 1; /* Fully visible on hover */
}


/* Axis label styling */
#parallel-coordinates-area g.axis text {
    font-size: 12px;
    fill: black;
}

.legend-tooltip {
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    padding: 10px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    pointer-events: none;
    opacity: 0; /* Hidden by default */
    z-index: 10;
    transition: opacity 0.3s ease-in-out; /* Smooth fade-in and fade-out */
}

.legend-tooltip-trigger {
    position: absolute; /* Change from relative to absolute */
    right: 10px; /* Position it within the container */
    top: 10px; /* Top-align it within the container */
    font-size: 16px;
    cursor: pointer;
    z-index: 10; /* Ensure it stays on top of other elements */
    pointer-events: auto; /* Allow interaction */
}

.case-tooltip {
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    padding: 10px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    pointer-events: none; /* Prevent tooltip from interfering with hover */
    opacity: 0; /* Hidden by default */
    z-index: 10;
    transition: opacity 0.3s ease-in-out; /* Smooth fade-in/out */
}

.gridCircle {
    opacity: 0.8;
}

.axis text {
    font-family: 'Arial', sans-serif;
}

.radarArea:hover {
    fill-opacity: 0.7;
    transition: fill-opacity 0.2s;
}

.radarPoints circle:hover {
    r: 6;
    transition: r 0.2s;
}
.bar-segment {
    transition: opacity 0.2s;
}

.bar-segment:hover {
    opacity: 1;
}

#similarity-chart-area {
    background-color: #ffffff;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

#similarity-chart-area .alert {
    color: #666;
    font-style: italic;
}

#similarity-chart-area .tooltip {
    position: absolute;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.top-right-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #FF0000; /* YouTube red */
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.top-right-button:hover {
    background-color: #CC0000; /* Darker red on hover */
}