/* calm-wm-kladde-polish.css — sage design overlay for #wm-kladde-panel
   Every selector scoped under #wm-kladde-panel; every property !important.
   Issue #1747 */

/* ── Panel card ── */
#wm-kladde-panel {
  background: #FBF8F2 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(58, 47, 38, 0.08) !important;
  margin: 8px !important;
  padding: 22px 22px 20px !important;
  gap: 22px !important;
  box-shadow: 0 1px 0 rgba(58, 47, 38, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── Header ── */
#wm-kladde-panel .wm-kladde-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: #3A2F26 !important;
  font-family: var(--font-family, Inter, system-ui, -apple-system, sans-serif) !important;
}
#wm-kladde-panel .wm-kladde-header svg {
  color: #6E8A7E !important;
}

/* ── Landmarks ── */
#wm-kladde-panel .wm-kladde-label {
  font-size: 11px !important;
  font-weight: 650 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: #9A8E82 !important;
}
#wm-kladde-panel .wm-kladde-divider {
  font-size: 11px !important;
  font-weight: 650 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: #9A8E82 !important;
  gap: 10px !important;
  padding: 4px 0 !important;
}
#wm-kladde-panel .wm-kladde-divider::before,
#wm-kladde-panel .wm-kladde-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: rgba(58, 47, 38, 0.08) !important;
}

/* ── Tone value & description ── */
#wm-kladde-panel .wm-kladde-tone-value {
  font-size: 18px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: #3A2F26 !important;
}
#wm-kladde-panel .wm-kladde-tone-desc {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #9A8E82 !important;
  margin-bottom: 4px !important;
}

/* ── Slider: native range ── */
#wm-kladde-panel .wm-kladde-tone-endpoints {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #9A8E82 !important;
}

#wm-kladde-panel .wm-kladde-tone-range {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 6px !important;
  background: transparent !important;
  cursor: pointer !important;
  margin: 4px 0 !important;
  outline: none !important;
}
#wm-kladde-panel .wm-kladde-tone-range::-webkit-slider-runnable-track {
  height: 6px !important;
  border-radius: 3px !important;
  background: linear-gradient(
    to right,
    #6E8A7E 0%,
    #6E8A7E var(--calm-slider-pct, 50%),
    rgba(58, 47, 38, 0.08) var(--calm-slider-pct, 50%),
    rgba(58, 47, 38, 0.08) 100%
  ) !important;
}
#wm-kladde-panel .wm-kladde-tone-range::-moz-range-track {
  height: 6px !important;
  border-radius: 3px !important;
  background: rgba(58, 47, 38, 0.08) !important;
  border: none !important;
}
#wm-kladde-panel .wm-kladde-tone-range::-moz-range-progress {
  height: 6px !important;
  border-radius: 3px !important;
  background: #6E8A7E !important;
}
#wm-kladde-panel .wm-kladde-tone-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #6E8A7E !important;
  border: 2px solid #FFFEFB !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  margin-top: -5px !important;
  transition: width 140ms ease, height 140ms ease, margin-top 140ms ease !important;
}
#wm-kladde-panel .wm-kladde-tone-range::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #6E8A7E !important;
  border: 2px solid #FFFEFB !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
#wm-kladde-panel .wm-kladde-tone-range:active::-webkit-slider-thumb {
  width: 18px !important;
  height: 18px !important;
  margin-top: -6px !important;
}
#wm-kladde-panel .wm-kladde-tone-range:active::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
}
#wm-kladde-panel .wm-kladde-tone-range:focus,
#wm-kladde-panel .wm-kladde-tone-range:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: 4px !important;
  border-radius: 3px !important;
}

/* Legacy custom slider: hide if still present in DOM */
#wm-kladde-panel .wm-kladde-tone-track {
  display: none !important;
}

/* ── Action row: equal neutral outline buttons ── */
#wm-kladde-panel .wm-kladde-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
#wm-kladde-panel .wm-kladde-btn {
  height: 40px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 14px !important;
  transition: background 140ms ease, border-color 140ms ease !important;
  font-family: var(--font-family, Inter, system-ui, -apple-system, sans-serif) !important;
}
#wm-kladde-panel .wm-kladde-btn--primary,
#wm-kladde-panel .wm-kladde-btn--secondary {
  background: #FFFEFB !important;
  color: #5C4D43 !important;
  border: 1px solid rgba(58, 47, 38, 0.12) !important;
  flex: unset !important;
}
#wm-kladde-panel .wm-kladde-btn--primary:hover,
#wm-kladde-panel .wm-kladde-btn--secondary:hover {
  background: #F5EFE5 !important;
  border-color: rgba(58, 47, 38, 0.18) !important;
  opacity: 1 !important;
}
#wm-kladde-panel .wm-kladde-btn--primary:active,
#wm-kladde-panel .wm-kladde-btn--secondary:active {
  background: #F0E8DA !important;
}
#wm-kladde-panel .wm-kladde-btn--primary svg,
#wm-kladde-panel .wm-kladde-btn--secondary svg {
  color: #5C4D43 !important;
}

/* ── Regen spinner ── */
#wm-kladde-panel .wm-kladde-btn--primary .calm-regen-spinner {
  display: none !important;
}
#wm-kladde-panel .wm-kladde-btn--primary.calm-regen-loading .calm-regen-spinner {
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid rgba(110, 138, 126, 0.3) !important;
  border-top-color: #6E8A7E !important;
  border-radius: 50% !important;
  animation: calm-kladde-spin 0.6s linear infinite !important;
  flex-shrink: 0 !important;
  order: -1 !important;
}
#wm-kladde-panel .wm-kladde-btn--primary.calm-regen-loading {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
@keyframes calm-kladde-spin {
  to { transform: rotate(360deg); }
}

