/* bmxt 移动端基础加固（base.css，保证在所有页面加载，不依赖 Tailwind 编译产物） */

/* 1) 输入框/下拉/文本域统一 16px：防止 iOS Safari 聚焦时因字号 <16px 自动放大页面 */
input, select, textarea { font-size: 16px !important; }

/* 2) 弹窗在移动端自适应：小屏占满 92vw，大屏上限 28rem（dialog 由 UA 居中）；
      短屏（手机横屏）限高并允许内部滚动，避免弹窗超出屏幕无法操作 */
dialog {
  width: min(92vw, 28rem);
  max-width: none;
  max-height: 90dvh;
  border: none;
  padding: 0;
  border-radius: 1rem;
}
dialog > div { max-height: 90dvh; overflow-y: auto; }

/* 3) 后台宽表格在窄屏改为横向滚动而非挤压换行（仅作用于可滚动容器内的表格） */
.overflow-x-auto > table { min-width: 720px; }
/* 横向滚动提示：触摸设备上滚动条不可见，用渐隐边缘暗示可滑动 */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }

/* 4) 导航栏「一键初始化」危险按钮：红色突出，与常规导航明显区分 */
.nav-init-btn {
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}
.nav-init-btn:hover { background: #b91c1c; }

/* 5) 后台操作按钮：显式配色（不依赖 Tailwind 编译产物，!important 抵御缓存/深色模式滤镜导致白字不可见） */
.btn-warn {
  background-color: #f97316 !important;
  color: #ffffff !important;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
.btn-warn:hover { background-color: #ea580c !important; }
.btn-warn:disabled, .btn-warn[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
.btn-danger {
  background-color: #ef4444 !important;
  color: #ffffff !important;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
.btn-danger:hover { background-color: #dc2626 !important; }

/* 6) 登录主按钮：明确蓝色背景 + 白色文字（不依赖 Tailwind 编译产物，
      !important 抵御缓存/深色模式滤镜导致白字不可见；与 .btn-warn 同模式） */
.btn-primary {
  background-color: #2563eb !important; /* blue-600 */
  color: #ffffff !important;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background-color: #1d4ed8 !important; } /* blue-700 */
.btn-primary:disabled, .btn-primary[disabled] {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* ---------------- 全局移动端体验加固 ---------------- */

/* 禁止部分安卓浏览器自动放大字号（用户系统字号大时保持布局稳定） */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 去除触摸高亮残影，点击反馈由各按钮 active:scale 提供 */
body { -webkit-tap-highlight-color: transparent; }

/* 刘海/挖孔屏安全区：横屏时左右留白，避免内容被圆角/手势条遮挡 */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  /* 底部固定操作区/页脚预留手势条高度 */
  .pb-safe { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }
}

/* 触摸设备：顶栏链接与分页按钮加大点击热区（≥40px），滑动更顺滑 */
@media (pointer: coarse) {
  #topnav a, #topnav button { min-height: 40px; display: inline-flex; align-items: center; }
  .overflow-x-auto { scrollbar-width: none; }
  .overflow-x-auto::-webkit-scrollbar { display: none; }
}

/* 键盘可达性：焦点元素给出清晰描边（触屏不显示，键控/外接键盘可见） */
:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }

/* 用户偏好减弱动效时，关闭过渡动画 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==================== 响应式适配补全（PC / 平板 / 手机） ====================
 * 根因：lib/tailwind.min.css 为手工裁剪产物，仅含基础类，未编译 sm:/md:/lg:
 * 断点变体与 max-w-2xl/3xl/4xl/5xl。导致后台页在 PC/平板无法按设计排布、学生端
 * 页面在 PC 上被锁死为手机宽度。下方按 Tailwind 断点（sm≥640 / md≥768 / lg≥1024）
 * 补齐，使现有 HTML 类的响应式意图生效。base.css 在所有页面均位于 tailwind.min.css
 * 之后加载，故此处规则可正确覆盖基础类。移除本段即可回退。
 */

/* 容器/卡片宽度上限：PC/平板更宽；手机视口本身 < 上限，故仍按全宽显示 */
.max-w-2xl { max-width: 42rem; }   /* 672px */
.max-w-3xl { max-width: 48rem; }   /* 768px */
.max-w-4xl { max-width: 56rem; }   /* 896px */
.max-w-5xl { max-width: 64rem; }   /* 1024px */

/* —— sm ≥ 640px（平板竖屏及以上） —— */
@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:w-56 { width: 14rem; }       /* 224px */
  .sm\:w-64 { width: 16rem; }       /* 256px */
  .sm\:gap-4 { gap: 1rem; }
  .sm\:p-5 { padding: 1.25rem; }
  .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}

/* —— md ≥ 768px（平板横屏 / 小笔记本） —— */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* —— lg ≥ 1024px（PC / 大屏） —— */
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------- 响应式适配补全 · 缺失颜色类（2026-11-02） ----------------
   精简版 tailwind.min.css 未编译以下颜色类：元素背景为透明 + 白色文字 → 浅色背景下
   「🎲 随机分班 / 🔗 生成班主任查询链接」等按钮文字不可见。此处按 Tailwind 官方色值补齐。
   注意：不带 !important，使 hover: 变体仍可正常覆盖。 */
.bg-amber-600 { background-color: #d97706; }
.hover\:bg-amber-600:hover { background-color: #d97706; }
.bg-blue-600 { background-color: #2563eb; }
.bg-emerald-700 { background-color: #047857; }
.hover\:bg-emerald-800:hover { background-color: #065f46; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-800 { background-color: #1f2937; }
.bg-indigo-600 { background-color: #4f46e5; }
.bg-indigo-700 { background-color: #4338ca; }
.hover\:bg-indigo-700:hover { background-color: #4338ca; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-red-100 { background-color: #fee2e2; }
.bg-red-600 { background-color: #dc2626; }
.bg-red-700 { background-color: #b91c1c; }
.hover\:bg-red-700:hover { background-color: #b91c1c; }
.bg-sky-600 { background-color: #0284c7; }
.hover\:bg-sky-700:hover { background-color: #0369a1; }

/* ---------------- 后台左侧导航栏（2026-11-02，由顶部横条迁移） ----------------
   PC（≥1024px）：左侧固定深色侧边栏，正文区 padding-left 让位；
   移动端：侧边栏隐藏，左上角 ☰ 按钮唤起抽屉 + 半透明遮罩。 */
.adm-side {
  position: fixed; left: 0; top: 0; bottom: 0; width: 208px;
  background: #111827; color: #fff; z-index: 40;
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .25s ease;
  box-shadow: 2px 0 12px rgba(0,0,0,.15);
}
.adm-side.open { transform: translateX(0); }
.adm-side-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 12px; font-weight: 700; font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.adm-side-links { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.adm-side-links a {
  display: block; padding: 9px 10px; border-radius: 8px;
  font-size: 14px; color: #d1d5db; text-decoration: none; white-space: nowrap;
}
.adm-side-links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.adm-side-links a.active { color: #fff; background: rgba(255,255,255,.18); font-weight: 700; }
.adm-side-foot { padding: 8px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 6px; }
.adm-side-foot button, .adm-side-foot a {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px;
  font-size: 13px; color: #d1d5db; background: transparent; border: none; cursor: pointer;
}
.adm-side-foot button:hover, .adm-side-foot a:hover { color: #fff; background: rgba(255,255,255,.08); }
.adm-burger {
  position: fixed; top: 10px; left: 10px; z-index: 41;
  width: 40px; height: 40px; border-radius: 10px; border: none; cursor: pointer;
  background: #111827; color: #fff; font-size: 18px; line-height: 40px; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.adm-overlay {
  position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.adm-overlay.show { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) {
  .adm-side { transform: none; }
  .adm-burger, .adm-overlay { display: none; }
  body { padding-left: 208px; }
}
/* 移动端（<1024px）：后台页面顶部为固定 ☰ 按钮让位（由 admin-common.js 给 body 加 .adm-body） */
@media (max-width: 1023.9px) {
  body.adm-body { padding-top: 56px; }
}
