/* ============================================================
   主页专业优化 V2.0
   优化方向：卡片层次感、统计卡片、欢迎区域、整体配色
   ============================================================ */

/* ========== 1. 主页整体容器优化 ========== */
#homePage{
  padding:20px 24px !important;
  max-width:100% !important;
  width:100% !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* ========== 2. 通知提示优化 ========== */
#homeNoticeTip{
  background:linear-gradient(135deg, #fef9c3 0%, #fde68a 100%) !important;
  border:1px solid #f59e0b !important;
  border-radius:12px !important;
  padding:12px 16px !important;
  font-size:13px !important;
  color:#78350f !important;
  box-shadow:0 2px 8px rgba(245,158,11,0.15) !important;
  margin-bottom:16px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px;
  animation:noticeSlideIn 0.5s ease;
}
#homeNoticeTip b{
  color:#92400e !important;
}
#homeNoticeTip a{
  color:#0284c7 !important;
  text-decoration:none;
  font-weight:600;
  transition:color 0.2s ease;
}
#homeNoticeTip a:hover{
  color:#0369a1 !important;
  text-decoration:underline;
}

@keyframes noticeSlideIn{
  0%{opacity:0; transform:translateY(-10px);}
  100%{opacity:1; transform:translateY(0);}
}

/* ========== 3. 主页标题优化 ========== */
#homePage > h3{
  font-size:22px !important;
  font-weight:700 !important;
  color:#1e293b !important;
  margin-bottom:16px !important;
  padding-bottom:12px !important;
  border-bottom:2px solid #e2e8f0 !important;
  position:relative;
}
#homePage > h3::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:60px;
  height:2px;
  background:linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius:2px;
}
#homePage > h3 span{
  display:flex;
  align-items:center;
  gap:8px;
}

/* 主页工具按钮 */
.home-tool-btn{
  width:36px !important;
  height:36px !important;
  border-radius:10px !important;
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
  font-size:16px !important;
  cursor:pointer !important;
  transition:all 0.2s ease !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.05) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.home-tool-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.1) !important;
  border-color:#cbd5e1 !important;
}

/* ========== 4. 欢迎区域优化 ========== */
#homePage > div:nth-of-type(2){
  background:linear-gradient(135deg, #1e3a8a 0%, #2563eb 40%, #3b82f6 70%, #60a5fa 100%) !important;
  border-radius:20px !important;
  padding:24px 28px !important;
  margin-bottom:20px !important;
  color:#fff !important;
  box-shadow:
    0 10px 40px rgba(37,99,235,0.35),
    0 4px 12px rgba(37,99,235,0.2),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
  position:relative;
  overflow:hidden;
  animation:welcomeFadeIn 0.6s ease;
}

/* 欢迎区域装饰元素 */
#homePage > div:nth-of-type(2)::before{
  content:'';
  position:absolute;
  top:-50%;right:-20%;
  width:400px;height:400px;
  background:radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
#homePage > div:nth-of-type(2)::after{
  content:'';
  position:absolute;
  bottom:-30%;left:-10%;
  width:300px;height:300px;
  background:radial-gradient(circle, rgba(139,92,246,0.2) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

/* 问候语 */
#homeGreeting{
  font-size:24px !important;
  font-weight:700 !important;
  margin-bottom:6px !important;
  text-shadow:0 2px 4px rgba(0,0,0,0.1) !important;
  position:relative;
  z-index:1;
}

/* 日期 */
#homeDate{
  font-size:14px !important;
  opacity:0.9 !important;
  margin-bottom:8px !important;
  position:relative;
  z-index:1;
}

/* 出行提醒 */
#homePage > div:nth-of-type(2) > div > div:last-child{
  font-size:13px !important;
  opacity:0.85 !important;
  position:relative;
  z-index:1;
}

/* 天气区域 */
#homePage > div:nth-of-type(2) > div > div:last-child > div{
  background:rgba(255,255,255,0.15) !important;
  backdrop-filter:blur(10px);
  border-radius:12px !important;
  padding:10px 16px !important;
  border:1px solid rgba(255,255,255,0.2) !important;
  position:relative;
  z-index:1;
}

@keyframes welcomeFadeIn{
  0%{opacity:0; transform:translateY(20px);}
  100%{opacity:1; transform:translateY(0);}
}

/* ========== 5. KPI提醒优化 ========== */
#homePage > div:nth-of-type(3){
  background:linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border-radius:14px !important;
  padding:14px 20px !important;
  margin-bottom:20px !important;
  border:1px solid #fbbf24 !important;
  color:#92400e !important;
  font-size:14px !important;
  font-weight:600 !important;
  text-align:center !important;
  box-shadow:0 4px 12px rgba(251,191,36,0.2) !important;
  position:relative;
  overflow:hidden;
}
#homePage > div:nth-of-type(3)::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
}

/* ========== 6. 卡片统一优化 ========== */
.home-card{
  background:#fff !important;
  border-radius:16px !important;
  padding:20px 24px !important;
  margin-bottom:20px !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.05),
    0 4px 12px rgba(0,0,0,0.05) !important;
  border:1px solid #f1f5f9 !important;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position:relative;
  overflow:hidden;
}
.home-card:hover{
  box-shadow:
    0 4px 12px rgba(0,0,0,0.08),
    0 12px 32px rgba(0,0,0,0.08) !important;
  transform:translateY(-2px);
  border-color:#e2e8f0 !important;
}

