:root {
--bg-primary: #121212;
--bg-secondary: #1e1e1e; /* Sidebar background / Input, button backgrounds / NEW: Dark background for headers, can be near black / Slightly lighter for active/hover header / Icon color for dark headers / Text color for dark headers / Kept blue as the main accent for other elements */
--accent-color-darker: #007acc;
--success-color: #28a745;
--error-color: #e63946;
--warning-color: #ffc107;
--recording-color: #ff4136;
--grid-line-color: #383838;
--grid-text-color: #6c6c6c;

--font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--sidebar-width: 380px;
}

/* Apply Google Font if Inter is chosen and not a system font / @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); */

body {
margin: 0;
font-family: var(--font-family);
background: var(--bg-primary);
color: var(--text-primary);
display: flex;
height: 100vh;
overflow: hidden;
}

#sidebar {
width: var(--sidebar-width);
background: var(--bg-secondary);
padding: 0;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 0px;
/* Attempt to hide scrollbar / Firefox / IE 10+ / Safari and Chrome */
}

#sidebar h2 {
margin:0;
padding: 18px 20px;
font-size: 1.7em;
font-weight: 400;
color: var(--accent-color);
text-align: center;
border-bottom: 1px solid var(--border-color);
background-color: #101010;
}

/* Collapsible Control Group Styling */
.control-group {
border-bottom: 1px solid #282828;
}
.control-group:last-of-type {
border-bottom: none;
}

.control-group-header {
display: flex;
align-items: center;
padding: 12px 18px;
cursor: pointer;
user-select: none;
background-color: var(--bg-header); /* Dark header background / Placeholder for active border / Accent color border for active header / Adjust padding to compensate for border */
}

.control-group-header .icon {
font-size: 1.1em;
color: var(--icon-color-header);
margin-right: 12px;
width: 20px;
text-align: center;
flex-shrink: 0;
}
.control-group-header .control-group-label {
display: inline;
flex-grow: 1;
font-size: 0.9em;
font-weight: 500; /* Normal weight for dark theme labels / JS will toggle fa-chevron-down / fa-chevron-right */
}

.control-group-content {
padding: 15px;
background-color: var(--bg-secondary);
display: none;
overflow: hidden;
border-top: 1px solid #111111;
}
.control-group-content.open {
display: block;
}
.control-group-content > *:not(:last-child) {
margin-bottom: 12px;
}
.control-group-content label {
margin-top: 0;
display: block;
font-size: 0.85em;
color: var(--text-secondary);
margin-bottom: 5px;
}
.time-input-group {
display: flex;
gap: 5px;
align-items: center;
}
.time-input-group input[type="number"] {
flex: 1;
text-align: center;
}
.time-input-group span {
color: var(--text-secondary);
}

label {
font-weight: bold;
color: var(--text-secondary);
}

select,
.asset-source-toggle button,
input[type="file"],
input[type="number"],
input[type="range"],
button:not(.asset-thumbnail-button):not(.sequence-item-button) {
width: 100%;
padding: 9px 10px;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
color: var(--text-primary);
border-radius: 4px;
box-sizing: border-box;
font-size: 0.9em;
}

select option {
background-color: var(--bg-secondary);
color: var(--text-primary);
}

.asset-source-toggle {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.asset-source-toggle button {
flex: 1;
font-size: 0.85em;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-color);
color: var(--text-primary);
}
.asset-source-toggle button:hover:not(.active):not(:disabled) {
background-color: var(--bg-hover);
}
.asset-source-toggle button.active {
background-color: var(--accent-color);
border-color: var(--accent-color-darker);
font-weight: bold;
color: white;
}
.asset-source-toggle button.active i {
color: white;
}

input[type="file"] {
padding: 6px;
}

button {
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--border-color);
}
button i {
font-size: 0.9em;
color: inherit;
}

button:hover:not(:disabled):not(.asset-source-toggle button) {
background-color: var(--accent-color-darker);
border-color: var(--accent-color);
color: white;
}
button:hover:not(:disabled):not(.asset-source-toggle button) i {
color: white;
}

button:disabled {
background-color: #3a3a3a !important;
color: #777 !important;
cursor: not-allowed !important;
border-color: var(--border-color) !important;
}
button:disabled i {
color: #777 !important;
}

#addSegmentButton {
background-color: var(--success-color);
border-color: var(--success-color);
color: white;
}
#addSegmentButton:hover:not(:disabled) {
background-color: darken(var(--success-color), 10%);
border-color: darken(var(--success-color), 10%);
}
#addSegmentButton i { color: white; }

#playFullSequenceButton, #previewMultiAction {
background-color: var(--warning-color);
border-color: var(--warning-color);
color: #212121;
}
#playFullSequenceButton:hover:not(:disabled),
#previewMultiAction:hover:not(:disabled) {
background-color: darken(var(--warning-color), 10%);
border-color: darken(var(--warning-color), 10%);
}
#playFullSequenceButton i, #previewMultiAction i { color: #212121; }

.clear-button {
background-color: var(--error-color);
border-color: var(--error-color);
font-size: 0.85em;
padding: 8px;
color: white;
}
.clear-button:hover:not(:disabled) {
background-color: darken(var(--error-color), 10%);
border-color: darken(var(--error-color), 10%);
}
.clear-button i { color: white; }

.sequence-item-button {
color: white;
padding: 3px 7px;
font-size: 0.8em;
border-radius: 3px;
cursor: pointer;
border: none;
margin-left: 4px;
min-width: 24px;
text-align: center;
}
.sequence-item-remove-button { background-color: var(--error-color); }
.sequence-item-remove-button:hover:not(:disabled) { background-color: darken(var(--error-color), 10%); }
.sequence-item-move-button { background-color: var(--accent-color); }
.sequence-item-move-button:hover:not(:disabled) { background-color: var(--accent-color-darker); }

