/* FÄRGPALETTEN PÅ DATORN — datorrundan AT-74 (Patrik 10-14 natt: "till mobilen byggdes en egen färgpicker, går det göra här med?").
   Samma palett som mobilen (mobile-soft-ui.js openPalette; mobilens regler i mobile-soft-customers-admin.css), länkad bara för dator. */
#ledare-farg-palett { --ledare-varm: #fffaf2; }
:root body:not(.atlas-light-theme) #ledare-farg-palett { --ledare-varm: color-mix(in srgb, var(--bg-dark-primary, #1b1f24) 86%, #ffffff); }
#ledare-farg-palett {
  position: fixed; z-index: 100000; padding: 12px; width: 236px; box-sizing: border-box;
  border-radius: 20px; background: color-mix(in srgb, var(--ledare-varm) 82%, var(--bg-dark-primary));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
  box-shadow: 0 12px 30px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.10);
  font-family: inherit;
}
#ledare-farg-palett .lfp-titel { font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 10px 2px; }
#ledare-farg-palett .lfp-rutor { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
#ledare-farg-palett .lfp-ruta { width: 30px; height: 30px; border-radius: 50%; border: none; padding: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }
#ledare-farg-palett .lfp-ruta.vald { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
#ledare-farg-palett .lfp-egen { margin-top: 12px; width: 100%; min-height: 36px; border-radius: 999px; border: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary); background: color-mix(in srgb, var(--accent-primary) 12%, transparent); cursor: pointer; }
:root body #ledare-farg-palett .lfp-ruta.lfp-ruta {
  width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important;
  border-radius: 50% !important; border: none !important; padding: 0 !important; margin: 0 !important;
  background: var(--c) !important; background-image: none !important; opacity: 1 !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35) !important;
}
:root body #ledare-farg-palett .lfp-ruta.lfp-ruta.vald { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c) !important; }
:root body #ledare-farg-palett .lfp-rutor { display: grid !important; grid-template-columns: repeat(6, 30px) !important; gap: 8px !important; justify-content: space-between !important; }
:root body #ledare-farg-palett#ledare-farg-palett { width: 256px !important; padding: 14px !important; }
#ledare-farg-palett .lfp-nyans { display: flex; flex-direction: column; gap: 10px; margin: 12px 2px 2px; }
#ledare-farg-palett .lfp-rad { display: flex; align-items: center; gap: 8px; }
#ledare-farg-palett .lfp-nyans-txt { min-width: 52px; }
#ledare-farg-palett .lfp-nyans[hidden] { display: none; }
#ledare-farg-palett .lfp-nyans-txt { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
#ledare-farg-palett .lfp-reglage { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 14px; border-radius: 999px; margin: 0;
  background: var(--spar, linear-gradient(90deg, var(--fran), var(--till))) !important; border: none !important; outline: none; touch-action: none; }
#ledare-farg-palett .lfp-reglage::-webkit-slider-runnable-track { background: transparent !important; height: 14px; border: none; }
#ledare-farg-palett .lfp-reglage::-webkit-slider-thumb { margin-top: -7px; }
#ledare-farg-palett .lfp-reglage::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--nu); border: 3px solid var(--ledare-varm); box-shadow: 0 2px 8px rgba(0,0,0,0.28); }