.material-symbols-outlined { 
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; 
}

.material-symbols-outlined.filled { 
  font-variation-settings: 'FILL' 1; 
}

/* Clean custom scrollbar */
::-webkit-scrollbar { 
  width: 6px; 
  height: 6px;
}
::-webkit-scrollbar-track { 
  background: transparent; 
}
::-webkit-scrollbar-thumb { 
  background: #d3e4fe; 
  border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { 
  background: #adc6ff; 
}

/* Elegant mesh background */
.mesh-bg {
  background-color: #f8f9ff;
  background-image: 
    radial-gradient(at 0% 0%, hsla(220,100%,92%,1) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(280,100%,94%,1) 0, transparent 50%), 
    radial-gradient(at 100% 100%, hsla(200,100%,90%,1) 0, transparent 50%), 
    radial-gradient(at 0% 100%, hsla(260,100%,94%,1) 0, transparent 50%);
}

/* Hide Chrome native calendar/clock picker icon, overlay absolute click instead */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 10;
}

/* Animation for entering cards */
.employee-card {
  animation: slideIn 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}