/* ============================================================
   班主任工作台 · UI 设计层（清爽教育风 / 大屏优化）
   说明：本文件仅做视觉层覆盖，不改任何业务逻辑。
   优先级：在 index.html 中于主样式表之后加载，故同特异度下后发胜出。
   ============================================================ */

/* ---------- 1. 配色：清爽教育风（覆盖 :root 变量，整站统一换肤） ---------- */
:root {
  --background: #f5f8fa;          /* 冷调近白，比原米色更清爽 */
  --foreground: #28323b;         /* 深石板灰，对比度更高、更耐看 */
  --card: #ffffff;
  --card-foreground: #28323b;
  --card-border: #e6ecf1;
  --popover: #ffffff;
  --popover-foreground: #28323b;

  --primary: #1f9d8b;            /* 沉静的青绿，保留品牌认知 */
  --primary-foreground: #ffffff;
  --secondary: #eef4f7;
  --secondary-foreground: #3a4853;
  --muted: #eef2f5;
  --muted-foreground: #5d6b76;   /* 比原 #837467 更清晰 */
  --accent: #e3f5f0;
  --accent-foreground: #15705e;

  --info: #2f80ed;
  --info-foreground: #ffffff;
  --success: #27a567;
  --success-foreground: #f6fdf9;
  --warning: #f5a524;
  --warning-foreground: #fff9f0;
  --destructive: #ef5b4c;
  --destructive-foreground: #fff;

  --border: #e3e9ee;
  --input: #e3e9ee;
  --ring: #1f9d8b;

  /* 侧栏：与主题一致的清新绿 */
  --sidebar: #eef6f3;
  --sidebar-foreground: #28323b;
  --sidebar-primary: #1f9d8b;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #d8f0e9;
  --sidebar-accent-foreground: #15705e;
  --sidebar-border: #cfe7df;
  --sidebar-ring: #1f9d8b;

  /* 图表色板，统一到新主题 */
  --chart-1: #1f9d8b;
  --chart-2: #f5a524;
  --chart-3: #ef5b4c;
  --chart-4: #2f80ed;
  --chart-5: #8b7fe0;

  /* 本主题自定义变量 */
  --wb-hero-from: #1f9d8b;
  --wb-hero-via: #18a999;
  --wb-hero-to: #2f80ed;

  /* 字体栈：优先高质量中文无衬线，适配教室/会议室大屏（多为 Windows） */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB",
    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;

  --radius: 0.9rem;
}

/* ---------- 2. 基础排版：易读、通透 ---------- */
html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 数字采用等宽字形，大屏上一目了然 */
.wb-headcount,
.wb-statcard .text-2xl,
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ---------- 3. 卡片视觉统一：柔和阴影 + 细边 ---------- */
.border.bg-card {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 8px 22px -12px rgba(16, 24, 40, .14);
  border-color: var(--card-border);
}

/* ---------- 4. 仪表盘 Hero 班级卡片：突出班级名 + 人数 ---------- */
.wb-hero {
  /* 覆盖原硬编码渐变，改为清新青→蓝，大屏更醒目 */
  background-image: linear-gradient(135deg, var(--wb-hero-from) 0%, var(--wb-hero-via) 48%, var(--wb-hero-to) 100%) !important;
  border: none !important;
  box-shadow: 0 12px 34px -10px rgba(31, 157, 139, .5) !important;
  padding: 1.5rem 1.75rem !important;
}

.wb-classname {
  font-size: 2rem !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  line-height: 1.15;
}

.wb-headcount {
  font-size: 3rem !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}

/* ---------- 5. 统计卡网格 + 单卡：信息层级清晰 ---------- */
.wb-statgrid {
  gap: 1rem !important;
}

.wb-statcard {
  padding: 1.15rem 1.3rem !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* 数字放大、加粗、上色，成为视觉焦点 */
.wb-statcard .text-2xl {
  font-size: 2.3rem !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* 标签更轻、更克制，与数字拉开层级 */
.wb-statcard .text-xs {
  font-size: .8rem !important;
  opacity: .9;
}

.wb-statcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(16, 24, 40, .22) !important;
}

/* ---------- 6. 大屏优化（教室 / 会议室投影） ---------- */
@media (min-width: 1536px) {
  html { font-size: 17px; }

  .wb-main { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }

  .wb-hero { padding: 2.25rem 2.75rem !important; }
  .wb-classname { font-size: 2.6rem !important; }
  .wb-headcount { font-size: 4rem !important; }

  .wb-statgrid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1.35rem !important; }
  .wb-statcard { padding: 1.5rem 1.75rem !important; }
  .wb-statcard .text-2xl { font-size: 2.9rem !important; }

  .border.bg-card { box-shadow: 0 2px 4px rgba(16,24,40,.04), 0 14px 34px -16px rgba(16,24,40,.18); }
}

