12 Added notes and colours to customers

app/assets/stylesheets/calendar.css

@@ -27,4 +27,126 @@
 
 .calendar-time-slot {
   min-height: 50px; /* Adjust as needed */
-} 
+}
+
+/* ToastUI Calendar Event Styling */
+.toastui-calendar-events {
+  margin-right: 8px;
+  text-wrap: auto;
+}
+
+.toastui-calendar-event-time {
+  position: relative;
+  overflow: visible !important;
+  min-height: 24px !important;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.toastui-calendar-event-time:hover {
+  transform: scale(1.02);
+  z-index: 1000 !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-radius: 4px !important;
+}
+
+.toastui-calendar-event-time-content {
+  height: 100% !important;
+  overflow: visible !important;
+  padding: 2px 4px !important;
+  text-wrap: auto;
+  word-wrap: break-word;
+  line-height: 1.1 !important;
+}
+
+.toastui-calendar-template-time {
+  font-size: 10px !important;
+  line-height: 1.1 !important;
+  text-wrap: auto;
+  word-wrap: break-word;
+  white-space: normal !important;
+  overflow: visible !important;
+  display: block !important;
+}
+
+.toastui-calendar-template-time strong {
+  font-size: 10px !important;
+  font-weight: 600;
+  display: block;
+  margin-bottom: 1px;
+}
+
+.toastui-calendar-template-time span {
+  font-size: 9px !important;
+  line-height: 1.0 !important;
+  text-wrap: auto;
+  word-wrap: break-word;
+  white-space: normal !important;
+  display: block !important;
+}
+
+/* Hover tooltip effect */
+.toastui-calendar-event-time:hover::after {
+  content: "Click to edit reservation";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.9);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 11px;
+  white-space: nowrap;
+  z-index: 2000;
+  pointer-events: none;
+  opacity: 0;
+  animation: tooltipFadeIn 0.3s ease forwards;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.toastui-calendar-event-time:hover::before {
+  content: '';
+  position: absolute;
+  bottom: calc(100% - 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.9);
+  z-index: 2000;
+  pointer-events: none;
+  opacity: 0;
+  animation: tooltipFadeIn 0.3s ease forwards;
+}
+
+@keyframes tooltipFadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+/* Improve visibility for small events */
+.toastui-calendar-event-time[style*="height: calc(1%"] .toastui-calendar-template-time strong,
+.toastui-calendar-event-time[style*="height: calc(2%"] .toastui-calendar-template-time strong {
+  display: none; /* Hide time for very small events */
+}
+
+.toastui-calendar-event-time[style*="height: calc(1%"] .toastui-calendar-template-time span,
+.toastui-calendar-event-time[style*="height: calc(2%"] .toastui-calendar-template-time span {
+  font-size: 8px !important;
+  line-height: 1.0 !important;
+}
+
+/* Ensure minimum visibility */
+.toastui-calendar-event-time {
+  min-width: 60px !important;
+}
+
+/* Better text contrast */
+.toastui-calendar-event-time[style*="background-color: rgb(66, 109, 215)"] {
+  color: white !important;
+}
+
+.toastui-calendar-event-time[style*="background-color: rgb(66, 109, 215)"] .toastui-calendar-template-time {
+  color: white !important;
+}