@font-face {
    font-family: 'Denim';
    src: url('denim_regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Denim';
    src: url('denim_medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

#floating-ui.hidden{
	opacity:0;
	pointer-events:none;
	transition: opacity 0.3s;
}	

#floating-ui{
	opacity:1;
	pointer-events:all;
	transition: opacity 0.3s;
}


html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: 'Denim', sans-serif;
	font-weight: 500;
	background: transparent;
	color: #C8C8C8;
	background:#111;
}

#canvas-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;  /* Ensure it doesn’t push content */
    height: 100vh;
    overflow: hidden;
}

canvas {
    transform-origin: center;
	/* border: 1px solid #333; */
	border-radius:15px;
}

.controls {
    width: 400px;
    background: rgba(100, 100, 100, 0.45);
    backdrop-filter: blur(15px);
    font-size: 10px;
    position: absolute;
    top: 30px;
    left: 30px;
    border-radius: 10px;
    transition: height 0.3s ease-in-out;
}

#customFileLabel {
    display: flex; /* Flex for proper alignment */
    align-items: center; /* Keep icon and text aligned */
    justify-content: center; /* Center everything */
    gap: 10px; /* Space between icon and text */
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgb(200, 200, 200);
    color: rgb(200, 200, 200);
    padding: 20px 0;
    text-align: center;
    margin-top: 10px;
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    position: relative; /* Needed for overlay positioning */
}

/* Style the icon */
#customFileLabel svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0; /* Prevents shrinking */
    transform: translateY(0); /* Offset slightly if needed */
}

/* Hide the default file input */
#customFileLabel input {
    display: none;
}

/* Hover effect */
#customFileLabel:hover {
    background-color: rgba(255, 255, 255, 0.3);
	border-color:#FFF;
	color:#FFF;
}

#customFileLabel:hover svg path{
	fill:#FFF;
}

/* Filename text (hidden by default) */
#fileNameDisplay {
    margin-top: 10px;
    font-size: 12px;
    color: #C8C8C8;
    display: none;
}

/* Hidden drag overlay */
#dropOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 123, 255, 0.2);
    border-radius: 8px;
    display: none; /* Hidden until dragging */
    align-items: center;
    justify-content: center;
    color: #007BFF;
    font-size: 18px;
    font-weight: bold;
    pointer-events: none; /* Allows clicking through to button */
}


/* Wrapper for label + toggle */
.toggle-container {
    position: absolute; /* Keep absolute positioning */
    top: 25px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 6px; /* Space between label and toggle */
}

/* Small text label */
.toggle-label {
    font-size: 12px;
    color: #c8c8c8;
    user-select: none; /* Prevents accidental selection */
}

/* Container for the toggle */
.toggle-switch {
    width: 32px;
    height: 16px;
    display: inline-block;
    position: relative;
}

/* Hide the default checkbox */
.toggle-switch input {
    display: none;
}

/* Toggle background */
.slider {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    background: #ccc;
    border-radius: 8px;
    transition: background 0.3s;
}

/* The switch circle */
.slider::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: #444;
    border-radius: 50%;
    transition: transform 0.3s;
}

/* When checked */
.toggle-switch input:checked + .slider {
    background: #FFF;
}

.toggle-switch input:checked + .slider::before {
    transform: translate(14px, -50%);
}

/* Show overlay when dragging */
#customFileLabel.dragover #dropOverlay {
    display: flex;
    pointer-events: all;
}

/* Collapsed Header */
#collapsed-ui {
    text-align: center;
    cursor: pointer;
    padding: 15px;
    display: none;
	padding:0;
	width:auto;
}

.csv{
	position:relative;
}

/* Expanded View */
#expanded-ui {
	display: block; 
}

.controlsContainer {
    padding: 16px;
}

.island {
    background: rgba(255, 255, 255, 0); /* Slight transparency */
    border-radius: 10px; /* Rounded corners */
    border: 1px solid rgb(160, 160, 160); /* Stroke */
    padding: 15px;
    margin-bottom: 8px;
}

.island:last-child {
    margin-bottom: 0; /* No bottom margin for last island */
}

.island.logo {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align left */
    padding: 15px; /* Keep consistent with other islands */
}

.logo-svg {
    width: 140px; /* Adjust this to make it larger or smaller */
    height: auto; /* Keeps aspect ratio */
    max-height: 40px; /* Prevents it from getting too tall */
}


.controlsHeader {
    text-align: center;
    padding: 3px 0 0;
}

.controlsHeader.main{
	font-weight: 300;
    font-size: 14px;
}

.controlsHeader h3 {
    margin: 0;
    color: white;
	font-weight:300;
}

.controlSection {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.controlSection h4 {
    color: #C8C8C8;
    margin-bottom: 20px;
    font-size: 12px;
}

.slider-header {
	position:relative;
}

/* Label for the entire section */
.island-label {
    font-size: 12px;
    text-transform: uppercase;
    color: #C8C8C8;
    margin-bottom: 5px;
    display: block;
}

/* Wrapper for label + toggle */
.toggle-container {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 6px; /* Space between label and toggle */
}

/* Small text label */
/* Default label color */
.toggle-label {
    font-size: 10px;
    color: rgb(120, 120, 120); /* Light grey by default */
    user-select: none;
    transition: color 0.3s ease-in-out; /* Smooth transition */
}

/* Change label color when checkbox is checked */
.toggle-container:has(input:checked) .toggle-label {
    color: rgb(200, 200, 200); /* Lighter grey when active */
}

/* Container for the toggle */
.toggle-switch {
    width: 30px;
    height: 16px;
    display: inline-block;
    position: relative;
}

/* Hide the default checkbox */
.toggle-switch input {
    display: none;
}

/* Toggle background */
.slider {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    background: #888; /* Light grey background */
    border-radius: 8px;
    transition: background 0.3s;
}

/* The switch circle */
.slider::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px; /* Keeps 2px padding on the left */
    top: 50%;
    transform: translateY(-50%);
    background: #444; /* Dark grey */
    border-radius: 50%;
    transition: transform 0.3s;
}

