/* Theme transition animations */
:root {
  /* 主题切换时所有颜色属性的过渡效果 */
  transition: 
    --md-sys-color-primary 0.3s linear,
    --md-sys-color-on-primary 0.3s linear,
    --md-sys-color-primary-container 0.3s linear,
    --md-sys-color-on-primary-container 0.3s linear,
    --md-sys-color-secondary 0.3s linear,
    --md-sys-color-on-secondary 0.3s linear,
    --md-sys-color-secondary-container 0.3s linear,
    --md-sys-color-on-secondary-container 0.3s linear,
    --md-sys-color-tertiary 0.3s linear,
    --md-sys-color-on-tertiary 0.3s linear,
    --md-sys-color-tertiary-container 0.3s linear,
    --md-sys-color-on-tertiary-container 0.3s linear,
    --md-sys-color-error 0.3s linear,
    --md-sys-color-on-error 0.3s linear,
    --md-sys-color-error-container 0.3s linear,
    --md-sys-color-on-error-container 0.3s linear,
    --md-sys-color-surface 0.3s linear,
    --md-sys-color-on-surface 0.3s linear,
    --md-sys-color-surface-variant 0.3s linear,
    --md-sys-color-on-surface-variant 0.3s linear,
    --md-sys-color-outline 0.3s linear,
    --md-sys-color-outline-variant 0.3s linear;
}

/* 所有使用主题颜色的元素都应该有过渡效果 */
* {
  transition: 
    background-color 0.3s linear,
    color 0.3s linear,
    border-color 0.3s linear,
    box-shadow 0.3s linear,
    fill 0.3s linear,
    stroke 0.3s linear;
}

/* 针对特定主题类的样式增强 */
.theme-morning {
  --theme-accent: #4CAF50;
  --theme-shadow: rgba(76, 175, 80, 0.1);
}

.theme-noon {
  --theme-accent: #2196F3;
  --theme-shadow: rgba(33, 150, 243, 0.1);
}

.theme-afternoon {
  --theme-accent: #FFC107;
  --theme-shadow: rgba(255, 193, 7, 0.1);
}

.theme-evening {
  --theme-accent: #FF9800;
  --theme-shadow: rgba(255, 152, 0, 0.1);
}

.theme-night {
  --theme-accent: #9C27B0;
  --theme-shadow: rgba(156, 39, 176, 0.1);
}

/* 主题切换时的特殊动画效果 */
.theme-transition {
  animation: themeChange 0.6s ease-in-out;
}

@keyframes themeChange {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.95;
    transform: scale(0.998);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 主题指示器的脉冲效果 */
.theme-indicator {
  position: relative;
  overflow: hidden;
}

.theme-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--theme-accent, var(--md-sys-color-primary)),
    transparent
  );
  opacity: 0.3;
  transition: left 0.5s ease-in-out;
}

.theme-indicator.active::before {
  left: 100%;
}

/* 主题卡片的悬停效果 */
.theme-card {
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
}

.theme-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--theme-shadow, rgba(0, 0, 0, 0.1));
}

.theme-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--theme-accent, var(--md-sys-color-primary));
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}

.theme-card:hover::after {
  opacity: 0.05;
}

.theme-card.selected::after {
  opacity: 0.1;
}

/* ECharts 图表的主题过渡 */
.echarts-container {
  transition: all 0.3s ease-in-out;
}

/* 按钮和交互元素的主题过渡 */
button, .btn {
  transition: all 0.2s ease-in-out;
}

/* 输入框的主题过渡 */
input, textarea, select {
  transition: all 0.2s ease-in-out;
}

/* 卡片容器的主题过渡 */
.card, .bg-surface {
  transition: all 0.3s ease-in-out;
}

/* 导航和工具栏的主题过渡 */
nav, .toolbar, .header {
  transition: all 0.3s ease-in-out;
}