/* Canonical collection multi-select indicator.
   Important: this file must NOT own collection card/grid geometry.
   It only removes legacy selection marks and paints the checked state inside
   the existing circular selector. Visibility/layout remain owned by the
   established collection styles. */

/* Legacy pseudo marks caused the detached/mirrored check and stray arrow in
   light mode. Remove only those painted marks; do not change the button's
   display, sizing, positioning, line-height, overflow, or grid behavior. */
#collectionSheet .collection-selectbox::before,
#collectionSheet .collection-selectbox::after{
  content:none!important;
  display:none!important;
}

/* When selection mode is off the injected selector must stay out of layout.
   This is the state that was accidentally overridden by v1. */
#collectionSheet .collection-body:not(.is-bulk-selecting) .collection-selectbox{
  display:none!important;
}

/* Selected state: draw one SVG check as part of the circle's own background.
   No pseudo-element means the mark cannot escape to the card/page coordinate
   system during rerenders or tab changes. */
#collectionSheet .collection-selectbox[aria-pressed="true"]{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.2 12.4 3.6 3.6 8-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px 17px no-repeat,
    linear-gradient(180deg,#6799ef,#3568d4)!important;
  border-color:rgba(111,163,255,.88)!important;
  color:#fff!important;
  box-shadow:0 3px 9px rgba(43,92,190,.22),inset 0 1px 0 rgba(255,255,255,.30)!important;
}

#collectionSheet .collection-selectbox:not([aria-pressed="true"]){
  background-image:none!important;
}

html[data-theme="light"] #collectionSheet .collection-selectbox:not([aria-pressed="true"]){
  background-color:rgba(58,72,96,.095)!important;
  border-color:rgba(48,62,86,.14)!important;
  color:#536071!important;
}

html[data-theme="dark"] #collectionSheet .collection-selectbox:not([aria-pressed="true"]){
  background-image:none!important;
}

/* Light mode only: once multi-select is active, the header control is a real
   completion action. Give it the same blue action hierarchy used elsewhere
   instead of leaving it as a low-contrast neutral circle. Geometry is kept. */
html[data-theme="light"] #collectionSheet .collection-head .collection-select-toggle.is-active{
  background:linear-gradient(180deg,#6799ef,#3568d4)!important;
  border:1px solid rgba(85,137,230,.72)!important;
  color:#fff!important;
  box-shadow:
    0 4px 12px rgba(43,92,190,.18),
    inset 0 1px 0 rgba(255,255,255,.34)!important;
}

@media(hover:hover) and (pointer:fine){
  html[data-theme="light"] #collectionSheet .collection-head .collection-select-toggle.is-active:hover{
    background:linear-gradient(180deg,#72a2f1,#3b70da)!important;
    border-color:rgba(77,128,220,.82)!important;
  }
}