/* ============================================ */
/*        响应式布局 - 移动端适配样式              */
/*        不影响电脑端显示效果                    */
/* ============================================ */

/* ---- 平板及以下 1024px ---- */
@media (max-width: 1024px) {
    .modal-content { width: 90%; }
    .form-row { flex-wrap: wrap; }
    .form-row .form-group { min-width: 100%; }
}

/* ---- 平板 768px ---- */
@media (max-width: 768px) {
    /* ===== 登录页 ===== */
    .left-section { display: none; }
    .right-section { width: 100%; padding: 20px; flex-direction: column; }
    .right-section::before {
        content: "🏫 高校员工信息管理系统";
        display: block;
        text-align: center;
        color: white;
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 25px;
        letter-spacing: 2px;
    }
    .login-card { width: 100%; max-width: 340px; }

    /* ===== 管理后台侧边栏（可收缩） ===== */
    .sidebar { width: 60px; position: fixed; left: 0; top: 0; bottom: 0; z-index: 1000; overflow: hidden; transition: width 0.3s ease; }
    .sidebar .logo h1 { font-size: 0; }
    .sidebar .logo p { display: none; }
    .sidebar .nav-item { justify-content: center; padding: 12px 0; font-size: 0; }
    .sidebar .nav-item i { margin-right: 0; font-size: 22px; }
    .sidebar .user-details { display: none; }
    .sidebar .user-info { justify-content: center; padding: 10px 0; }
    .sidebar.expanded { width: 250px; box-shadow: 4px 0 20px rgba(0,0,0,0.3); }
    .sidebar.expanded .logo h1 { font-size: 18px; }
    .sidebar.expanded .logo p { display: block; }
    .sidebar.expanded .nav-item { justify-content: flex-start; padding: 12px 20px; font-size: 14px; }
    .sidebar.expanded .nav-item i { margin-right: 10px; font-size: 18px; }
    .sidebar.expanded .user-details { display: block; }
    .sidebar.expanded .user-info { justify-content: flex-start; padding: 15px 20px; }

    /* 侧边栏遮罩 */
    .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; }
    .sidebar-backdrop.active { display: block; }

    /* 汉堡菜单按钮 */
    .menu-toggle { display: inline-block; background: none; border: none; font-size: 22px; cursor: pointer; padding: 5px; margin-right: 8px; color: #2c3e50; vertical-align: middle; }
    .main-content { margin-left: 60px; }

    /* ===== 顶部栏 ===== */
    .topbar { padding: 10px 15px; }
    .breadcrumb { font-size: 12px; }

    /* ===== 内容区 ===== */
    .content-area { padding: 15px !important; }

    /* ===== 欢迎卡片 ===== */
    .welcome-card { padding: 20px; }
    .welcome-card h2 { font-size: 20px; }

    /* ===== 统计卡片 ===== */
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

    /* ===== 数据表格 ===== */
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table th,
    .data-table td { padding: 10px 8px; font-size: 13px; white-space: nowrap; }

    /* ===== 搜索栏 ===== */
    .search-bar { padding: 15px; }
    .search-group { flex-wrap: wrap; }
    .search-input { min-width: 120px; flex: 1 1 auto; }
    .filter-group { flex-wrap: wrap; }
    .filter-select { min-width: 100px; }

    /* ===== 页面标题栏 ===== */
    .page-header { flex-wrap: wrap; gap: 10px; }
    .page-header h2 { font-size: 20px; }
    .header-actions { flex-wrap: wrap; }

    /* ===== 模态框 ===== */
    .modal-content { width: 95% !important; max-width: 95% !important; margin: 10px; }
    .modal-header { padding: 15px; }
    .modal-body { padding: 15px; }
    .modal-footer { padding: 10px 15px; flex-wrap: wrap; }

    /* ===== 模块卡片 ===== */
    .module-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
    .module-card { padding: 20px; }

    /* ===== 考勤卡片 ===== */
    .checkin-cards { grid-template-columns: 1fr; }
    .checkin-card .time { font-size: 28px; }

    /* ===== 日常提醒卡片 ===== */
    .daily-reminder-card { padding: 20px; }

    /* ===== 分页 ===== */
    .pagination { flex-wrap: wrap; gap: 10px; }

    /* ===== 按钮 ===== */
    .btn { padding: 8px 16px; font-size: 13px; }
}

/* ---- 手机 480px ---- */
@media (max-width: 480px) {
    /* ===== 登录页 ===== */
    body { overflow: auto; }
    .right-section::before { font-size: 22px; }
    .login-card { padding: 20px; max-width: 340px; }
    .login-card-title { font-size: 20px; }
    .role-select { flex-direction: column; gap: 10px; }

    /* ===== 统计卡片 ===== */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 15px; }
    .stat-icon { width: 40px; height: 40px; font-size: 20px; }
    .stat-info h3 { font-size: 20px; }

    /* ===== 模块卡片 ===== */
    .module-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .module-icon { width: 50px; height: 50px; font-size: 24px; }
    .module-card h3 { font-size: 14px; }

    /* ===== 操作按钮网格 ===== */
    .action-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

    /* ===== 月度统计 ===== */
    .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }

    /* ===== 顶部栏 ===== */
    .topbar { flex-wrap: wrap; gap: 8px; }
    .user-actions { flex-wrap: wrap; justify-content: flex-end; }

    /* ===== 页面头 ===== */
    .page-header { flex-direction: column; align-items: flex-start; }

    /* ===== 表格字体 ===== */
    .data-table th,
    .data-table td { padding: 8px 6px; font-size: 12px; }

    /* ===== 模态框 ===== */
    .modal-content { width: 100% !important; max-width: 100% !important; margin: 0; border-radius: 0; min-height: 100vh; max-height: 100%; }
    .modal-body { padding: 12px; }

    /* ===== 按钮 ===== */
    .btn { padding: 6px 12px; font-size: 12px; }
    .btn-sm { padding: 5px 8px; font-size: 11px; }

    /* ===== 搜索 ===== */
    .search-input { min-width: 100px; }
    .filter-select { min-width: 80px; }

    /* ===== 分页 ===== */
    .page-btn { padding: 5px 10px; font-size: 12px; }
}