/* app/assets/stylesheets/ui/calendar.css */

.cal-header-row {
  @apply grid grid-cols-7 border-b border-gray-200 bg-gray-50;
}

.cal-header-cell {
  @apply py-1.5 lg:py-2.5 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide;
}

.cal-grid {
  @apply grid grid-cols-7 border-t border-l border-gray-100;
}

.cal-cell {
  @apply relative min-h-[56px] lg:min-h-[110px] p-1 lg:p-2 border-b border-r border-gray-100 bg-white;
}

.cal-cell-outside {
  @apply bg-gray-50/60;
}

.cal-cell-bookable {
  @apply cursor-pointer;
}

.cal-cell-past {
  @apply bg-gray-50/70;
}

.cal-cell-unavailable {
  @apply bg-gray-50/50 cursor-not-allowed;
}

.cal-day-number-past {
  @apply text-sm font-medium text-gray-300;
}

.cal-cell-link {
  @apply absolute inset-0 z-0 transition-colors;
}

.group:hover .cal-cell-link {
  background-color: rgb(20 184 166 / 0.05);
}

.cal-day-row {
  @apply relative z-10 flex justify-between items-center mb-1.5 pointer-events-none;
}

.cal-day-number {
  @apply text-sm font-medium text-gray-900;
}

.cal-day-number-outside {
  @apply text-sm font-medium text-gray-300;
}

.cal-day-today {
  @apply flex items-center justify-center w-7 h-7 rounded-full bg-teal-600 text-white text-sm font-bold leading-none;
}

.cal-new-hint {
  opacity: 0;
  @apply transition-opacity flex items-center gap-0.5 text-xs font-semibold text-teal-600;
}

.group:hover .cal-new-hint {
  opacity: 1;
}

.cal-pills {
  @apply relative z-10;
}

.cal-pill {
  @apply flex items-center gap-1 mb-1 rounded px-1.5 py-0.5 text-xs font-medium transition-colors;
}

.cal-pill-time {
  @apply shrink-0 font-semibold;
}

.cal-pill-name {
  @apply truncate min-w-0;
}

.cal-overflow {
  @apply text-xs text-gray-400 px-1 mt-0.5;
}

.cal-count {
  display: block;
}

.cal-count-badge {
  @apply text-xs font-medium text-gray-400 px-1;
}

.cal-grid[data-show-details="true"] .cal-count {
  display: none;
}

.cal-grid[data-show-details="true"] .cal-pills {
  display: block;
}

.cal-grid:not([data-show-details="true"]) .cal-pills {
  display: none;
}

.cal-empty-panel {
  @apply flex flex-col items-center justify-center py-16 text-center;
}