/* 卡片标题优化 */
.home-card-title,
.home-card > div:first-child,
.home-card > h3,
.home-card > h4{
  font-size:16px !important;
  font-weight:700 !important;
  color:#1e293b !important;
  margin-bottom:16px !important;
  padding-bottom:12px !important;
  border-bottom:1px solid #f1f5f9 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* ========== 7. 统计卡片优化（今日系统使用） ========== */
.stats-grid{
  display:grid !important;
  grid-template-columns:repeat(5, 1fr) !important;
  gap:12px !important;
  margin-bottom:16px !important;
}

.stats-item{
  background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-radius:12px !important;
  padding:16px 12px !important;
  text-align:center !important;
  border:1px solid #e2e8f0 !important;
  transition:all 0.25s ease !important;
  position:relative;
  overflow:hidden;
}
.stats-item:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,0.1) !important;
  border-color:#cbd5e1 !important;
  background:linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
}

/* 统计数字 */
.stats-item > div:first-child,
.stats-item > span:first-child{
  font-size:28px !important;
  font-weight:800 !important;
  background:linear-gradient(135deg, #1e40af, #3b82f6);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.2 !important;
  margin-bottom:4px !important;
  display:block !important;
}

/* 统计标签 */
.stats-item > div:last-child,
.stats-item > span:last-child{
  font-size:12px !important;
  color:#64748b !important;
  font-weight:500 !important;
}

/* 不同统计项的配色 */
.stats-item:nth-child(1):hover > div:first-child{
  background:linear-gradient(135deg, #1e40af, #3b82f6);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stats-item:nth-child(2):hover > div:first-child{
  background:linear-gradient(135deg, #047857, #10b981);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stats-item:nth-child(3):hover > div:first-child{
  background:linear-gradient(135deg, #b45309, #f59e0b);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stats-item:nth-child(4):hover > div:first-child{
  background:linear-gradient(135deg, #7c3aed, #a78bfa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stats-item:nth-child(5):hover > div:first-child{
  background:linear-gradient(135deg, #be123c, #f43f5e);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* 最近登录IP */
.stats-ip{
  background:#f8fafc !important;
  border-radius:10px !important;
  padding:12px 16px !important;
  font-size:12px !important;
  color:#64748b !important;
  border:1px solid #e2e8f0 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* ========== 8. 数据概览卡片优化（本月数据） ========== */
#homePage .home-card .stats-grid,
#homePage .home-card > div > div[style*="display:grid"],
#homePage .home-card > div > div[style*="flex"]{
  display:grid !important;
  grid-template-columns:repeat(5, 1fr) !important;
  gap:12px !important;
  margin:16px 0 !important;
}

/* 数据概览小卡片 */
#homePage .home-card > div > div > div[style*="background"],
#homePage .home-card > div > div > div[class*="stat"]{
  border-radius:14px !important;
  padding:18px 16px !important;
  border:1px solid rgba(0,0,0,0.05) !important;
  transition:all 0.25s ease !important;
  position:relative;
  overflow:hidden;
}
#homePage .home-card > div > div > div[style*="background"]:hover,
#homePage .home-card > div > div > div[class*="stat"]:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 12px 28px rgba(0,0,0,0.12) !important;
}

/* 数据概览数字 */
#homePage .home-card > div > div > div[style*="background"] > div:first-child,
#homePage .home-card > div > div > div[class*="stat"] > div:first-child{
  font-size:26px !important;
  font-weight:800 !important;
  margin-bottom:4px !important;
}

/* ========== 9. 全集团数据概况横幅优化 ========== */
#homePage .home-card > div[style*="background:linear-gradient"]{
  border-radius:14px !important;
  padding:20px 24px !important;
  margin-bottom:20px !important;
  box-shadow:0 6px 20px rgba(0,0,0,0.15) !important;
  position:relative;
  overflow:hidden;
}
#homePage .home-card > div[style*="background:linear-gradient"]::before{
  content:'';
  position:absolute;
  top:-50%;right:-20%;
  width:300px;height:300px;
  background:radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

/* ========== 10. 响应式优化 ========== */
@media (max-width:768px){
  #homePage{
    padding:16px !important;
  }
  .stats-grid{
    grid-template-columns:repeat(2, 1fr) !important;
  }
  #homePage .home-card > div > div[style*="display:grid"],
  #homePage .home-card > div > div[style*="flex"]{
    grid-template-columns:repeat(2, 1fr) !important;
  }
  #homeGreeting{
    font-size:20px !important;
  }
}

@media (max-width:480px){
  .stats-grid{
    grid-template-columns:1fr !important;
  }
  #homePage .home-card > div > div[style*="display:grid"],
  #homePage .home-card > div > div[style*="flex"]{
    grid-template-columns:1fr !important;
  }
}

/* ========== 11. 减少动画（无障碍） ========== */
@media (prefers-reduced-motion: reduce){
  #homeNoticeTip,
  #homePage > div:nth-of-type(2),
  .home-card,
  .stats-item{
    animation:none !important;
    transition:none !important;
  }
}


/* ========== 12. 统计卡片图标优化 ========== */
.stats-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
}
.stats-item .stat-icon{
  font-size:24px !important;
  line-height:1 !important;
  margin-bottom:4px !important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
/* 数据概览小卡片图标 */
#homePage .home-card > div > div > div[style*="background"] .stat-icon,
#homePage .home-card > div > div > div[class*="stat"] .stat-icon{
  font-size:22px !important;
  margin-bottom:8px !important;
  display:block !important;
}