/* When checked */
.toggle-switch input:checked + .slider {
    background: rgb(200, 200, 200); /* Lighter when active */
}

.toggle-switch input:checked + .slider::before {
    transform: translate(12px, -50%); /* 16px before, now 14px */
}

/* Wrapper for each slider + value box */
.inputSlider {
    display: flex;
    flex-direction: column; /* Stack label above slider */
    gap: 2px; /* Small gap between label and slider */
	margin-bottom:10px;
}

/* The label above the slider */
.slider-label {
    font-size: 10px;
    font-weight: normal;
    color: #C8C8C8;
}

.inputSlider:first-child{
	margin-top:10px;
}

/* Slider container: slider + value box */
.slider-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sliders take up full width except for value box */
input[type="range"] {
    flex: 1;
    appearance: none;
    height: 8px;
    background: #C8C8C8;
    border-radius: 0;
    outline: none;
}

/* Base slider track */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px; /* Base dark bar height */
    background: rgb(30, 30, 30); /* Dark grey */
    position: relative;
    outline: none;
    cursor: pointer;
    overflow: hidden; /* No weird overflow issues */
}

/* Remove default focus styles & prevent white background */
input[type="range"]:focus,
input[type="range"]:active {
    outline: none;
    box-shadow: none;
    background: rgb(30, 30, 30) !important; /* Force dark grey always */
}

/* Track styling */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: rgb(30, 30, 30) !important; /* Force it to stay dark grey */
}

/* Light grey filled portion */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px; /* Invisible thumb */
    height: 8px; /* Light grey fill effect height */
    background: transparent;
    position: relative;
    margin-top: 0; /* Align the fill effect */
    box-shadow: -100vw 0 0 100vw rgb(200, 200, 200); /* Light grey fill */
}

/* Prevent track from turning white when active */
input[type="range"]:active::-webkit-slider-runnable-track,
input[type="range"]:focus::-webkit-slider-runnable-track {
    background: rgb(30, 30, 30) !important; /* Force it to stay dark grey */
}

/* Firefox support */
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: rgb(30, 30, 30) !important; /* Always dark grey */
}

input[type="range"]::-moz-range-thumb {
    width: 8px;
    height: 8px;
    background: transparent;
    border: none;
    box-shadow: -100vw 0 0 100vw rgb(200, 200, 200);
}

/* Value box at the end */
.slider-value {
    width: 25px;
    height: 16px;
    border-radius: 8px;
	border:1px solid rgb(120, 120, 120);
    background: none;
    color: rgb(160, 160, 160);
    font-size: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent it from shrinking */
}


/* Keep label left-aligned */
.island.export .island-label {
    text-align: left;
    display: block;
}

/* Container for buttons */
.export-buttons {
    display: flex;
    justify-content: space-between; /* Ensures proper spacing */
    width: 100%;
    gap: 10px; /* Space between buttons */
}

/* Make buttons exactly 50% width */
.export-buttons button {
    width: 50%; /* Each button takes up half the container */
}

button{
    background-color: rgba(200, 200, 200, 0.3);
    border: 1px solid rgb(200, 200, 200);
    color: rgb(200, 200, 200);
    padding: 20px 0;
    text-align: center;
    margin-top: 10px;
    border-radius: 10px;
	font-size: 12px;
	display: flex;
    align-items: center;
    justify-content: center;  
    gap: 10px;  
    padding: 15px 0;
    text-align: center;
}

button:hover{
	background-color: rgba(255, 255, 255, 0.3);
	border-color:#FFF;
	color:#FFF;
	cursor:pointer;
}

button:hover svg path{
	fill:#FFF;
}

button svg{
	width: 20px;
    height: 20px;
    flex-shrink: 0; /* Prevents shrinking */
	transform: translateY(-2px);
}
 #helpBtn {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid rgb(200, 200, 200);
	cursor: pointer;
	z-index: 998;
	text-align:center;
	line-height:24px;
	font-size:12px;
	background: rgba(100, 100, 100, 0.45);
    backdrop-filter: blur(15px);
  }

  #helpBtn:hover{
	background: rgb(200, 200, 200);
	color: rgb(30, 30, 30);
  }

  /* Overlay panel */
  #helpOverlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	width: 320px;
	height: 100%;
	background: rgba(100, 100, 100, 0.15);
    backdrop-filter: blur(15px);
	padding: 40px 20px 0 30px;
	z-index: 999;
	font-size: 12px;
	font-weight:400;
  }

  #helpOverlay strong{
	font-weight:500;
  }

  #helpOverlay::before {
	content: "";
	position: absolute;
	top: 0;
	left: -10px; /* adjust width */
	width: 10px;
	height: 100%;
	background: linear-gradient(to left, rgba(100, 100, 100, 0.15) 0%, rgba(100, 100, 100, 0) 100%);
  }

  /* Close button */
  #closeHelp {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
  }