/* ============================================
   VFX FORGE - LAYOUT DESKTOP
   ============================================ */

/* ========== PANELS LATÉRAUX ========== */
aside {
  position: fixed;
  height: 100%;
  width: var(--panel-width);
  background: var(--color-bg-overlay);
  color: var(--color-text-primary);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 2;
  transition: transform var(--transition-normal);
  box-shadow: var(--shadow-lg);
  will-change: transform;
}

#panel-left {
  left: 0;
  border-right: 1px solid var(--color-border);
  transform: translateX(0);
}

#panel-left.hidden {
  transform: translateX(-100%);
}

#panel-right {
  right: 0;
  border-left: 1px solid var(--color-border);
  transform: translateX(0);
}

#panel-right.hidden {
  transform: translateX(100%);
}

/* ========== LISTES DES PANELS ========== */
aside ul {
  list-style: none;
}

aside li {
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-xl);
  transition: background-color var(--transition-fast);
}

aside li:last-child {
  border-bottom: none;
}

aside li:hover {
  background-color: var(--hover-bg);
}

/* ========== CHECKBOXES EN SLIDERS ========== */
.sliders label:has(input[type="checkbox"]) {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-md);
  transition: all var(--transition-fast);
}

.sliders label:has(input[type="checkbox"]):hover {
  background: var(--hover-bg);
  border-color: var(--color-primary);
}

.sliders input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0;
  margin-left: var(--spacing-md);
  flex-shrink: 0;
  accent-color: var(--color-primary);
  transition: transform var(--transition-fast);
}

.sliders input[type="checkbox"]:hover {
  transform: scale(1.1);
}

/* ========== SLIDERS ========== */
.sliders {
  display: none;
  padding-left: var(--spacing-lg);
  padding-top: var(--spacing-md);
  accent-color: var(--color-primary);
  animation: slideDown var(--transition-normal);
}

.sliders.show {
  display: block;
}

.sliders label {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.sliders label:first-child {
  margin-top: var(--spacing-md);
}

.param-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-semibold);
}

.param-name {
  color: var(--color-text-primary);
}

.param-value {
  color: var(--color-primary-light);
  min-width: 45px;
  text-align: right;
  font-feature-settings: "tnum";
}

.slider-container {
  position: relative;
  width: 100%;
  margin-top: var(--spacing-sm);
  height: 20px;
  display: flex;
  align-items: center;
}

.slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--color-border);
  border-radius: var(--border-radius-sm);
  transform: translateY(-50%);
  overflow: hidden;
  z-index: 1;
}

.slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
  transition: width var(--transition-fast);
  z-index: 2;
}

.sliders input[type="range"] {
  position: relative;
  width: 100%;
  height: 20px;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: none !important;
  outline: none;
  z-index: 3;
}

.sliders input[type="range"]::-webkit-slider-track {
  background: transparent !important;
  border: none !important;
  height: 20px;
  -webkit-appearance: none;
}

.sliders input[type="range"]::-webkit-slider-runnable-track {
  background: transparent !important;
  border: none !important;
  height: 20px;
  -webkit-appearance: none;
}

.sliders input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  box-shadow:
    var(--shadow-md),
    0 0 0 2px var(--color-bg-primary);
  border: 2px solid var(--color-bg-primary);
  transition:
    background var(--transition-fast),
    box-shadow var(--transition-fast);
  position: relative;
  z-index: 4;
}

.sliders input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--color-primary-light);
  box-shadow:
    var(--shadow-lg),
    0 0 0 2px var(--color-bg-primary);
}

.sliders input[type="range"]::-webkit-slider-thumb:active {
  box-shadow:
    0 0 0 3px var(--color-primary-light),
    0 0 0 2px var(--color-bg-primary);
}

.sliders input[type="range"]::-moz-range-track {
  background: transparent !important;
  border: none !important;
  height: 6px;
}

.sliders input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-bg-primary);
  box-shadow: var(--shadow-md);
  transition: background var(--transition-fast);
}

.sliders input[type="range"]::-moz-range-thumb:hover {
  background: var(--color-primary-light);
}

.sliders input[type="range"]::-moz-range-progress {
  background: transparent !important;
}

.slider-value-marker {
  position: absolute;
  top: -25px;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-bg-primary);
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
  z-index: 5;
}

.slider-container:hover .slider-value-marker {
  opacity: 1;
}

.sliders input[type="range"]:disabled {
  cursor: not-allowed;
}

.sliders input[type="range"]:disabled ~ .slider-track {
  opacity: 0.6;
}

.sliders input[type="range"]:disabled ~ .slider-track .slider-fill {
  background: var(--color-text-disabled);
}

.sliders input[type="range"]:disabled::-webkit-slider-thumb {
  background: var(--color-text-disabled);
  cursor: not-allowed;
}

.sliders input[type="range"]:disabled::-moz-range-thumb {
  background: var(--color-text-disabled);
  cursor: not-allowed;
}

/* ========== CONTENEURS DE BOUTONS ========== */
.buttons_top,
.buttons_bottom {
  position: fixed;
  height: var(--button-height);
  z-index: 1000;
  pointer-events: none;
}

.buttons_top {
  top: var(--spacing-lg);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0 var(--spacing-lg);
  width: 100%;
}

.buttons_bottom {
  bottom: var(--spacing-lg);
  left: calc(var(--spacing-lg) + var(--panel-width));
  display: flex;
  gap: var(--spacing-md);
  transition: left var(--transition-normal);
}

.buttons_top button,
.buttons_bottom button {
  pointer-events: auto;
}

/* ========== POSITIONNEMENT BOUTONS TOP ========== */
.btn-toggle-effects {
  position: fixed;
  left: calc(var(--spacing-lg) + var(--panel-width));
  top: var(--spacing-lg);
  transition: left var(--transition-normal);
}

body:has(#panel-left.hidden) .btn-toggle-effects {
  left: var(--spacing-lg);
}

.btn-toggle-env {
  position: fixed;
  right: calc(var(--spacing-lg) + var(--panel-width));
  top: var(--spacing-lg);
  transition: right var(--transition-normal);
}

body:has(#panel-right.hidden) .btn-toggle-env {
  right: var(--spacing-lg);
}

body:has(#panel-left.hidden) .buttons_bottom {
  left: var(--spacing-lg);
}

/* ========== BOUTON STATS ========== */
.btn-stats {
  background: var(--color-bg-overlay);
  border: 1px solid var(--color-border);
}

.btn-stats svg {
  stroke: var(--color-text-primary);
  filter: none;
  transition: all var(--transition-fast);
}

.btn-stats:hover svg {
  stroke: var(--color-primary);
  transform: scale(1.1);
}

.btn-stats.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-stats.active svg {
  stroke: var(--color-bg-primary);
}

/* ========== BOUTON HELP ========== */
.btn-help {
  background: var(--color-bg-overlay);
  border: 1px solid var(--color-border);
}

.btn-help svg {
  stroke: var(--color-text-primary);
  filter: none;
  transition: all var(--transition-fast);
}

.btn-help:hover svg {
  stroke: var(--color-primary);
  transform: scale(1.1);
}

.btn-help.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-help.active svg {
  stroke: var(--color-bg-primary);
}

/* ========== RESPONSIVE DESKTOP ========== */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --panel-width: 280px;
    --button-height: 2.5rem;
  }

  aside {
    width: var(--panel-width);
  }

  aside li {
    padding: var(--spacing-lg);
  }
}