/* Custom CSS for FineBadminton Dataset Website */

.timeline-segment {
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* Removed duplicated border styles from here, will be in active-segment */
}

.timeline-segment:hover {
    opacity: 0.8;
}

.active-segment {
    border: 2px solid #3b82f6; /* blue-500 */
    box-shadow: 0 0 5px #3b82f6;
    transform: scale(1.02); /* Slight scale for active, instead of on .timeline-segment.active */
    z-index: 10; /* Ensure active segment is on top */
}

/* Style for active language button */
/* These will be updated for new lang switcher */
.lang-btn {
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.lang-btn-active {
    background-color: #2563eb; /* blue-600 */
    color: white;
}

.lang-btn-inactive {
    background-color: #e5e7eb; /* gray-200 */
    color: #374151; /* gray-700 */
}

.lang-btn-inactive:hover {
    background-color: #d1d5db; /* gray-300 */
}


#video-player-container {
    min-height: 300px; /* Ensure a minimum height for the player */
}

#current-frame-img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

body {
    font-family: 'Inter', sans-serif; /* Example: Using a Google Font if added via HTML */
}

/* Style for hierarchical display */
.layer-title {
    font-weight: bold;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    /* color: #4a5568; /* gray-700 - Color will be specific now */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.5rem;
    border-radius: 0.25rem 0.25rem 0 0;
}

.layer-content {
    padding: 0.75rem;
    border: 1px solid;
    border-top: none; /* Title acts as top border */
    border-radius: 0 0 0.25rem 0.25rem;
    margin-bottom: 1rem; /* Increased margin between layers */
    font-size: 0.875rem;
}

.layer-container {
  margin-bottom: 1rem; /* Spacing between layer blocks */
}

/* Foundational Actions Level */
.action-primitives-layer .layer-title {
    background-color: #e0f2fe; /* sky-100 */
    color: #0c4a6e; /* sky-800 */
}
.action-primitives-layer .layer-content {
    border-color: #bae6fd; /* sky-200 */
    background-color: #f0f9ff; /* sky-50 */
}

/* Semantics Layer */
.semantics-layer .layer-title {
    background-color: #ccfbf1; /* teal-100 */
    color: #134e4a; /* teal-800 */
}
.semantics-layer .layer-content {
    border-color: #99f6e4; /* teal-200 */
    background-color: #f0fdfa; /* teal-50 */
}

/* Decision Evaluation Level */
.decision-evaluation-layer .layer-title {
    background-color: #fef3c7; /* amber-100 */
    color: #78350f; /* amber-800 */
}
.decision-evaluation-layer .layer-content {
    border-color: #fde68a; /* amber-200 */
    background-color: #fffbeb; /* amber-50 */
}


.info-item {
    margin-bottom: 0.35rem;
}

.info-label {
    font-weight: 500;
    color: #374151; /* gray-700 */
}

.quality-stars svg {
    /* SVG classes handle size (w-5 h-5), colors are set inline based on filled/empty */
    /* Add any additional shared styling for stars if needed */
    margin-right: 0.1rem;
}

/* Styles for the new round selector buttons */
#round-select-buttons-container {
    display: flex;
    /* flex-wrap: wrap; */ /* Removed to keep buttons in one line */
    white-space: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Allows horizontal scrolling if buttons overflow */
    overflow-y: hidden; /* Hide vertical scrollbar if any */
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-bottom: 8px; /* Add some padding for the scrollbar if it appears */
}

.round-select-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    background-color: #f9fafb; /* gray-50 */
    color: #374151; /* gray-700 */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 0.875rem;
}

.round-select-btn:hover {
    background-color: #f3f4f6; /* gray-100 */
    border-color: #9ca3af; /* gray-400 */
}

.round-select-btn.active {
    background-color: #3b82f6; /* blue-500 */
    color: white;
    border-color: #2563eb; /* blue-600 */
    font-weight: 600;
}

/* Benchmark Section Styles */
#benchmark-table-container table {
    @apply w-full min-w-max table-auto text-center border-collapse;
}

#benchmark-table-container th,
#benchmark-table-container td {
    @apply p-3 border border-gray-300 text-sm text-center;
}

#benchmark-table-container th {
    @apply bg-indigo-100 text-indigo-800 font-semibold;
}

#benchmark-table-container td:first-child {
    @apply font-medium;
}


.benchmark-spatial-card {
    @apply bg-white p-6 rounded-lg shadow-lg cursor-pointer transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105;
    border-left-width: 5px; /* For colored border */
}

