/**
 * Custom Pickr Theme for Tenure Tracker
 * Matches dark theme with cyan accents
 */

/* Override Pickr's default theme with our colors */
.pcr-app {
  background: #1a1a2e !important;
  border: 1px solid rgba(80, 227, 194, 0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

/* Color preview area */
.pcr-app .pcr-selection {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 6px !important;
}

/* Hue slider */
.pcr-app .pcr-selection .pcr-color-palette,
.pcr-app .pcr-selection .pcr-color-chooser {
  border-radius: 4px !important;
}

/* Input field */
.pcr-app .pcr-interaction input {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  padding: 6px 8px !important;
}

.pcr-app .pcr-interaction input:focus {
  border-color: rgba(80, 227, 194, 0.6) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(80, 227, 194, 0.2) !important;
}

/* Buttons */
.pcr-app .pcr-interaction .pcr-save,
.pcr-app .pcr-interaction .pcr-cancel,
.pcr-app .pcr-interaction .pcr-clear {
  background: #6D9FC2 !important;
  color: #0A2540 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.pcr-app .pcr-interaction .pcr-save:hover {
  background: #50e3c2 !important;
  transform: translateY(-1px) !important;
}

.pcr-app .pcr-interaction .pcr-cancel {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.pcr-app .pcr-interaction .pcr-cancel:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Swatches */
.pcr-app .pcr-swatches {
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 4px !important;
  padding: 6px !important;
}

.pcr-app .pcr-swatches > button {
  border-radius: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: transform 0.15s ease !important;
}

.pcr-app .pcr-swatches > button:hover {
  transform: scale(1.15) !important;
  border-color: rgba(80, 227, 194, 0.6) !important;
}

/* Result/preview */
.pcr-app .pcr-interaction .pcr-result {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}

/* Color palette knob */
.pcr-app .pcr-selection .pcr-color-palette .pcr-palette {
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5) !important;
}

/* Hue slider knob */
.pcr-app .pcr-selection .pcr-color-chooser .pcr-picker {
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5) !important;
}

/* Make the picker stay above other elements (above dropdown z-index: 10002) */
.pcr-app[data-theme='nano'] {
  z-index: 10003 !important;
}

/* Adjust nano theme specifically */
.pcr-app[data-theme='nano'] .pcr-selection {
  padding: 8px !important;
}

.pcr-app[data-theme='nano'] .pcr-interaction {
  padding: 8px !important;
  padding-top: 4px !important;
}