.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
}
 
th {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  z-index: 30;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
 
@media (min-width: 1024px) {
  th {
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: #f5f5f5;
    border-bottom: 0px solid rgba(0, 0, 0, 0);
  }
  thead {
    font-size: 0.75rem;
  }
}
 
@media (min-width: 1280px) {
  thead {
    font-size: 0.875rem;
  }
}
 
thead {
  color: rgba(0, 0, 0, 0.6);
  position: sticky;
  top: 0;
  z-index: 30;
  font-weight: 600;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
}
 
 
/* CALENDER ICON COLOR CHANGER FOR DATE SELECTOR
 
::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23ffffff" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}
 
*/
 
.custom-checkbox {
  appearance: none;
  width: 1rem;
  height: 1rem;
  background-color: #374151; /* Gray-700 */
  border: 2px solid #d3d3d3; /* Ligher Gray */
  border-radius: 0.25rem; /* sm border */
  cursor: pointer;
  display: inline-block;
  position: relative;
}
 
.custom-checkbox:checked {
  background-color: #f1f5f9; /* Slate-100 */
  border: 2px solid #ffffff; /* White */
}
 
.custom-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #111827; /* Gray-900 */
  border-width: 0 0.15rem 0.15rem 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
 
.resize-handle {
  width: 10px;
  height: 10px;
  background-color: transparent;
  position: absolute;
  z-index: 1000;
}
 
.selected {
    border-width: 3px;
}
 
.sort-arrow {
  display: inline-block;
  width: 9px;
  height: 9px;
  font-size: 9px;
  line-height: 9px;
  transition: transform 0.2s ease;
}
 
.selected {
  border-width: 2px !important;
}
 
.active {
  box-shadow: inset 0 0 0 2px rgb(59 130 246); /* Blue-500 */
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
}
 
/* --- Huskfly Toggle --- */
:root{
  --hf-blue:#3B82F6;
  --hf-h:42px;          
  --hf-r:4px;           
  --hf-icon:16px;      
}

.hf-pill{
  display:flex;
  width: calc(var(--hf-h) * 2);  
  height: var(--hf-h);
  border: 2px solid var(--hf-blue);
  border-radius: var(--hf-r);
  overflow:hidden;
}

.hf-pane{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:background-color .2s ease;
}

/* Default (Complete) */
.hf-left{  background: var(--hf-blue); }
.hf-right{ background: #fff; }

/* Icon Stlying */
.hf-icon{ width: var(--hf-icon); height: var(--hf-icon); position:absolute; opacity:0; transition:opacity .18s ease; }
.hf-left  .hf-check.hf-on{  opacity:1; }        /* white check visible by default */
.hf-right .hf-cal.hf-off{   opacity:0.95; }     /* blue calendar faint by default */
.hf-right .hf-cal.hf-on{    opacity:0; }        /* white calendar hidden by default */

.peer:checked + .hf-pill .hf-left{  background:#fff; }
.peer:checked + .hf-pill .hf-right{ background:var(--hf-blue); }

.peer:checked + .hf-pill .hf-left  .hf-check.hf-on{  opacity:0; }   /* When on Complete Mode */
.peer:checked + .hf-pill .hf-left  .hf-check.hf-off{ opacity:0.95; } /* Blue check */

.peer:checked + .hf-pill .hf-right .hf-cal.hf-off{  opacity:0; }    /* When on Schedule */
.peer:checked + .hf-pill .hf-right .hf-cal.hf-on{   opacity:1; }    /* Blue Calander */