/* styles.css */

/* 基础样式：设置所有元素的盒模型为border-box，清除默认内外边距 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 课程表样式：设置表格头和单元格的基础样式 */
#timetable th,
#timetable td {
    padding: 0;
    border: 1px solid #e5e7eb; /* 浅灰色边框 */
    min-width: 120px; /* 最小宽度，确保内容不拥挤 */
}

/* 课程表第一列样式：设置为粘性定位，左侧固定，方便横向滚动时查看 */
#timetable th:first-child,
#timetable td:first-child {
    background-color: #f9fafb; /* 浅灰色背景 */
    font-weight: 600; /* 半粗体 */
    text-align: center;
    position: sticky; /* 粘性定位 */
    left: 0; /* 固定在左侧 */
    z-index: 2; /* 层级高于其他单元格 */
}

/* 课程表表头样式：设置为粘性定位，顶部固定，方便纵向滚动时查看 */
#timetable th {
    padding: 12px 8px;
    text-align: center;
    position: sticky; /* 粘性定位 */
    top: 0; /* 固定在顶部 */
    z-index: 1; /* 层级高于表格内容 */
}

/* 课程单元格样式：设置最小高度、内边距和交互效果 */
.class-cell {
    min-height: 80px;
    padding: 8px;
    cursor: pointer; /* 鼠标悬停显示手型 */
    transition: all 0.2s ease; /* 过渡动画 */
}

/* 课程单元格悬停效果：轻微放大并添加阴影 */
.class-cell:hover {
    transform: scale(1.02); /* 轻微放大 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 课程信息容器样式：设置内边距、圆角和高度 */
.class-info {
    padding: 6px;
    border-radius: 6px; /* 圆角 */
    height: 100%;
    color: white; /* 文字颜色为白色，与背景色对比 */
}

/* 课程名称样式：设置字体粗细、底部间距和文字溢出处理 */
.class-name {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.9rem;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 溢出显示省略号 */
}

/* 课程元信息（教师、教室）样式：设置较小字体和透明度 */
.class-meta {
    font-size: 0.75rem;
    opacity: 0.9; /* 轻微透明 */
}

/* 特殊时间行样式：设置高度和内边距（大课间、午休、课后服务） */
.break-row td, .lunch-row td, .sports-row td {
    height: 40px;
    padding: 4px;
}

/* 大课间样式：设置背景色、文字色和居中对齐 */
.break-time {
    background-color: #fef3c7; /* 浅黄色背景 */
    color: #d97706; /* 深黄色文字 */
    text-align: center;
    padding: 4px;
    font-weight: 500;
    border-radius: 4px;
}

/* 午休样式：设置背景色、文字色和居中对齐 */
.lunch-time {
    background-color: #dbeafe; /* 浅蓝色背景 */
    color: #1e40af; /* 深蓝色文字 */
    text-align: center;
    padding: 4px;
    font-weight: 500;
    border-radius: 4px;
}

/* 课后服务样式：设置背景色、文字色和居中对齐 */
.sports-time {
    background-color: #fee2e2; /* 浅红色背景 */
    color: #dc2626; /* 深红色文字 */
    text-align: center;
    padding: 4px;
    font-weight: 500;
    border-radius: 4px;
}

/* 课程特定颜色：不同课程对应不同背景色 */
.subject-chinese { background-color: #ff6f91; } /* 语文 - 桃红 */
.subject-math { background-color: #0081cf; } /* 数学 - 蓝色 */
.subject-english { background-color: #00c9a7; } /* 英语 - 绿色 */
.subject-science { background-color: #ffc75f; } /* 科学 - 黄色 */
.subject-art { 
    background: linear-gradient(135deg, #ec4899, #8b5cf6, #f9f871); 
    background-size: 200% 200%;
    animation: gradient 3s ease infinite;
} /* 美术 - 彩色渐变 */
.subject-music { background-color: #ff8066; } /* 音乐 - 肉粉色 */
.subject-info { background-color: #f3c5ff; } /* 信息 - 浅紫色 */
.subject-pe { background-color: #845ec2; } /* 体育 - 紫色 */
.subject-labor { background-color: #008f7a; } /* 劳动 - 绿色 */
.subject-morality { background-color: #06b6d4; } /* 道德/德育 - 青色 */
.subject-meeting { background-color: #b0a8b9; } /* 班会 - 灰色 */
.subject-football { background-color: #c34a36; } /* 足球 - 铁锈红 */

/* 彩色渐变动画：美术课背景色动画 */
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 模态框动画：显示时的过渡效果 */
#classModal.active {
    display: flex;
    opacity: 1; /* 完全不透明 */
}

#classModal.active > div {
    transform: scale(1); /* 恢复原尺寸 */
}

/* 响应式调整：屏幕宽度小于768px时的样式 */
@media (max-width: 768px) {
    .class-cell {
        min-height: 70px; /* 减小课程单元格高度 */
    }
    
    #timetable th,
    #timetable td {
        min-width: 100px; /* 减小最小宽度 */
    }
    
    .class-name {
        font-size: 0.85rem; /* 减小字体 */
    }
    
    .class-meta {
        font-size: 0.7rem; /* 减小字体 */
    }
}

/* 响应式调整：屏幕宽度小于640px时的样式 */
@media (max-width: 640px) {
    .class-cell {
        min-height: 60px; /* 进一步减小高度 */
        padding: 4px; /* 减小内边距 */
    }
    
    #timetable th,
    #timetable td {
        min-width: 80px; /* 进一步减小最小宽度 */
    }
}

/* 打印样式：打印时的特殊样式 */
@media print {
    header, footer, #todayBtn, #printBtn {
        display: none; /* 隐藏不需要打印的元素 */
    }
    
    .container {
        padding: 0; /* 移除容器内边距 */
    }
    
    #timetable {
        border: 1px solid #000; /* 表格添加黑色边框 */
    }
    
    #timetable th,
    #timetable td {
        border-color: #999; /* 边框颜色改为深灰色 */
        color: #000; /* 文字颜色改为黑色 */
    }
    
    .class-info {
        color: #000 !important; /* 强制文字为黑色 */
        border: 1px solid #999; /* 添加边框 */
        background: #fff !important; /* 移除背景色，便于打印 */
    }
}