/* ************** */
/* Control Panel */
/* ************ */

/* Outer panel container: allows "overflow: visible" so the toggle can stick out */
.control-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(280px - 30px);
  height: calc(100vh - 30px);
  padding: 15px;
  background: var(--panel-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin: 0 !important;
  font-size: 14px !important;
  overflow: visible;
  user-select: none;
  transition: background-color, transform 0.3s ease;
}

.panel-content {
  height: 100%;
  overflow-y: auto;
}

.toggle-panel {
  position: absolute;
  left: -30px;
  top: 20px;
  width: 30px;
  height: 60px;
  background: var(--panel-bg);
  border: none;
  border-radius: 15px 0 0 15px;
  box-shadow: -3px 0 5px -1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-icon {
  font-size: 20px;
  transition: transform 0.3s ease;
}

/* Panel closed state */
.control-panel.closed {
  transform: translateX(280px);
}

.control-panel.closed .toggle-icon {
  transform: rotate(180deg);
}

/* Add this if it doesn't exist already */
.control-panel.collapsed {
  transform: translateX(calc(100%));
}

/* Style controls should have fixed spacing */
.style-control {
  width: 100%;
  /* margin: 10px 0 !important; */
}

.style-control + span {
  display: inline-block;
  width: 100%;
  font-size: 0.9em;
  color: var(--info);
  margin: 0 !important;
}

/* Control panel internal spacing should be fixed */
.control-panel .row {
  margin: 0 !important;
}

.control-panel [class^="col-"] {
  padding: 5px !important;
  margin: 0 !important;
}

.control-panel .panel-title {
  padding: 10px 0 !important;
  margin: 0 !important;
  font-size: 18px !important;
}

.control-panel label {
  font-size: 14px !important;
  display: block;
  margin-top: 10px;
}

.control-panel span {
  font-size: 12px !important;
}
/* BUTTONS */

.control-panel .btn {
  font-size: 14px !important;
  margin-bottom: 15px;
}

/* Form padding */
.control-panel input[type="range"] {
  padding: 0 !important;
  margin: 0 !important;
}

.control-panel input {
  font-size: 14px !important;
  margin: 0 !important;
}

/* Color Pallet */
.color-group {
  display: flex;
  flex-direction: column;
  margin: 15px 0;
  position: relative;
}

/* Set color swatch backgrounds using CSS variables directly */
#color-danger {
  background-color: var(--danger);
  color: white;
}

#color-warning {
  background-color: var(--warning);
  color: black;
}

#color-confirm {
  background-color: var(--confirm);
  color: white;
}

#color-info {
  background-color: var(--info);
  color: white;
}

.color-swatch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-radius: var(--border-radius);
  margin-bottom: 10px;
  transition: background-color 0.3s, color 0.3s;
}

.color-swatch:hover {
  transform: scale(1.02);
}

.color-name {
  font-weight: bold;
}

.color-hex {
  font-family: monospace;
  padding: 2px 5px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.color-hex:hover {
  background-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.color-input {
  background: none;
  cursor: pointer;
}
input[type="color"] {
  padding: 0;
  border: 1px solid var(--panel-border);
  outline: none;
  box-shadow: none;
  background: none;
  width: 30px !important;
  height: 30px !important;
}
input::-webkit-color-swatch {
  transition: all 0.3s ease;
  border: none; /* Remove default border */
}

.lock-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
}

/* Tabs */
.tabs {
  display: flex;
  justify-content: space-around;
}

/* Hide only the radio inputs for tabs */
.tabs-wrapper input[type="radio"] {
  display: none;
}

.tabs label {
  flex: 1;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 2px solid var(--panel-border);
  transition: all 0.2s ease-in-out;
}

.tabs label:hover {
  background: var(--panel-dark-bg);
}

/* Active Tab Styling */
#tab-styles:checked ~ .tabs label[for="tab-styles"],
#tab-theme:checked ~ .tabs label[for="tab-theme"] {
  border-bottom-color: var(--info-hover);
  color: var(--info);
  font-weight: bold;
}

/* Hide tab content by default */
.tab-content {
  display: none;
  padding: 15px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* Ensure content shows properly when checked */
#tab-styles:checked ~ .tab-container #styles-content,
#tab-theme:checked ~ .tab-container #theme-content {
  display: block;
}

/* Ensure buttons stay at the bottom */
.panel-buttons {
  position: absolute;
  bottom: 15px;
  width: calc(100% - 30px);
  text-align: center;
}