/* style.css - Modern Dark UI Variables & Global Styles */

:root {
    /* Color Palette - Neon/Cyberpunk inspired but therapeutic */
    --primary-hue: 250; /* Deep Blue/Purple */
    --accent-hue: 170; /* Teal/Cyan */
    --warn-hue: 340; /* Red/Pink */
    
    --bs-primary: hsl(var(--primary-hue), 70%, 60%);
    --bs-primary-rgb: 94, 92, 230;
    
    --bs-info: hsl(var(--accent-hue), 80%, 50%);
    --bs-info-rgb: 20, 220, 200;
    
    --bs-body-bg: #0f111a;
    --bs-body-color: #e0e0e0;
    
    --panel-bg: rgba(25, 27, 35, 0.85);
    --panel-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 12px;
    --modal-bg: #1a1d2e;
    --text-muted-color: rgba(255, 255, 255, 0.75);
}

/* Light Mode Overrides */
[data-bs-theme="light"] {
    --bs-body-bg: #f8f9fa;
    --bs-body-color: #212529;
    --panel-bg: rgba(255, 255, 255, 0.85);
    --panel-border: rgba(0, 0, 0, 0.1);
    --modal-bg: #ffffff;
    --text-muted-color: #6c757d;
    
    /* Adjust primary/info for better contrast on light */
    --bs-primary: hsl(var(--primary-hue), 60%, 45%); 
    --bs-info: hsl(var(--accent-hue), 70%, 40%);
}

body {
    background: radial-gradient(circle at 50% 50%, #1a1d2e 0%, #0f111a 100%);
    min-height: 100vh;
    transition: background 0.3s ease, color 0.3s ease;
}

[data-bs-theme="light"] body {
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #e9ecef 100%);
}

/* Glassmorphism Panels */
.controls, .presets-panel, .sequence-panel, .card {
    background-color: var(--panel-bg) !important;
    border: 1px solid var(--panel-border) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); /* Lighter shadow */
    border-radius: 12px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Modal Styling */
.modal-content {
    background-color: var(--modal-bg);
    color: var(--bs-body-color);
}

/* Tabs Styling */
.nav-tabs .nav-link {
    color: var(--bs-body-color);
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--bs-info);
    border-color: rgba(var(--bs-info-rgb), 0.3);
}

.nav-tabs .nav-link.active {
    color: var(--bs-info);
    background: transparent;
    border-bottom: 2px solid var(--bs-info);
    font-weight: bold;
}

.library-button-row .btn {
    flex: 1 1 0;
    min-width: 0;
}

/* Intro Section */
.intro-section {
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 1rem;
}

.intro-section h5 {
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(var(--bs-info-rgb), 0.3);
}

/* Range Sliders */
.form-range::-webkit-slider-thumb {
    background: var(--bs-info);
    box-shadow: 0 0 10px var(--bs-info);
}

.form-range::-moz-range-thumb {
    background: var(--bs-info);
    box-shadow: 0 0 10px var(--bs-info);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1); 
}
::-webkit-scrollbar-thumb {
    background: #6c757d; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #495057; 
}

/* Visualizer Canvas */
canvas {
    border-radius: 8px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

/* Text Muted Handling */
.text-muted {
    color: var(--text-muted-color) !important;
}

/* Sequence Timeline Styles */
#sequence-list li {
    background: rgba(128, 128, 128, 0.1); /* Neutral bg */
    border-radius: 6px;
    padding: 0.5rem;
    min-width: 140px; /* Ensure enough width for content */
    border: 1px solid rgba(128, 128, 128, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    list-style: none;
    flex-shrink: 0; /* Prevent shrinking in flex container */
    color: var(--bs-body-color);
}

#sequence-list li:hover {
    background: rgba(128, 128, 128, 0.2);
    transform: translateY(-2px);
}

#sequence-list li.step-playing {
    background: rgba(var(--bs-info-rgb), 0.15);
    border-color: var(--bs-info);
    box-shadow: 0 0 15px rgba(var(--bs-info-rgb), 0.2);
    transform: scale(1.02);
}

#sequence-list li.step-completed {
    opacity: 0.6;
    background: rgba(0,0,0,0.05);
    border-color: transparent;
    filter: grayscale(0.5);
}

.sequence-step-info {
    white-space: normal;
}

/* Badge Tweaks */
.badge {
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Table Text Correction */
.table {
    color: var(--bs-body-color);
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
}

.table-hover tbody tr:hover {
    color: var(--bs-info);
    background-color: rgba(128, 128, 128, 0.1);
}

/* Frequency Library Button Enhancement */
.btn-freq-lib {
    background: linear-gradient(45deg, rgba(var(--bs-info-rgb), 0.2), rgba(var(--bs-primary-rgb), 0.2));
    border: 1px solid var(--bs-info);
    color: var(--bs-info);
    transition: all 0.3s ease;
}

.btn-freq-lib:hover {
    background: linear-gradient(45deg, rgba(var(--bs-info-rgb), 0.4), rgba(var(--bs-primary-rgb), 0.4));
    color: var(--bs-body-color);
    box-shadow: 0 0 15px rgba(var(--bs-info-rgb), 0.4);
    transform: translateY(-1px);
}