/* 日历功能专用样式 */

/* 日历网格布局 */
.calendar-grid {
  @apply grid grid-cols-7 gap-1 bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden;
}

.calendar-header {
  @apply bg-gradient-to-r from-indigo-600 to-purple-600 text-white p-4 rounded-t-lg;
}

.calendar-nav {
  @apply flex items-center justify-between;
}

.calendar-nav-button {
  @apply p-2 rounded-lg hover:bg-white/20 transition-colors duration-200 text-white;
}

.calendar-title {
  @apply text-xl font-bold text-center flex-1;
}

.calendar-weekdays {
  @apply grid grid-cols-7 bg-slate-50 border-b border-slate-200;
}

.calendar-weekday {
  @apply p-3 text-center text-sm font-medium text-slate-600 border-r border-slate-200 last:border-r-0;
}

.calendar-body {
  @apply bg-white;
}

.calendar-week {
  @apply grid grid-cols-7;
}

.calendar-day {
  @apply relative min-h-[100px] p-2 border-r border-b border-slate-200 last:border-r-0 hover:bg-slate-50 transition-colors duration-200 cursor-pointer;
}

.calendar-day.other-month {
  @apply bg-slate-50 text-slate-400;
}

.calendar-day.today {
  @apply bg-gradient-to-br from-indigo-50 to-purple-50 border-2 border-indigo-300;
}

.calendar-day.selected {
  @apply bg-gradient-to-br from-indigo-100 to-purple-100 border-2 border-indigo-500;
}

.calendar-day.has-events {
  @apply bg-blue-50;
}

.day-number {
  @apply text-sm font-medium mb-1;
}

.calendar-day.today .day-number {
  @apply text-indigo-700 font-bold;
}

.day-events {
  @apply flex flex-wrap gap-1 mt-1;
}

.event-dot {
  @apply w-2 h-2 rounded-full;
}

.event-dot.high {
  @apply bg-red-500;
}

.event-dot.medium {
  @apply bg-blue-500;
}

.event-dot.low {
  @apply bg-green-500;
}

.event-more {
  @apply text-xs text-slate-500 font-medium;
}

.calendar-day-number {
  @apply text-sm font-medium mb-1;
}

.calendar-day.today .calendar-day-number {
  @apply text-indigo-700 font-bold;
}

/* 事件卡片样式 */
.event-card {
  @apply bg-white rounded-lg shadow-sm border border-slate-200 p-4 hover:shadow-md transition-all duration-200 cursor-pointer;
}

.event-card:hover {
  @apply transform scale-[1.02] shadow-lg;
}

.event-card.featured {
  @apply border-2 border-indigo-300 bg-gradient-to-br from-indigo-50 to-purple-50;
}

.event-card.urgent {
  @apply border-2 border-red-300 bg-gradient-to-br from-red-50 to-orange-50;
}

.event-title {
  @apply font-semibold text-slate-900 mb-2 line-clamp-2;
}

.event-date {
  @apply text-sm text-slate-600 mb-2 flex items-center;
}

