/* =========================
   Master Checkbox (Tri-State)
   ========================= */

/* echtes Input ausblenden, aber klickbar lassen */
#selectAll{
    position:absolute;
    opacity:0;
    width:18px;
    height:18px;
  }
  
  /* sichtbare Box */
  #selectAllVisual{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border:1px solid #999;
    border-radius:4px;
    background:#fff;
    box-sizing:border-box;
    user-select:none;
    line-height:1;
    font-size:12px;
    margin-left: 2px;
  }
  
  /* State: page (Strich) */
#selectAllVisual.state-page{
    background:#fff;         /* keine Hintergrundfarbe */
    border-color:#333;
  }
  #selectAllVisual.state-page::before{
    content:"";
    width:10px;
    height:2px;
    background:#111;         /* Strich schwarz */
    border-radius:2px;
    display:block;
  }
  
  /* State: all (Haken) */
  #selectAllVisual.state-all{
    background:#fff;         /* keine Hintergrundfarbe */
    border-color:#333;
  }
  #selectAllVisual.state-all::before{
    content:"✓";
    color:#111;              /* Haken schwarz */
    font-weight:700;
    transform:translateY(-0.5px);
  }
  
  
  /* optional: Hover */
  label:hover #selectAllVisual{
    border-color:#666;
  }
  
  /* =========================
     Optional: unify row checkboxes (falls du willst)
     ========================= */
  /*
  .js-select-item{
    width:18px;
    height:18px;
  }
  */