body {
     /* Use Noto Sans JP first, then Inter, then generic sans-serif */
     font-family: 'Noto Sans JP', 'Inter', sans-serif;
 }

 .view {
     /* Hide views by default */
     display: none;
 }

 .active-view {
     /* Show the active view */
     display: block;
 }

 .calendar {
     /* Calendar table styling */
     width: 100%;
     border-collapse: collapse;
 }

 .calendar th, .calendar td {
     /* Calendar cell styling */
     border: 1px solid #e2e8f0; /* Tailwind gray-200 */
     padding: 0.75rem; /* Equivalent to p-3 */
     text-align: center;
     vertical-align: top; /* Align day number to the top */
 }

 .calendar th {
     /* Calendar header styling */
     background-color: #f7fafc; /* Tailwind gray-50 */
 }

 .calendar-day {
     /* Styling for individual day cells */
     cursor: pointer;
     position: relative; /* Needed for the dot indicator */
     min-height: 80px; /* Ensure minimum height for cells */
 }

 .calendar-day:hover {
     /* Hover effect for day cells */
     background-color: #ebf8ff; /* Tailwind blue-50 */
 }

 .calendar-day.has-log::after {
     /* Dot indicator for days with logs */
     content: '';
     position: absolute;
     bottom: 4px;
     left: 50%;
     transform: translateX(-50%);
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background-color: #4299e1; /* Tailwind blue-500 */
 }

 .calendar-day.selected {
     /* Styling for the selected day */
     background-color: #3182ce; /* Tailwind blue-600 */
     color: white;
 }

 .calendar-day.today {
      /* Styling for the current day */
     font-weight: bold;
     color: #dd6b20; /* Tailwind orange-600 */
 }

 /* --- Animation for change button --- */
 @keyframes pulse-scale {
   0%, 100% { transform: scale(1); }
   50% { transform: scale(1.05); }
 }

 .animate-pulse-scale {
   animation: pulse-scale 1.5s infinite;
 }

/* Custom scrollbar for progress/archive views */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.list-item.selected {
    background-color: #bfdbfe; /* A light blue color, Tailwind blue-200 */
}

/* Highlight cell background for tables in progress/archive views */
.highlight-cell {
    background-color: #fef9c3; /* Tailwind yellow-100 */
}