/* public/css/skin-manager.css */

/* 基础样式调整 */
#skin-manager-modal .details-content {
  padding: 1rem;
}

#skin-manager-modal h2 {
  padding: 0 1rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

/* 暗色模式下的皮肤管理器样式 */
body.dark-mode #skin-manager-modal .modal-content {
  background-color: var(--bg-secondary);
}

body.dark-mode #skin-manager-modal details {
  border: 1px solid var(--border-primary);
  background-color: var(--bg-tertiary);
}

body.dark-mode #skin-manager-modal summary,
body.dark-mode #skin-manager-modal label {
  color: var(--text-primary);
}

body.dark-mode #skin-manager-modal summary {
  border-bottom: 1px solid var(--border-primary);
}

body.dark-mode #skin-manager-modal details[open] summary {
  border-bottom: 1px solid var(--border-primary);
}

body.dark-mode #skin-manager-modal .details-content {
  background-color: var(--bg-secondary);
}

body.dark-mode #skin-manager-modal h3 {
  color: var(--accent-blue);
}

/* 按钮样式 */
body.dark-mode #skin-manager-modal .skin-btn,
body.dark-mode #skin-manager-modal .theme-btn {
  background-color: var(--bg-quaternary);
  color: var(--text-secondary);
  border: 1px solid var(--border-secondary);
}

body.dark-mode #skin-manager-modal .skin-btn:hover,
body.dark-mode #skin-manager-modal .theme-btn:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--text-tertiary);
}

body.dark-mode #skin-manager-modal .skin-btn.selected,
body.dark-mode #skin-manager-modal .theme-btn.selected {
  background-color: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

/* 颜色选择器 */
body.dark-mode #skin-manager-modal .color-btn {
  border-color: var(--border-secondary);
}

body.dark-mode #skin-manager-modal .color-btn.selected {
  border-color: var(--text-primary);
}

body.dark-mode #skin-manager-modal .color-text-input {
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border-secondary);
}

body.dark-mode #skin-manager-modal .color-preview {
  border: 2px solid var(--border-secondary);
}

/* 滑块 */
body.dark-mode #skin-manager-modal .slider-group input[type='range'] {
  background: var(--bg-quaternary);
}

body.dark-mode #skin-manager-modal .slider-group input[type='range']::-webkit-slider-thumb {
  background: #ffffff;
  border: 2px solid var(--border-secondary);
}

body.dark-mode #skin-manager-modal .size-display {
  color: var(--text-primary);
}

/* 字体和背景设置 */
body.dark-mode #skin-manager-modal #font-family-select {
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border-secondary);
}

body.dark-mode #skin-manager-modal .action-btn {
  background-color: var(--button-secondary);
  color: var(--text-primary);
}

body.dark-mode #skin-manager-modal .action-btn:hover {
  background-color: var(--button-secondary-hover);
}

body.dark-mode #skin-manager-modal .action-btn.clear-btn {
    background: var(--accent-red);
    color: white;
}

/* 自定义CSS输入框 */
body.dark-mode #skin-manager-modal #custom-css-input {
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border-secondary);
}

body.dark-mode #skin-manager-modal small {
  color: var(--text-tertiary);
}