body {
  margin: 0;
  overflow: hidden;
  font-family: "Public Sans", system-ui, -apple-system, sans-serif;
}

#ui-panel {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 280px;
  max-height: calc(100vh - 30px);
  overflow-y: auto;
  z-index: 10;
}

#right-panel {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 260px;
  max-height: calc(100vh - 30px);
  overflow-y: auto;
  z-index: 10;
}

.panel-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.panel-toggle-icon {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.card.collapsed .panel-toggle-icon {
  transform: rotate(180deg);
}

.card.collapsed .card-body {
  display: none;
}

/* MOBILE */
@media (max-width: 768px) {
  #ui-panel,
  #right-panel {
    left: 10px;
    right: 10px;
    width: auto;
    max-height: 45vh;
  }

  #ui-panel {
    top: 10px;
  }

  #right-panel {
    top: auto;
    bottom: 10px;
  }
}

/* Color picker */
input.form-control-color {
  height: 1rem;
  padding: 0;
}

input.form-control-color::-webkit-color-swatch {
  border: none;
}

input.form-control-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

/* DARK MODE */

[data-bs-theme="dark"] input[type="file"].form-control {
  color: #000;
}

[data-bs-theme="dark"] .card-header {
  background-color: var(--bs-dark);
  color: #fff;
}

[data-bs-theme="dark"] .card-header.bg-primary {
  background-color: var(--bs-dark) !important;
}

[data-bs-theme="dark"] .btn {
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #343a40;
  --bs-btn-color: #fff;
}

[data-bs-theme="dark"] .btn-danger {
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
}

[data-bs-theme="dark"] .btn-success {
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
}

[data-bs-theme="dark"] input[type="range"]::-webkit-slider-runnable-track {
  background-color: #343a40;
}

[data-bs-theme="dark"] input[type="range"]::-webkit-slider-thumb {
  background-color: #adb5bd;
}

[data-bs-theme="dark"] input[type="range"]::-moz-range-track {
  background-color: #343a40;
}

[data-bs-theme="dark"] input[type="range"]::-moz-range-thumb {
  background-color: #adb5bd;
}

[data-bs-theme="dark"] .form-check-input {
  background-color: #343a40;
  border-color: #495057;
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}

[data-bs-theme="dark"] .form-select {
  background-color: #343a40;
  color: #fff;
  border-color: #495057;
}