.benchmark-spatial-card h4 {
    @apply text-xl font-semibold mb-2;
    /* Color will be dynamic based on category */
}

.benchmark-spatial-card p {
    @apply text-sm text-gray-600;
}

.benchmark-temporal-card {
    @apply bg-white p-4 rounded-md shadow-md cursor-pointer transition-all duration-200 ease-in-out hover:shadow-lg hover:bg-indigo-50;
}

.benchmark-temporal-card h5 {
    @apply text-lg font-medium text-indigo-700;
}

#benchmark-options-container .option-btn {
    @apply block w-full text-left p-3 border border-gray-300 rounded-md hover:bg-gray-100 transition-colors mb-2 shadow-sm;
    /* Ensure text wraps correctly and is aligned left */
    white-space: normal; 
    /* Use flex to align option letter and text nicely */
    display: flex !important; /* Use important if @apply block interferes, Tailwind might need this sometimes */
    align-items: flex-start; /* Align items to the top if text wraps to multiple lines */
}

#benchmark-options-container .option-btn .font-semibold {
    /* Give the option letter (e.g., "A.") a fixed width to align subsequent text */
    flex-shrink: 0;
    width: 2em; /* Adjust as needed */
    text-align: left; /* Ensure option letter itself is left-aligned */
}

#benchmark-options-container .option-btn .option-text-content {
    flex-grow: 1; /* Allow this span to take up remaining width */
    text-align: left; /* Explicitly align text to the left */
    word-break: break-word; /* Help with very long words if any */
}

#benchmark-options-container .option-btn.selected {
    @apply bg-indigo-100 border-indigo-400 ring-2 ring-indigo-300;
}

#benchmark-options-container .option-btn.correct {
    @apply bg-green-100 border-green-400 text-green-800 font-semibold;
}

#benchmark-options-container .option-btn.incorrect {
    @apply bg-red-100 border-red-400 text-red-800 font-semibold;
}

/* Ensure this is after any previous benchmark styles to override if necessary */

/* D3 Benchmark Visualization Styles */
#benchmark-d3-container svg {
    /* SVG itself can be sized by D3, or have a max width/height here */
    font-family: inherit;
}

.spatial-arc path {
    stroke: #fff;
    stroke-width: 1px;
    transition: fill-opacity 0.3s ease, transform 0.3s ease;
}

.spatial-arc:hover path {
    fill-opacity: 0.85;
    transform: scale(1.02);
}

.spatial-text {
    fill: white;
    font-size: 16px;
    font-weight: 500;
    text-anchor: middle;
    pointer-events: none; /* Allow clicks to pass through to arc */
}

.temporal-circle {
    stroke-width: 2px;
    transition: fill-opacity 0.3s ease, r 0.3s ease, transform 0.3s ease;
}

.temporal-circle:hover {
    fill-opacity: 0.85;
    transform: scale(1.1);
}

.temporal-text {
    fill: #333;
    font-size: 12px;
    text-anchor: middle;
    pointer-events: none; /* Allow clicks to pass through to circle */
}

.center-text {
    font-size: 16px;
    font-weight: bold;
    text-anchor: middle;
    fill: #4A5568; /* gray-700 */
}

/* Styles for question text for better distinction */
#benchmark-question-text {
    @apply p-4 bg-gray-50 rounded-lg shadow-md mb-6 text-gray-800 border border-indigo-200;
    /* position: relative; */ /* No longer needed for ::before icon */
    /* padding-left: 2.5rem; */ /* No longer needed for ::before icon, icon is inline now */
    display: flex; /* To align icon and text */
    align-items: flex-start; /* Align icon to top if text wraps */
}

/* Removed ::before rule for SVG icon */

#benchmark-options-container .option-btn .font-semibold {
    /* Give the option letter (e.g., "A.") a fixed width to align subsequent text */
    flex-shrink: 0;
    width: 2em; /* Adjust as needed */
    text-align: left; /* Ensure option letter itself is left-aligned */
}

#benchmark-options-container .option-btn {
    @apply block w-full text-left p-3 border border-gray-300 rounded-md hover:bg-gray-100 transition-colors mb-2 shadow-sm;
    /* Ensure text wraps correctly and is aligned left */
    white-space: normal; 
    /* Use flex to align option letter and text nicely */
    display: flex !important; /* Use important if @apply block interferes, Tailwind might need this sometimes */
    align-items: flex-start; /* Align items to the top if text wraps to multiple lines */
}