#startRecordingButton.recording-active,
#stopRecordingButton {
background-color: var(--recording-color) !important;
border-color: darken(var(--recording-color), 10%) !important;
color: white;
}
#startRecordingButton.recording-active i, #stopRecordingButton i { color: white; }

.file-name, .gallery-placeholder {
font-size: 0.8em;
color: var(--text-secondary);
padding: 5px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
margin-top: 2px;
width: 100%;
text-align: center;
}

input[type="range"] {
padding: 0;
appearance: none;
-webkit-appearance: none;
height: 8px;
background: #454545;
border-radius: 4px;
outline: none;
margin-top: 4px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: var(--accent-color);
border-radius: 50%;
cursor: pointer;
border: 2px solid var(--bg-secondary);
}
input[type="range"]::-moz-range-thumb {
width: 16px;
height: 16px;
background: var(--accent-color);
border-radius: 50%;
cursor: pointer;
border: 2px solid var(--bg-secondary);
}

#canvas-container {
flex: 1;
position: relative;
background: #000;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
#recordingCanvas {
display: none;
}

.grid-cell {
position: absolute;
box-sizing: border-box;
border: 1px solid var(--grid-line-color);
font-size: clamp(7px, 1.2vw, 11px);
color: var(--grid-text-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.grid-cell:hover:not(.active-playback) {
background-color: rgba(255, 255, 255, 0.05);
border-color: var(--accent-color);
}
.grid-cell.start {
background-color: rgba(0, 255, 0, 0.2);
border: 2px solid var(--success-color);
color: #afa;
font-weight: bold;
}
.grid-cell.end {
background-color: rgba(255, 0, 0, 0.2);
border: 2px solid var(--error-color);
color: #faa;
font-weight: bold;
}

#sequenceListContainer {
margin-top: 4px;
}
#sequenceList {
max-height: 120px;
overflow-y: auto;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 8px;
list-style-type: none;
margin: 0;
scrollbar-width: thin;
scrollbar-color: #555 var(--bg-tertiary);
}
#sequenceList::-webkit-scrollbar { width: 5px; }
#sequenceList::-webkit-scrollbar-track { background: var(--bg-tertiary); }
#sequenceList::-webkit-scrollbar-thumb { background-color: #555; border-radius: 2px; border: 1px solid var(--bg-tertiary); }

#sequenceList li {
padding: 6px 5px;
border-bottom: 1px solid #383838;
font-size: 0.85em;
display: flex;
justify-content: space-between;
align-items: center;
}
#sequenceList li:last-child {
border-bottom: none;
}
#sequenceList li.playing {
background-color: var(--accent-color-darker);
color: white;
}
.sequence-item-text {
flex-grow: 1;
margin-right: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sequence-item-controls {
display: flex;
align-items: center;
flex-shrink: 0;
}

.asset-gallery {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px;
background-color: #111;
border: 1px solid var(--border-color);
border-radius: 4px;
min-height: 60px;
max-height: 130px;
overflow-y: auto;
align-content: flex-start;
scrollbar-width: thin;
scrollbar-color: #444 #111;
}
.asset-gallery::-webkit-scrollbar { width: 5px; }
.asset-gallery::-webkit-scrollbar-track { background: #111; }
.asset-gallery::-webkit-scrollbar-thumb { background-color: #444; border-radius: 2px; border: 1px solid #111; }
.asset-gallery::-webkit-scrollbar-thumb:hover { background-color: #666; }

.asset-gallery.horizontal-scroll {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 10px;
align-items: flex-start;
min-height: 90px;
scrollbar-color: #444 #111;
}
.asset-gallery.horizontal-scroll::-webkit-scrollbar-track { background: #111; }
.asset-gallery.horizontal-scroll::-webkit-scrollbar-thumb { background-color: #444; }
.asset-gallery.horizontal-scroll::-webkit-scrollbar-thumb:hover { background-color: #666; }
.asset-gallery.horizontal-scroll::-webkit-scrollbar { height: 5px; }

.asset-thumbnail-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 72px;
}
.asset-thumbnail {
width: 70px;
height: 70px;
object-fit: contain;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 3px;
cursor: default;
margin-bottom: 4px;
}
.asset-thumbnail.active-asset {
border: 2px solid var(--accent-color);
}
.asset-thumbnail-controls {
position: absolute;
top: 2px;
right: 2px;
display: flex;
}
.asset-thumbnail-button {
background-color: rgba(0,0,0,0.7);
color: white;
border: none;
border-radius: 3px;
width: 22px;
height: 22px;
font-size: 12px;
line-height: 22px;
text-align: center;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.asset-thumbnail-controls .asset-thumbnail-button:hover:not(:disabled) {
background-color: var(--error-color) !important;
}

.asset-reorder-buttons {
display: flex;
justify-content: space-between;
gap: 4px;
width: 100%;
margin-top: 2px;
}
.asset-reorder-buttons .asset-thumbnail-button {
background-color: var(--accent-color);
flex: 1;
height: 20px;
font-size: 12px;
}
.asset-reorder-buttons .asset-thumbnail-button:hover:not(:disabled) {
background-color: var(--accent-color-darker) !important;
}
.asset-reorder-buttons .asset-thumbnail-button:disabled {
background-color: #303030 !important;
color: #555 !important;
}

.asset-source-toggle button:disabled {
background-color: #3a3a3a !important;
color: #777 !important;
cursor: not-allowed !important;
border-color: var(--border-color) !important;
}
.asset-source-toggle button.active:disabled {
background-color: var(--accent-color-darker) !important;
opacity: 0.6;
}

hr {
border: none;
border-top: 1px solid var(--border-color);
margin: 15px 0;
}