/* Remove underline from all links */
a {
    text-decoration: none;
}

/* Timeline Slider Styling */
input[type=range].timeline-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent; 
}

input[type=range].timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    margin-top: -6px; 
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

input[type=range].timeline-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #4b5563;
    border-radius: 2px;
}

input[type=range].timeline-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
}

/* Source Selection Buttons */
.btn-source {
    background: rgba(31, 41, 55, 0.8); /* gray-800 */
    color: #d1d5db; /* gray-300 */
    padding: 4px 10px;
    font-size: 0.875rem;
    border-radius: 6px;
    border: 1px solid rgba(75, 85, 99, 0.5); /* gray-600 */
    transition: all 0.2s;
    cursor: pointer;
    white-space: nowrap;
}
.btn-source:hover {
    background: rgba(55, 65, 81, 0.9); /* gray-700 */
    color: white;
    border-color: rgba(118, 185, 0, 0.5); /* green-400 */
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.btn-source.active {
    background: rgba(118, 185, 0, 0.9); /* Green #76b900 */
    color: white;
    border-color: rgba(118, 185, 0, 1);
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(118, 185, 0, 0.2);
}

/* Action Buttons (Paper, GitHub, etc.) */
.btn-action {
    background: #76b900; /* Green */
    color: white;
    padding: 8px 20px;
    font-size: 0.95rem;
    border-radius: 50px; /* Fully rounded pill shape */
    border: 1px solid #76b900;
    transition: all 0.2s;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
}
.btn-action:hover:not(:disabled) {
    background: white;
    color: #76b900;
    border-color: #76b900;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.btn-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* Navigation Buttons */
.nav-btn {
    background: rgba(31, 41, 55, 0.8);
    color: #d1d5db;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(75, 85, 99, 0.5);
    transition: all 0.2s;
    cursor: pointer;
    font-size: 1rem;
}
.nav-btn:hover:not(:disabled) {
    background: rgba(118, 185, 0, 0.8); /* Green */
    color: white;
    border-color: rgba(118, 185, 0, 1);
    transform: scale(1.05);
}
.nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Side Navigation Buttons */
.nav-btn-side {
    background: rgba(31, 41, 55, 0.9);
    color: #d1d5db;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(75, 85, 99, 0.6);
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}
.nav-btn-side:hover:not(:disabled) {
    background: rgba(118, 185, 0, 0.9); /* Green */
    color: white;
    border-color: rgba(118, 185, 0, 1);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(118, 185, 0, 0.4);
}
.nav-btn-side:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: scale(0.95);
}
.nav-btn-side:active:not(:disabled) {
    transform: scale(1.05);
}

/* Sample Counter Styling */
#gridSampleCounter {
    text-align: center;
    line-height: 1.4;
}

#gridSampleCounter span {
    display: block;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .btn-source {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    
    .nav-btn {
        padding: 8px 12px;
        font-size: 0.875rem;
    }
    
    .nav-btn-side {
        padding: 8px 10px;
        font-size: 0.85rem;
        min-width: 34px;
        height: 34px;
    }
}

/* Top Navigation Hover Effect */
.nav-logo-link {
    transition: opacity 0.2s ease;
}
.nav-logo-link:hover {
    opacity: 0.8;
}

/* Light Mode Overrides */
body.light-mode {
    background-color: #ffffff;
    color: #111827; /* gray-900 */
}

body.light-mode nav {
    background-color: #ffffff !important;
    border-bottom-color: #e5e7eb; /* gray-200 */
}

body.light-mode nav span {
    color: #111827 !important;
}

body.light-mode .bg-gray-950,
body.light-mode .bg-gray-900 {
    background-color: #ffffff !important;
    color: #111827 !important;
}

body.light-mode .bg-gray-900\/95 {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

body.light-mode .text-gray-100,
body.light-mode .text-white {
    color: #111827 !important;
}

body.light-mode .text-gray-300,
body.light-mode .text-gray-400 {
    color: #4b5563 !important; /* gray-600 */
}

body.light-mode .border-gray-800 {
    border-color: #e5e7eb !important; /* gray-200 */
}

/* Specific component overrides for light mode */
body.light-mode header {
    background-color: #f9fafb !important; /* gray-50 */
    border-bottom: 1px solid #e5e7eb !important;
}

body.light-mode .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important;
}

/* Video containers in light mode */
body.light-mode .relative.rounded-xl {
    border-color: #e5e7eb !important;
    background-color: #f3f4f6 !important; /* gray-100 */
}

/* Labels over videos */
body.light-mode .absolute.top-2.left-2 {
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: #000 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Controls backgrounds */
body.light-mode #timeline-controls-grid,
body.light-mode .bg-gray-900\/95 {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Buttons in light mode */
body.light-mode .btn-source {
    background: #f3f4f6; /* gray-100 */
    color: #374151; /* gray-700 */
    border-color: #d1d5db; /* gray-300 */
}

body.light-mode .btn-source:hover {
    background: #e5e7eb; /* gray-200 */
    color: #111827; /* gray-900 */
}

body.light-mode .btn-source.active {
    background: #76b900; /* green */
    color: white !important;
    border-color: #76b900;
}

body.light-mode .btn-action {
    background: #76b900; /* green */
    color: white;
    border-color: #76b900;
}

body.light-mode .btn-action:hover:not(:disabled) {
    background: white; /* white background on hover */
    color: #76b900; /* green text */
    border-color: #76b900;
}


body.light-mode .nav-btn-side {
    background: rgba(255, 255, 255, 0.9);
    color: #374151;
    border-color: #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.light-mode .nav-btn-side:hover:not(:disabled) {
    background: #76b900;
    color: white;
}

/* Separators in nav */
body.light-mode .bg-gray-700 {
    background-color: #d1d5db !important; /* gray-300 */
}

/* Theme toggle button */
body.light-mode #themeToggle {
    color: #4b5563;
}
body.light-mode #themeToggle:hover {
    color: #111827;
}

/* Speed control in light mode */
body.light-mode #speedControlGrid {
    background-color: #f3f4f6 !important; /* gray-100 */
    color: #374151 !important; /* gray-700 */
    border-color: #d1d5db !important; /* gray-300 */
}
body.light-mode #speedControlGrid:focus {
    border-color: #76b900 !important; /* green */
}