wekan/client/components/cards/cardDate.css

.card-date {
  display: block;
  border-radius: 4px;
  padding: 1px 3px;
  background-color: #dbdbdb;
}
.card-date:hover,
.card-date.is-active {
  background-color: #b3b3b3;
}
/* Date status colors - red = overdue, amber = due soon, no shade = not due */
.card-date.overdue {
  background-color: #ff4444; /* Red for overdue */
  color: #fff;
}
.card-date.overdue:hover,
.card-date.overdue.is-active {
  background-color: #cc3333;
}

.card-date.due-soon {
  background-color: #ffaa00; /* Amber for due soon */
  color: #000;
}
.card-date.due-soon:hover,
.card-date.due-soon.is-active {
  background-color: #e69900;
}

.card-date.not-due {
  /* No special background - uses default date type colors */
}

.card-date.current {
  background-color: #5ba639; /* Green for current/active */
  color: #fff;
}
.card-date.current:hover,
.card-date.current.is-active {
  background-color: #46802c;
}

.card-date.completed {
  background-color: #90ee90; /* Light green for completed */
  color: #000;
}
.card-date.completed:hover,
.card-date.completed.is-active {
  background-color: #7dd87d;
}

.card-date.completed-early {
  background-color: #4caf50; /* Green for completed early */
  color: #fff;
}
.card-date.completed-early:hover,
.card-date.completed-early.is-active {
  background-color: #45a049;
}

.card-date.completed-late {
  background-color: #ff9800; /* Orange for completed late */
  color: #fff;
}
.card-date.completed-late:hover,
.card-date.completed-late.is-active {
  background-color: #f57c00;
}

.card-date.completed-on-time {
  background-color: #2196f3; /* Blue for completed on time */
  color: #fff;
}
.card-date.completed-on-time:hover,
.card-date.completed-on-time.is-active {
  background-color: #1976d2;
}

/* Date type specific colors */
.card-date.received-date {
  background-color: #dbdbdb; /* Light grey for received */
}

.card-date.received-date:hover,
.card-date.received-date.is-active {
  background-color: #b3b3b3;
}

.card-date.start-date {
  background-color: #90ee90; /* Light green for start */
  color: #000; /* Black text for start */
}

.card-date.start-date:hover,
.card-date.start-date.is-active {
  background-color: #7dd87d;
}

.card-date.due-date {
  background-color: #ffd700; /* Yellow for due */
  color: #000; /* Black text for due */
}

.card-date.due-date:hover,
.card-date.due-date.is-active {
  background-color: #e6c200;
}

.card-date.end-date {
  background-color: #ffb3b3; /* Light red for end */
  color: #000; /* Black text for end */
}

.card-date.end-date:hover,
.card-date.end-date.is-active {
  background-color: #ff9999;
}
.card-date.end-date time::before {
  content: "🏁"; /* Finish flag - represents end/completion */
}
.card-date.due-date time::before {
  content: "⏰"; /* Alarm clock - represents due/deadline */
}
.card-date.start-date time::before {
  content: "🚀"; /* Rocket - represents start/launch */
}
.card-date.received-date time::before {
  content: "📥"; /* Inbox tray - represents received/incoming */
}

/* Generic date badge and custom field date */
.card-date:not(.received-date):not(.start-date):not(.due-date):not(.end-date) time::before {
  /*content: "📅"; // Calendar - represents generic date */
}
.card-date time::before {
  font-size: inherit;
  margin-right: 0.3em;
  display: inline-block;
}
.customfield-date {
  display: block;
  border-radius: 4px;
  padding: 1px 3px;
}