.event-category {
  @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

.event-category.technology {
  @apply bg-blue-100 text-blue-800;
}

.event-category.entertainment {
  @apply bg-pink-100 text-pink-800;
}

.event-category.sports {
  @apply bg-green-100 text-green-800;
}

.event-category.education {
  @apply bg-purple-100 text-purple-800;
}

.event-category.business {
  @apply bg-orange-100 text-orange-800;
}

.event-category.health {
  @apply bg-emerald-100 text-emerald-800;
}

.event-category.travel {
  @apply bg-cyan-100 text-cyan-800;
}

.event-category.food {
  @apply bg-amber-100 text-amber-800;
}

.event-category.culture {
  @apply bg-violet-100 text-violet-800;
}

.event-category.science {
  @apply bg-teal-100 text-teal-800;
}

.event-description {
  @apply text-sm text-slate-600 line-clamp-3 mb-3;
}

.event-meta {
  @apply flex items-center justify-between text-xs text-slate-500;
}

.event-countdown {
  @apply font-medium text-indigo-600;
}

/* 日历事件点 */
.calendar-event-dot {
  @apply w-2 h-2 rounded-full absolute top-1 right-1;
}

.calendar-event-dot.technology {
  @apply bg-blue-500;
}

.calendar-event-dot.entertainment {
  @apply bg-pink-500;
}

.calendar-event-dot.sports {
  @apply bg-green-500;
}

.calendar-event-dot.education {
  @apply bg-purple-500;
}

.calendar-event-dot.business {
  @apply bg-orange-500;
}

.calendar-event-dot.health {
  @apply bg-emerald-500;
}

.calendar-event-dot.travel {
  @apply bg-cyan-500;
}

.calendar-event-dot.food {
  @apply bg-amber-500;
}

.calendar-event-dot.culture {
  @apply bg-violet-500;
}

.calendar-event-dot.science {
  @apply bg-teal-500;
}

/* 事件列表样式 */
.event-list {
  @apply space-y-4;
}

.event-list-item {
  @apply flex items-start space-x-4 p-4 bg-white rounded-lg shadow-sm border border-slate-200 hover:shadow-md transition-all duration-200 cursor-pointer;
}

.event-list-item:hover {
  @apply transform translate-x-1;
}

.event-list-date {
  @apply flex-shrink-0 text-center;
}

.event-list-day {
  @apply text-2xl font-bold text-indigo-600;
}

.event-list-month {
  @apply text-sm text-slate-500 uppercase;
}

.event-list-content {
  @apply flex-1;
}

.event-list-title {
  @apply font-semibold text-slate-900 mb-1;
}

.event-list-meta {
  @apply flex items-center space-x-4 text-sm text-slate-600;
}

/* 倒计时样式 */
.countdown-container {
  @apply bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg p-6 text-center;
}

.countdown-title {
  @apply text-lg font-semibold mb-4;
}

.countdown-display {
  @apply grid grid-cols-4 gap-4;
}

.countdown-unit {
  @apply text-center;
}

.countdown-number {
  @apply text-3xl font-bold block;
}

.countdown-label {
  @apply text-sm opacity-90;
}

/* 时间线样式 */
.timeline {
  @apply relative;
}

.timeline::before {
  content: '';
  @apply absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-indigo-300 to-purple-300;
}

.timeline-item {
  @apply relative flex items-start space-x-6 pb-8;
}

.timeline-marker {
  @apply relative z-10 flex-shrink-0 w-4 h-4 bg-white border-4 border-indigo-500 rounded-full;
}

.timeline-marker.completed {
  @apply bg-indigo-500;
}

.timeline-marker.upcoming {
  @apply border-purple-500;
}

.timeline-content {
  @apply flex-1 bg-white rounded-lg shadow-sm border border-slate-200 p-4;
}

.timeline-date {
  @apply text-sm text-slate-500 mb-2;
}

.timeline-title {
  @apply font-semibold text-slate-900 mb-2;
}

.timeline-description {
  @apply text-sm text-slate-600;
}

/* 筛选器样式 */
.filter-container {
  @apply bg-white rounded-lg shadow-sm border border-slate-200 p-4 mb-6;
}

.filter-row {
  @apply flex flex-wrap items-center gap-4 mb-4 last:mb-0;
}

.filter-group {
  @apply flex items-center space-x-2;
}

.filter-label {
  @apply text-sm font-medium text-slate-700 whitespace-nowrap;
}

.filter-select {
  @apply px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500;
}

.filter-button {
  @apply px-4 py-2 text-sm font-medium rounded-lg transition-colors duration-200;
}

.filter-button.active {
  @apply bg-indigo-600 text-white;
}

.filter-button:not(.active) {
  @apply bg-slate-100 text-slate-700 hover:bg-slate-200;
}

/* 视图切换样式 */
.view-toggle {
  @apply flex bg-slate-100 rounded-lg p-1;
}

.view-toggle-button {
  @apply flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200;
}

.view-toggle-button.active {
  @apply bg-white text-indigo-600 shadow-sm;
}

.view-toggle-button:not(.active) {
  @apply text-slate-600 hover:text-slate-900;
}

/* 统计卡片样式 */
.stats-grid {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6;
}

.stats-card {
  @apply bg-white rounded-lg shadow-sm border border-slate-200 p-4 text-center;
}

.stats-icon {
  @apply w-8 h-8 mx-auto mb-2 text-indigo-600;
}

.stats-number {
  @apply text-2xl font-bold text-slate-900;
}

.stats-label {
  @apply text-sm text-slate-600;
}

/* 加载状态样式 */
.loading-skeleton {
  @apply animate-pulse;
}

.skeleton-text {
  @apply bg-slate-200 rounded h-4;
}

.skeleton-title {
  @apply bg-slate-200 rounded h-6;
}

.skeleton-card {
  @apply bg-slate-200 rounded-lg h-32;
}

/* 空状态样式 */
.empty-state {
  @apply text-center py-12;
}

.empty-state-icon {
  @apply w-16 h-16 mx-auto mb-4 text-slate-400;
}

.empty-state-title {
  @apply text-lg font-semibold text-slate-900 mb-2;
}

.empty-state-description {
  @apply text-slate-600 mb-4;
}

.empty-state-action {
  @apply btn btn-primary;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .calendar-grid {
    @apply text-xs;
  }
  
  .calendar-day {
    @apply min-h-[80px] p-1;
  }
  
  .calendar-day-number {
    @apply text-xs;
  }
  
  .event-card {
    @apply p-3;
  }
  
  .event-title {
    @apply text-sm;
  }
  
  .countdown-display {
    @apply grid-cols-2 gap-2;
  }
  
  .countdown-number {
    @apply text-2xl;
  }
  
  .timeline::before {
    @apply left-4;
  }
  
  .timeline-item {
    @apply space-x-4;
  }
  
  .filter-row {
    @apply flex-col items-stretch gap-2;
  }
  
  .filter-group {
    @apply flex-col space-x-0 space-y-1;
  }
  
  .stats-grid {
    @apply grid-cols-2;
  }
}

@media (max-width: 480px) {
  .calendar-day {
    @apply min-h-[60px] p-0.5;
  }
  
  .calendar-weekday {
    @apply p-2 text-xs;
  }
  
  .event-list-item {
    @apply space-x-2 p-3;
  }
  
  .event-list-day {
    @apply text-lg;
  }
  
  .countdown-container {
    @apply p-4;
  }
  
  .countdown-number {
    @apply text-xl;
  }
  
  .stats-grid {
    @apply grid-cols-1;
  }
}

/* 动画效果 */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.slide-up {
  animation: slideUp 0.5s ease-out;
}

.scale-in {
  animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 悬浮提示样式 */
.tooltip {
  @apply absolute z-50 px-2 py-1 text-xs text-white bg-slate-900 rounded shadow-lg opacity-0 pointer-events-none transition-opacity duration-200;
}

.tooltip.show {
  @apply opacity-100;
}

/* 日期选择器样式 */
.date-picker {
  @apply absolute z-50 bg-white border border-slate-200 rounded-lg shadow-lg p-4;
}

.date-picker-header {
  @apply flex items-center justify-between mb-4;
}

.date-picker-nav {
  @apply p-1 rounded hover:bg-slate-100 transition-colors duration-200;
}

.date-picker-title {
  @apply font-semibold text-slate-900;
}

.date-picker-grid {
  @apply grid grid-cols-7 gap-1;
}

.date-picker-day {
  @apply w-8 h-8 flex items-center justify-center text-sm rounded hover:bg-slate-100 cursor-pointer transition-colors duration-200;
}

.date-picker-day.selected {
  @apply bg-indigo-600 text-white;
}

.date-picker-day.today {
  @apply bg-indigo-100 text-indigo-700 font-semibold;
}

.date-picker-day.other-month {
  @apply text-slate-400;
}

/* 事件详情模态框样式 */
.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4;
}

.modal-content {
  @apply bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto;
}

.modal-header {
  @apply p-6 border-b border-slate-200;
}

.modal-title {
  @apply text-xl font-bold text-slate-900;
}

.modal-close {
  @apply absolute top-4 right-4 p-2 text-slate-400 hover:text-slate-600 transition-colors duration-200;
}

.modal-body {
  @apply p-6;
}

.modal-footer {
  @apply p-6 border-t border-slate-200 flex justify-end space-x-3;
}

/* 快速操作按钮样式 */
.quick-actions {
  @apply flex space-x-2;
}

.quick-action {
  @apply p-2 rounded-lg text-slate-600 hover:text-indigo-600 hover:bg-indigo-50 transition-colors duration-200;
}

/* 标签样式 */
.tag {
  @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

.tag.primary {
  @apply bg-indigo-100 text-indigo-800;
}

.tag.secondary {
  @apply bg-slate-100 text-slate-800;
}

.tag.success {
  @apply bg-green-100 text-green-800;
}

.tag.warning {
  @apply bg-yellow-100 text-yellow-800;
}

.tag.danger {
  @apply bg-red-100 text-red-800;
}

/* 分页样式 */
.pagination {
  @apply flex items-center justify-center space-x-2 mt-8;
}

.pagination-button {
  @apply px-3 py-2 text-sm font-medium rounded-lg transition-colors duration-200;
}

.pagination-button.active {
  @apply bg-indigo-600 text-white;
}

.pagination-button:not(.active) {
  @apply bg-white text-slate-700 border border-slate-300 hover:bg-slate-50;
}

.pagination-button:disabled {
  @apply opacity-50 cursor-not-allowed;
}