/* ============================================================
   MindSpace 网页三端响应式（手机 / 平板 / 电脑 自动适配）
   - 手机 (<640px)：保持原有手机壳 480px 居中（不改动，老样子）
   - 平板 (640–1023px)：放宽到 860px 居中
   - 电脑 (≥1024px)：放宽到 1120px 居中，列表卡片两列铺开
   只做"容器放宽 + 居中 + 大屏两列"，不改任何业务逻辑与交互。
   ============================================================ */

/* ---------- 学生端 / 教师端：放宽手机壳并居中 ---------- */
@media (min-width: 640px) {
  .app { max-width: 860px; }
  .tabbar { max-width: 860px; }
  .page { padding: 18px 20px; }
  /* 🔴 教师首页（teacher/dashboard.html）的分栏规则写在页面自己的 <style> 里：
     模板样式块在 responsive.css 之后加载，同优先级下会覆盖这里的同名单条规则
     （之前 .home-split{display:block} 就是这样把左右分栏吃掉的）。
     所以首页分栏一律只看页面样式，这里不要再声明 .home-* 以免再打架。 */
}
@media (min-width: 1024px) {
  .app { max-width: 1120px; }
  .tabbar { max-width: 1120px; }
  .page { padding: 22px 28px; }
  /* 电脑：左列（待上课程 / 待处理）加宽，右列更舒展 —— 见页面内 .home-split 的 1024px 断点 */
  /* 电脑上列表卡片两列铺开，避免一条拉太宽 */
  .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .card-grid > .list-item,
  .card-grid > .course-card,
  .card-grid > .notif-item { margin-bottom: 0; }
}

/* ---------- 通知卡片：未读 / 已读视觉状态（看齐小程序） ---------- */
.notif-item { cursor: pointer; transition: opacity .15s, background .15s; }
.notif-item.read { opacity: .6; }
.notif-item.read .li-title { color: var(--text-2); }

/* ---------- 管理端：手机上把侧边栏改成顶部横条 ---------- */
@media (max-width: 820px) {
  .admin-layout { display: block; }
  .sidebar {
    width: 100%; height: auto; position: static;
    display: flex; flex-wrap: wrap; align-items: center;
    padding: 6px 8px; gap: 2px 4px;
  }
  .sidebar .sb-brand { width: 100%; border-bottom: 1px solid #334155; padding: 12px 14px; }
  .sidebar a, .sidebar details.sb-group > summary {
    display: inline-block; padding: 8px 12px; border-left: none; font-size: 13px; white-space: nowrap;
  }
  .sidebar details.sb-group > summary::before { content: ""; }
  .sidebar .sb-group a { display: none; }
  .sidebar .sb-logout { position: static; width: auto; margin-left: auto; padding: 8px 12px; }
  .admin-content { padding: 16px; }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}