/* styles.css */

/* 整体布局容器样式 */
.container {
    max-width: 960px;
    margin: auto;
    padding: 1rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
    background: #f9f9f9;
    border-radius: 3px;
}

.student-link {
  position: relative;
  z-index: 1000; /* 确保链接在最前面 */
  color: #007bff;  /* 亮蓝色，Bootstrap的链接颜色 */
  font-weight: bold;
  font-size: 18px; /* 或根据实际情况调整大小 */
  text-decoration: none;  /* 去掉下划线 */
  background-color: #f9f9f9; /* 轻微的白色背景，增加对比度 */
  padding: 5px 10px; /* 添加一些内边距 */
  border-radius: 5px; /* 轻微的圆角边框 */
  transition: color 0.3s, background-color 0.3s; /* 平滑的颜色过渡效果 */
}

.student-link:hover, .student-link:focus {
  color: #0056b3; /* 悬停或聚焦时的颜色，稍暗的蓝色 */
  text-decoration: underline; /* 添加下划线以指示可以点击 */
  background-color: rgba(255, 255, 255, 1); /* 悬停或聚焦时的背景色 */
}


/* 标题样式 */
.title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #1E90FF;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

/* 搜索区域 */
.search-area {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

/* 搜索表单样式 */
.search-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* 添加间隙 */
}

/* 输入框和按钮样式 */
.search-form input,
.search-form select,
.search-form button {
    flex: 1 1 auto; /* 允许灵活扩展或收缩 */
    margin: 0.5rem; /* 保持间距 */
}

/* 高级检索按钮样式 */
.advanced-search-toggle {
    margin-left: 0.5rem; /* 与搜索按钮保持一定间距 */
}

/* 高级检索面板样式 */
#advancedSearchPanel {
    padding: 1rem;
    margin-top: 1rem;
    border: 1px solid #ddd;
    border-radius: 1px;
    background: #fcfcfc;
}

/* 搜索结果数量显示样式 */
#resultsCount {
    margin-top: 1rem;
    color: red;
    margin-bottom: 1rem;
}

/* 搜索结果容器样式 */
#results {
    margin-top: 1rem;
}

/* 媒体查询，用于适配小屏幕 */
@media (max-width: 768px) {

    /* 确保表头显示 */
    .table thead {
        display: table-header-group; /* 或者使用其他适当的显示方式 */
    }

    /* 确保表格行和单元格的正常显示 */
    .table tbody tr {
        display: table-row; /* 如果需要，可以保持默认的表格行为为 */
    }

    .table td {
        display: table-cell; /* 保持单元格的默认表现 */
        text-align: left; /* 根据需要对齐文本 */
        position: static; /* 移除相对定位 */
        padding-left: initial; /* 移除额外的内边距 */
    }

    /* 移除伪元素内容的显示，因为表头会显示 */
    .table td::before {
        content: none;
    }

    /* 标题样式调整 */
    .title {
        font-size: 1.8rem;
    }

    /* 搜索区域改为垂直排列 */
    .search-area,
    .search-form {
        flex-direction: column;
    }

    /* 输入框、下拉菜单、按钮宽度调整 */
    .search-form input,
    .search-form select,
    .search-form button {
        width: 100%;
        margin: 5px 0; /* 调整为垂直间距 */
    }

    /* 高级搜索面板样式调整 */
    #advancedSearchPanel {
        padding: 0;
        margin-top: 0;
        border: none;
        background: none;
    }
}

/* 图标样式 */
.logo {
    max-width: 100px;
    height: auto;
}

/* styles.css */

/* 卡片布局样式 */
.teacher-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
}

/* 为了在小屏幕上更易读，可以使段落更紧凑 */
.teacher-card p {
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

/* 媒体查询，用于适配小屏幕 */
@media (max-width: 768px) {
    /* 可以为小屏幕做更多调整，例如减小内边距、边框等 */
    .teacher-card {
        padding: 0.5rem;
    }
}


@media (max-width: 768px) {
    .table thead {
        display: none; /* 在小屏幕上隐藏表头 */
    }

    .table tbody tr {
        display: block; /* 使每行表现得像一个卡片 */
        margin-bottom: 0.5rem; /* 增加行与行之间的距离 */
    }

    .table td {
        display: block; /* 将单元格显示为块级元素 */
        text-align: right; /* 将文本对齐到右边 */
        position: relative; /* 为伪元素定位 */
        padding-left: 50%; /* 留出足够的空间显示伪元素内容 */
    }

    .table td::before {
        content: attr(data-label); /* 使用属性选择器来显示内容 */
        position: absolute; /* 绝对定位 */
        left: 0;
        width: 50%; /* 伪元素的宽度 */
        padding-right: 10px; /* 内边距 */
        white-space: nowrap; /* 防止换行 */
        text-align: left; /* 将文本对齐到左边 */
    }
}

#export-container {
    display: flex; /* 默认是flex但是隐藏，当我们需要显示时将改变它 */
    justify-content: flex-end; /* 将按钮放在容器的末端 */
    padding: 1rem 0; /* 增加一些内边距 */
}

/* 默认隐藏导出按钮 */
#exportButton {
    display: none;
}

@media only screen and (max-width: 768px) {
  .table-responsive thead th {
    font-size: 12px; /* 缩小标题字体 */
  }
  .table-responsive tbody td {
    font-size: 12px; /* 缩小内容字体 */
  }
  .teacher-schedule h5 {
    font-size: 14px; /* 缩小标题字体 */
  }
}