/* 主题统一的日期时间样式 */

/* 引入优秀的字体 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

.datetime-container {
  margin: 12px 0;
  opacity: 0;
  transform: translateY(8px);
  animation: fadeInUp 0.8s ease-out forwards;
}

.datetime-display {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid var(--text-color);
  box-shadow: 
    0 8px 32px var(--shadow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 20px var(--shadow-color);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* 壁纸模式强化背景 */
body[style*="background-image"] .datetime-display {
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid var(--text-color);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* 非壁纸模式 */
body:not([style*="background-image"]) .datetime-display {
  background: var(--app-bg);
  border: 2px solid var(--text-color);
}

.datetime-display:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 16px 48px var(--shadow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 30px var(--shadow-color);
}

/* 统一字体设置 - 所有时间日期元素使用相同字体 */
.current-time,
.current-date,
.lunar-date,
#current-time-text,
#current-date-text,
#current-weekday,
#lunar-date-text,
.weekday {
  font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  color: var(--text-color);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* 时间样式 */
.current-time {
  display: flex;
  align-items: center;
}

#current-time-text {
  font-size: 1.4em;
  font-weight: 600;
  filter: contrast(1.2) brightness(1.1);
}

/* 日期样式 */
.current-date {
  display: flex;
  align-items: center;
  gap: 10px;
}

#current-date-text {
  font-size: 1.0em;
  font-weight: 600;
}

.weekday {
  font-size: 1.0em;
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(193, 168, 106, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(193, 168, 106, 0.3);
}

/* 农历样式 */
.lunar-date {
  display: flex;
  align-items: center;
}

#lunar-date-text {
  font-size: 1.0em;
  font-weight: 600;
}

/* 日间主题适配 */
body.light-theme .datetime-display {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--text-color);
  box-shadow: 
    0 8px 32px var(--shadow-color),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

body.light-theme[style*="background-image"] .datetime-display {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--text-color);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

body.light-theme #current-time-text {
  color: var(--text-color);
  text-shadow: 
    0 1px 2px rgba(255, 255, 255, 0.8),
    0 0 8px var(--shadow-color);
}

body.light-theme #current-date-text {
  color: var(--text-color);
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

body.light-theme #lunar-date-text {
  color: var(--text-color);
  opacity: 0.95;
  text-shadow: 
    0 1px 2px rgba(255, 255, 255, 0.5),
    0 0 8px var(--shadow-color);
}

body.light-theme .weekday {
  background: var(--link-hover-bg);
  color: var(--link-hover-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.light-theme .current-time::after,
body.light-theme .current-date::after {
  color: var(--text-color);
  opacity: 0.8;
}

body.light-theme .datetime-display:hover {
  box-shadow: 
    0 16px 48px var(--shadow-color),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 20px var(--shadow-color);
}

/* 响应式设计 - 保持清晰度 */
@media (max-width: 768px) {
  .datetime-display {
    gap: 12px;
    padding: 10px 16px;
    border-radius: 24px;
  }
  
  #current-time-text,
  #current-date-text,
  #current-weekday,
  #lunar-date-text {
    font-size: 1.2em;
  }
}

@media (max-width: 480px) {
  .datetime-display {
    gap: 8px;
    padding: 8px 12px;
  }
  
  #current-time-text,
  #current-date-text,
  #current-weekday,
  #lunar-date-text {
    font-size: 1em;
  }
  
  /* 在超小屏幕上改为垂直布局，保持字体一致性 */
  .datetime-display {
    flex-direction: column;
    align-items: center;
  }
  
  .current-date {
    flex-direction: row;
    justify-content: center;
  }
}

/* 增强壁纸模式文字可读性 */
body[style*="background-image"] #current-time-text,
body[style*="background-image"] #current-date-text,
body[style*="background-image"] #lunar-date-text {
  filter: contrast(1.3) brightness(1.2) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 微妙的时间闪烁 */
#current-time-text {
  animation: gentle-pulse 3s ease-in-out infinite;
}

@keyframes gentle-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.95;
  }
}

/* 悬停效果 */
.datetime-display:hover #current-time-text {
  animation: none;
  opacity: 1;
  filter: contrast(1.4) brightness(1.3);
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 0 16px rgba(193, 168, 106, 0.5);
}

.datetime-display:hover .weekday {
  transform: scale(1.1);
  box-shadow: 0 4px 12px var(--shadow-color);
}

/* 夜间模式悬停效果 */
body:not(.light-theme) .datetime-display:hover .weekday {
  background: rgba(193, 168, 106, 0.2);
  color: var(--text-color);
  opacity: 1;
  transform: scale(1.1);
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 0 12px var(--shadow-color);
  box-shadow: 
    0 4px 12px var(--shadow-color),
    inset 0 1px 0 rgba(193, 168, 106, 0.3);
}

.datetime-display:hover #lunar-date-text {
  filter: contrast(1.4) saturate(1.4);
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 0 16px rgba(193, 168, 106, 0.5);
}