/* ── Inline error ── */
#wm-kladde-panel .calm-kladde-error {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #9A8E82 !important;
  text-align: center !important;
  padding: 4px 0 0 !important;
  margin: 0 !important;
}

/* ── Chips: Enklere / Forkort ── */
#wm-kladde-panel .wm-kladde-refine {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
#wm-kladde-panel .wm-kladde-refine-btn {
  height: 38px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #5C4D43 !important;
  background: transparent !important;
  border: 1px solid rgba(58, 47, 38, 0.12) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  transition: background 140ms ease, border-color 140ms ease !important;
}
#wm-kladde-panel .wm-kladde-refine-btn svg {
  color: #9A8E82 !important;
}
#wm-kladde-panel .wm-kladde-refine-btn:hover {
  background: #F5EFE5 !important;
  border-color: rgba(58, 47, 38, 0.18) !important;
  color: #5C4D43 !important;
}
#wm-kladde-panel .wm-kladde-refine-btn:active {
  background: #F0E8DA !important;
}
#wm-kladde-panel .wm-kladde-refine-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
#wm-kladde-panel .wm-kladde-refine-btn:disabled:hover {
  background: transparent !important;
  border-color: rgba(58, 47, 38, 0.12) !important;
}

/* ── Commit pill: only heavy element ── */
#wm-kladde-panel .wm-kladde-commit {
  margin-top: 0 !important;
}
#wm-kladde-panel .wm-kladde-btn--commit {
  width: 100% !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: #6E8A7E !important;
  color: #FFFEFB !important;
  border: none !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease !important;
}
#wm-kladde-panel .wm-kladde-btn--commit svg {
  color: #FFFEFB !important;
}
#wm-kladde-panel .wm-kladde-btn--commit:hover {
  background: #4A7A68 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(74, 122, 104, 0.18) !important;
  opacity: 1 !important;
}
#wm-kladde-panel .wm-kladde-btn--commit:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}
#wm-kladde-panel .wm-kladde-btn--commit:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
#wm-kladde-panel .wm-kladde-btn--commit:disabled:hover {
  background: #6E8A7E !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Disabled universal ── */
#wm-kladde-panel .wm-kladde-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
#wm-kladde-panel .wm-kladde-btn:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ── Focus rings: sage outline ── */
#wm-kladde-panel .wm-kladde-btn:focus,
#wm-kladde-panel .wm-kladde-btn:focus-visible,
#wm-kladde-panel .wm-kladde-refine-btn:focus,
#wm-kladde-panel .wm-kladde-refine-btn:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: 2px !important;
}

/* ── Legacy panel-wide loading lock: override to noop ── */
#wm-kladde-panel.loading button,
#wm-kladde-panel.loading .wm-kladde-tone-track,
#wm-kladde-panel.loading .wm-kladde-tone-range {
  pointer-events: auto !important;
  opacity: 1 !important;
}
#wm-kladde-panel.loading .wm-kladde-btn--primary {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  #wm-kladde-panel .wm-kladde-btn,
  #wm-kladde-panel .wm-kladde-refine-btn,
  #wm-kladde-panel .wm-kladde-btn--commit {
    transition-duration: 0ms !important;
  }
  #wm-kladde-panel .wm-kladde-tone-range::-webkit-slider-thumb {
    transition-duration: 0ms !important;
  }
  #wm-kladde-panel .wm-kladde-tone-range::-moz-range-thumb {
    transition-duration: 0ms !important;
  }
  #wm-kladde-panel .wm-kladde-btn--commit:hover {
    transform: none !important;
  }
}

/* ── Dark-mode overrides: keep sage hierarchy, adapt surfaces ── */
[data-theme="dark"] #wm-kladde-panel {
  background: #1E1C19 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] #wm-kladde-panel .wm-kladde-header {
  color: #E8E2D9 !important;
}
[data-theme="dark"] #wm-kladde-panel .wm-kladde-header svg {
  color: #6E8A7E !important;
}
[data-theme="dark"] #wm-kladde-panel .wm-kladde-tone-value {
  color: #E8E2D9 !important;
}
[data-theme="dark"] #wm-kladde-panel .wm-kladde-btn--primary,
[data-theme="dark"] #wm-kladde-panel .wm-kladde-btn--secondary {
  background: #2A2723 !important;
  color: #C8BFB3 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
[data-theme="dark"] #wm-kladde-panel .wm-kladde-btn--primary:hover,
[data-theme="dark"] #wm-kladde-panel .wm-kladde-btn--secondary:hover {
  background: #352F29 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
[data-theme="dark"] #wm-kladde-panel .wm-kladde-btn--primary svg,
[data-theme="dark"] #wm-kladde-panel .wm-kladde-btn--secondary svg {
  color: #C8BFB3 !important;
}
[data-theme="dark"] #wm-kladde-panel .wm-kladde-refine-btn {
  color: #C8BFB3 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
[data-theme="dark"] #wm-kladde-panel .wm-kladde-refine-btn:hover {
  background: #352F29 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #C8BFB3 !important;
}
[data-theme="dark"] #wm-kladde-panel .wm-kladde-refine-btn svg {
  color: #9A8E82 !important;
}
[data-theme="dark"] #wm-kladde-panel .wm-kladde-btn--commit {
  background: #6E8A7E !important;
  color: #FFFEFB !important;
}
[data-theme="dark"] #wm-kladde-panel .wm-kladde-btn--commit:hover {
  background: #4A7A68 !important;
}
[data-theme="dark"] #wm-kladde-panel .wm-kladde-divider::before,
[data-theme="dark"] #wm-kladde-panel .wm-kladde-divider::after {
  background: rgba(255, 255, 255, 0.06) !important;
}