/* ---------- 6b. 全站宽屏通用优化（希沃一体机 1920×1080 / 2560×1440 / 4K） ---------- */
/* 关键：放宽 main 容器上限，让内容铺满宽屏，而非挤在中间窄条 */
@media (min-width: 1920px) {
  html { font-size: 18px; }

  /* 容器：覆盖 Tailwind 的 2xl:max-w-7xl（80rem），放宽到 88rem 并随屏再放 */
  .wb-main {
    max-width: 88rem !important;
    padding-left: 3.5rem !important;
    padding-right: 3.5rem !important;
  }

  .wb-classname { font-size: 3.1rem !important; }
  .wb-headcount { font-size: 4.75rem !important; }

  .wb-statgrid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1.6rem !important; }
  .wb-statcard .text-2xl { font-size: 3.2rem !important; }

  /* 全站：卡片留白放大，缓解宽屏下的"挤"与"空" */
  .border.bg-card { padding: 1.5rem 1.75rem !important; }
  .border.bg-card .text-2xl { font-size: 1.9rem !important; }

  /* 表格/列表：行高与单元格留白加大，避免文字过密或裁切 */
  table td, table th { padding: .85rem 1rem !important; }
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}

@media (min-width: 2560px) {
  html { font-size: 19px; }

  .wb-main {
    max-width: 104rem !important;
    padding-left: 4.5rem !important;
    padding-right: 4.5rem !important;
  }

  .wb-classname { font-size: 3.5rem !important; }
  .wb-headcount { font-size: 5.25rem !important; }

  .wb-statgrid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1.8rem !important; }
  .wb-statcard .text-2xl { font-size: 3.4rem !important; }
}

/* ---------- 7. 侧栏顶部装饰条，呼应清新主题 ---------- */
aside .h-1\.5.w-full {
  background: linear-gradient(90deg, var(--wb-hero-from), var(--warning) 55%, var(--destructive)) !important;
}



/* ---------- 8. 作业管理「未完成/已完成」· 黄色经典款 + 3D 翻面 ----------
   还原用户认可的原始设计：未完成 = 琥珀黄虚线卡（⏰ + 点我打卡 ✋）；
   已完成 = 3D 翻面卡（✏️ 订正面 ⇄ ✓ 完成面，rotateY(180deg) 翻面对策）。
   本层只做三件事，卡片配色全部交还 bundle 里的原始类名：
   ① 旧内核补 -webkit- 前缀——希沃老浏览器翻面失效/名字被遮的根治；
   ② 徽章溢出兜底（各断点实测可容纳，此处仅保险）；
   ③ 响应式间距（移动端 2 列、大屏逐档放宽）。 */

/* ① 3D 翻面 · 旧内核兼容（Tailwind 任意值类名，选择器需转义） */
.\[perspective\:600px\] { -webkit-perspective: 600px; }
.\[transform-style\:preserve-3d\] { -webkit-transform-style: preserve-3d; }
.\[backface-visibility\:hidden\] { -webkit-backface-visibility: hidden; }

/* 翻面过程中不裁剪 3D 溢出与阴影 */
.wb-hwgrid > button { overflow: visible; }

/* ② 溢出兜底：状态徽章再长也不越界撞邻卡 */
.wb-hwgrid > button > * { max-width: 100%; }
.wb-hwgrid .bg-white\/70.text-warning,
.wb-hwgrid .bg-primary\/15.text-primary {
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* 键盘焦点环：黄底上用深琥珀色，保证可见 */
.wb-hwgrid > button:focus-visible {
  outline: 2px solid #b45309;
  outline-offset: 2px;
}

/* 尊重系统「减少动态」：关掉翻面与按压过渡 */
@media (prefers-reduced-motion: reduce) {
  .wb-hwgrid button,
  .wb-hwgrid button > div { transition: none !important; }
}

/* 两区块顶部对齐：右侧人少时不会被拉成大片空白 */
.wb-hwblocks { align-items: start; }

/* ③ 响应式：移动端 2 列更宽绰；大屏逐档加大间距 */
@media (max-width: 640px) {
  .wb-hwgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }
}
@media (min-width: 1536px) {
  .wb-hwgrid { gap: 1rem !important; }
  .wb-hwblocks { gap: 1.5rem !important; }
}
@media (min-width: 1920px) {
  .wb-hwgrid { gap: 1.15rem !important; }
}