/* Shared colour plate — the same component our PDF editor uses for object
   colour. Extracted so the watermark (and any other preview tool) can reuse the
   exact palette, hex modal and eyedropper instead of growing its own. */

/* The 7 hues x 10 shades grid plus the hex / eyedropper / recent-colour footer.
   Geometry mirrors Sejda's own `.dropdown-menu-color-opts` rules. */
.sp-pop {
  position: fixed; z-index: 300; background: #fff;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, .176);
  padding: 2px; width: 206px; text-align: center;
}
.sp-cols { overflow: hidden; }
.sp-col { float: left; width: 20px; margin: 0; padding: 0; }
.sp-sw {
  display: block; width: 20px; height: 20px; margin: 0; padding: 0;
  border: 1px solid transparent; border-radius: 0; box-sizing: border-box;
  cursor: pointer; background-color: #fff;
}
.sp-sw:hover { border-color: #fff; }
.sp-sw.sp-current { box-shadow: inset 0 0 0 2px #212121; }
.sp-none { position: relative; background: #fff; overflow: hidden; }
.sp-none::after {
  content: ""; position: absolute; border-bottom: 1px solid red; width: 25px; height: 20px;
  left: -21px; top: -18px; transform: translateY(10px) translateX(10px) rotate(-45deg);
}
.sp-none:disabled { opacity: .4; cursor: default; }
.sp-foot { clear: both; padding-top: 2px; text-align: left; overflow: hidden; }
.sp-hexbtn, .sp-pickbtn {
  float: left; width: 20px; height: 20px; padding: 0; border: 0; background: none;
  color: #000; font-size: 14px; text-align: center; line-height: 20px; cursor: pointer;
}
.sp-hexbtn { font-size: 11px; font-weight: 600; }
.sp-hexbtn:hover, .sp-pickbtn:hover { color: rgb(66, 139, 202); }
.sp-foot .sp-sw { float: left; }
.sp-recent.sp-empty { background: #FFFFFF; border-color: #ccc; }
/* The eyedropper's cursor is the magnifier glass itself ("add a magnifine
   glass on color picker so it can detect cleanly"): the glass centre is the
   hotspot (10 10) — that is the pixel the loupe and the pick read. */
body.doc-picking, body.doc-picking * {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Ccircle%20cx='10'%20cy='10'%20r='6.5'%20stroke='%23111'%20stroke-width='2.6'/%3E%3Ccircle%20cx='10'%20cy='10'%20r='6.5'%20stroke='%23fff'%20stroke-width='1.1'/%3E%3Cline%20x1='15'%20y1='15'%20x2='21'%20y2='21'%20stroke='%23111'%20stroke-width='3'%20stroke-linecap='round'/%3E%3Cline%20x1='15'%20y1='15'%20x2='21'%20y2='21'%20stroke='%23fff'%20stroke-width='1.2'%20stroke-linecap='round'/%3E%3C/svg%3E") 10 10, crosshair !important;
}

/* "Choose a color" modal: hex field, saturation/value square, hue strip, Done. */
.cp-modal {
  position: fixed; inset: 0; z-index: 320; display: flex;
  align-items: center; justify-content: center;
  background: rgba(15, 23, 30, .38);
}
.cp-modal[hidden] { display: none; }
.cp-modal-box {
  width: 300px; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: #fff; border-radius: 10px; padding: 18px 20px 16px;
  box-shadow: 0 18px 50px rgba(15, 23, 30, .3);
}
.cp-modal-head { display: flex; align-items: center; justify-content: space-between; }
.cp-modal-head h3 { margin: 0; font-size: 17px; font-weight: 500; color: #333; }
.cp-modal-close {
  position: static; font-size: 24px; line-height: 1; background: none;
  border: 0; cursor: pointer; color: var(--muted);
}
.cp-hex {
  width: 140px; margin: 12px 0 14px; padding: 8px 10px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
}
.cp-modal-body { display: flex; gap: 10px; }
.cp-sv { border-radius: 3px; cursor: crosshair; touch-action: none; }
.cp-hue {
  position: relative; width: 22px; border-radius: 3px; cursor: pointer; touch-action: none;
  background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
              #00f 67%, #f0f 83%, #f00 100%);
}
.cp-hue-knob {
  position: absolute; left: -3px; right: -3px; height: 4px; margin-top: -2px;
  background: #fff; border: 1px solid rgba(0, 0, 0, .5); border-radius: 2px;
}
.cp-modal-actions { display: flex; justify-content: flex-end; margin-top: 16px; }