/* ============================================================
   public/css/mobile.css — 移动端适配
   ============================================================ */

/* ── 触摸优化基础 ── */
* { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: 16px !important; } /* 防iOS缩放 */
button { touch-action: manipulation; }

/* ── 移动端侧边栏 ── */
@media (max-width: 768px) {
  .app-layout { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 280px;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: none;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }

  .sidebar-overlay.active { display: block; }

  .main-content {
    grid-column: 1;
    min-height: 100vh;
  }

  .mobile-menu-btn { display: flex !important; }

  .top-header {
    padding: 0 var(--space-4);
  }

  .page-content {
    padding: var(--space-3);
  }

  /* 隐藏侧边栏折叠按钮 */
  .sidebar-toggle { display: none; }

  /* 班级切换器 */
  .class-switcher { padding: var(--space-2) var(--space-4); }
}

/* ── 顶部导航移动端 ── */
@media (max-width: 768px) {
  .semester-badge span:first-child { display: none; }
  .page-header { flex-direction: column; gap: var(--space-3); align-items: flex-start; }
  .page-header-actions { width: 100%; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .page-header-actions .btn { font-size: var(--text-xs); padding: 6px 10px; }
}

/* ── 卡片和网格 ── */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* 统计卡片 */
  .stats-grid, [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .stat-value { font-size: var(--text-xl) !important; }

  .card { padding: var(--space-4); }
}

/* ── 表格移动端 ── */
@media (max-width: 768px) {
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .table th, .table td {
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* 操作列移动端显示 */
  .actions-col .btn { padding: 2px 6px; font-size: 11px; }
}

/* ── 弹窗移动端 ── */
@media (max-width: 768px) {
  .modal {
    width: calc(100vw - var(--space-8));
    max-width: 100%;
    margin: var(--space-4);
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
  }

  .modal-lg, .modal-xl { width: calc(100vw - var(--space-6)); }
  .modal-sm { width: calc(100vw - var(--space-8)); }

  /* 弹窗内表单网格变1列 */
  .modal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .modal-footer {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .modal-footer .btn { flex: 1; min-width: 80px; }
}

/* ── 工具栏移动端 ── */
@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .toolbar-left { flex-wrap: wrap; gap: var(--space-2); }
  .search-box input { width: 160px !important; }
}

/* ── Tab栏移动端 ── */
@media (max-width: 768px) {
  .tab-bar {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-1);
    padding-bottom: var(--space-1);
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }
}

/* ── 考勤点名移动端 ── */
@media (max-width: 768px) {
  #rosterGrid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .roster-card { padding: 6px 8px !important; }
}

/* ── 座位安排移动端 ── */
@media (max-width: 768px) {
  #seatGrid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important; }
}

/* ── 值日排班移动端 ── */
@media (max-width: 768px) {
  #dutyGrid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── 课表移动端 ── */
@media (max-width: 768px) {
  #ttGrid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #ttGrid table { min-width: 600px; }
}

/* ── 首页仪表盘移动端 ── */
@media (max-width: 768px) {
  .dashboard-grid { grid-template-columns: 1fr !important; }
  .quick-actions { grid-template-columns: repeat(2, 1fr) !important; }
  .welcome-banner { padding: var(--space-4); }
  .welcome-name { font-size: var(--text-xl); }
}

/* ── 学生导入预览 ── */
@media (max-width: 768px) {
  #importTable { font-size: 11px; }
  #importTable input, #importTable select { width: 70px !important; padding: 2px 4px !important; font-size: 11px !important; }
}

/* ── 班级证书统计 ── */
@media (max-width: 768px) {
  #certStats { grid-template-columns: repeat(2, 1fr) !important; }
  #intStats   { grid-template-columns: repeat(1, 1fr) !important; }
}

/* ── Toast 移动端 ── */
@media (max-width: 768px) {
  #toast-container {
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    top: auto;
  }
  .toast { width: 100%; }
}

/* ── 分页移动端 ── */
@media (max-width: 768px) {
  .page-btn { min-width: 32px; height: 32px; font-size: 12px; }
}

/* ── 表单移动端优化 ── */
@media (max-width: 768px) {
  .form-group { margin-bottom: var(--space-3); }
  .form-row { flex-direction: column; }
}

/* ── 宿舍床位 ── */
@media (max-width: 768px) {
  #dormGrid { grid-template-columns: 1fr !important; }
}

/* ── 积分排行 ── */
@media (max-width: 768px) {
  [id="rankContent"] > div > div {
    flex-wrap: wrap;
  }
}

/* ── 班费统计 ── */
@media (max-width: 768px) {
  #finStats { grid-template-columns: 1fr !important; }
}

/* ── 系统设置 ── */
@media (max-width: 768px) {
  .settings-grid { grid-template-columns: 1fr !important; }
  #themeGrid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── 通用移动端修复 ── */
@media (max-width: 480px) {
  .stats-grid, #certStats { grid-template-columns: 1fr 1fr !important; }
  .quick-actions { grid-template-columns: repeat(2, 1fr) !important; }
  #rosterGrid { grid-template-columns: repeat(2, 1fr) !important; }
  #dutyGrid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 平板适配 ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar { width: 220px; }
  .page-content { padding: var(--space-4); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 3fr 2fr; }
  .quick-actions { grid-template-columns: repeat(4, 1fr); }

  .modal-lg { width: 680px; }
  .modal-xl { width: 90vw; }
}

/* ── 安全区域（iPhone刘海/底部横条）── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .sidebar-footer { padding-bottom: env(safe-area-inset-bottom); }
  .top-header { padding-top: env(safe-area-inset-top); }
  .page-content { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
}

/* ── 深色模式基础准备 ── */
@media (prefers-color-scheme: dark) {
  /* 暂时不强制深色，通过CSS变量可扩展 */
}

/* ── 动画优化（低端设备）── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}