yss-project/src/app/pages/team-leader/dashboard/dashboard.scss

@use "sass:color";
@use '../../../shared/styles/ios-theme' as ios;
@use '../ios-theme.scss' as local;

/* 新增优化样式 */
@import './dashboard-new-styles.scss';
@import './dashboard-calendar.scss';

// 待审批项目卡片样式
.project-card {
  &.pending-approval {
    border: 2px solid #ff9800 !important;
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.3);
    position: relative;
    animation: pulse 2s ease-in-out infinite;
    
    .approval-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      background: linear-gradient(135deg, #ff9800, #ff6b00);
      color: white;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 2px 8px rgba(255, 152, 0, 0.4);
      z-index: 10;
      
      .badge-icon {
        font-size: 14px;
      }
    }
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* 顶部导航栏样式 */
.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0.625rem 2rem; // 从1rem减少到0.625rem，降低高度
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .navbar-left {
    .navbar-title {
      font-size: 1.25rem; // 从1.5rem减小到1.25rem
      font-weight: 600;
      color: white;
      margin: 0;
    }
  }

  .navbar-right {
    display: flex;
    align-items: center;
    gap: 1.5rem; // 从2rem减少到1.5rem

    .date-display {
      color: rgba(255, 255, 255, 0.9);
      font-size: 0.875rem; // 从0.95rem减小到0.875rem
      font-weight: 500;
    }

    .user-profile {
      display: flex;
      align-items: center;
      gap: 0.625rem; // 从0.75rem减少到0.625rem
      background: rgba(255, 255, 255, 0.15);
      padding: 0.375rem 0.875rem; // 从0.5rem 1rem减少
      border-radius: 50px;
      backdrop-filter: blur(10px);
      transition: background 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.25);
      }

      .user-avatar {
        width: 36px; // 从40px减小到36px
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      }

      .user-name {
        color: white;
        font-weight: 600;
        font-size: 0.9375rem; // 从1rem减小到0.9375rem
      }

      .user-role {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.8125rem; // 从0.875rem减小到0.8125rem
        padding: 0.1875rem 0.625rem; // 从0.25rem 0.75rem减少
        background: rgba(255, 255, 255, 0.2);
        border-radius: 12px;
      }
    }
  }
}

:host {
  display: block;
  background-color: ios.$ios-background-secondary;
  min-height: 100vh;
  padding: 0; // 移除默认padding
  padding-left: ios.$ios-spacing-lg;
  padding-right: ios.$ios-spacing-lg;
  padding-top: calc(70px + ios.$ios-spacing-lg); // 70px为导航栏高度，加上额外间距
  padding-bottom: ios.$ios-spacing-lg;
  overflow-y: auto; /* 确保组件内容可以滚动 */
  max-height: 100vh; /* 限制最大高度为视口高度 */
  box-sizing: border-box; /* 确保padding计入高度 */
}

.dashboard-header {
  margin-bottom: local.$ios-spacing-xxl;
  h1 {
    font-size: local.$ios-font-size-xl;
    font-weight: local.$ios-font-weight-bold;
    color: local.$ios-text-primary;
    margin: 0 0 local.$ios-spacing-lg 0;
  }
  
  // 核心数据指标卡片样式
  .dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: local.$ios-spacing-lg;
    margin-top: local.$ios-spacing-lg;
    
    .metric-card {
      display: flex;
      align-items: center;
      gap: local.$ios-spacing-md;
      background: linear-gradient(135deg, local.$ios-card-background, #f8f9fa);
      border-radius: local.$ios-radius-lg;
      padding: local.$ios-spacing-lg;
      border: 1px solid local.$ios-border;
      box-shadow: local.$ios-shadow-sm;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: local.$ios-shadow-card;
      }
      
      .metric-icon {
        font-size: 2rem;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: local.$ios-radius-full;
        background-color: local.$ios-background;
      }
      
      .metric-icon.warning { background-color: rgba(255, 149, 0, 0.1); }
      .metric-icon.info { background-color: rgba(59, 130, 246, 0.1); }
      .metric-icon.primary { background-color: rgba(124, 58, 237, 0.1); }
      .metric-icon.danger { background-color: rgba(239, 68, 68, 0.1); }
      .metric-icon.success { background-color: rgba(16, 185, 129, 0.1); }
      
      .metric-content { flex: 1; }
      
      .metric-count {
        font-size: 2rem;
        font-weight: local.$ios-font-weight-bold;
        color: local.$ios-text-primary;
        line-height: 1.2;
      }
      
      .metric-label {
        font-size: local.$ios-font-size-sm;
        color: local.$ios-text-secondary;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
    }
  }
}

/* 极窄屏样式优化：减小列间距与列宽，保证可视密�?*/
@media (max-width: 640px) {
  .project-kanban {
    .kanban-header { gap: local.$ios-spacing-sm; }
    .kanban-body {
      gap: local.$ios-spacing-sm;
      .kanban-column {
        min-width: 160px;
        max-width: 160px;
      }
    }
  }
}

@media (max-width: 480px) {
  .project-kanban {
    .kanban-body {
      .kanban-column {
        min-width: 150px;
        max-width: 150px;
      }
    }
  }
}

.dashboard-main {
  max-width: 1400px;
  margin: 0 auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: local.$ios-spacing-lg;
  h2 {
    font-size: local.$ios-font-size-lg;
    font-weight: local.$ios-font-weight-semibold;
    color: local.$ios-text-primary;
    margin: 0;
  }
  .section-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    .btn-link {
      background: transparent;
      border: none;
      color: #0969da;
      cursor: pointer;
      padding: 4px 6px;
      &:hover { text-decoration: underline; }
    }
  }
}

.btn-toggle-view {
  padding: local.$ios-spacing-sm local.$ios-spacing-md;
  border-radius: local.$ios-radius-md;
  border: 1px solid local.$ios-border;
  background: linear-gradient(180deg, #fff, #f8fafc);
  color: local.$ios-text-primary;
  font-size: local.$ios-font-size-sm;
  cursor: pointer;
  box-shadow: local.$ios-shadow-sm;
  transition: all .2s ease;
  &:hover {
    transform: translateY(-1px);
    box-shadow: local.$ios-shadow-card;
  }
}

.gantt-card {
  background: local.$ios-card-background;
  border: 1px solid local.$ios-border;
  border-radius: local.$ios-radius-lg;
  box-shadow: local.$ios-shadow-card;
  padding: local.$ios-spacing-lg;
  margin-bottom: local.$ios-spacing-xl;
  position: relative; // 确保内部绝对定位下拉基于该容�?
  
  .gantt-container {
    width: 100%;
    height: 600px; // 增加高度以更好地展示项目
    min-height: 500px;
  }
  
  .gantt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: local.$ios-spacing-md;
    overflow: visible; // 避免头部区域裁剪下拉
    
    .title {
      font-size: local.$ios-font-size-md;
      font-weight: local.$ios-font-weight-semibold;
      color: local.$ios-text-primary;
    }
    .hint {
      font-size: local.$ios-font-size-xs;
      color: local.$ios-text-secondary;
    }
    // 布局调整：搜索框放在同层级最右边，模式切换在其左�?
    .scale-switch { margin-left: 0; }
    .mode-switch { order: 3; margin-left: 8px; }
    .search-box { order: 4; margin-left: auto; position: relative; }
    // 甘特头部中的搜索建议下拉为悬浮层，不占据文档�?
    .search-box {
      .suggestion-panel {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        min-width: 260px;
        width: max(100%, 360px);
        max-width: 520px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        box-shadow: 0 12px 28px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
        z-index: 20;
        padding: 6px;
      }
      .suggestion-panel ul { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
      .suggestion-panel li {
        padding: 8px 10px;
        border-radius: 8px;
        cursor: pointer;
        transition: background .15s ease;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .suggestion-panel li:hover { background: #f3f4f6; }
      .suggestion-panel .line-1 { display: flex; align-items: center; gap: 8px; }
      .suggestion-panel .line-1 .name { font-weight: 600; color: #111827; flex: 1; min-width: 0; }
      .suggestion-panel .line-1 .badge { font-size: 12px; padding: 2px 6px; border-radius: 999px; background: #eef2ff; color: #4f46e5; }
      .suggestion-panel .line-1 .badge.vip { background: #ede9fe; color: #7c3aed; }
      .suggestion-panel .line-1 .urgency { font-size: 12px; }
      .suggestion-panel .line-2 { display: flex; align-items: center; justify-content: space-between; color: #6b7280; font-size: 12px; }
      .suggestion-panel .empty { padding: 10px 12px; color: #6b7280; font-size: 13px; }
    }
  }

  .gantt-chart {
    width: 100%;
    height: 420px;
  }
}

.section-filters {
  display: flex;
  gap: local.$ios-spacing-md;
  flex-wrap: wrap;
  align-items: center;
  overflow: visible; // 避免看板筛选区搜索建议被裁�?
  
  .custom-select {
    padding: local.$ios-spacing-sm local.$ios-spacing-md;
    border: 1px solid local.$ios-border;
    border-radius: local.$ios-radius-md;
    background-color: local.$ios-background;
    font-size: local.$ios-font-size-sm;
    color: local.$ios-text-primary;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
  }

  .search-box {
    margin-right: 8px;
    position: relative; // 作为下拉定位参�?
    .input-search {
      width: 260px;
      padding: 8px 12px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
      &:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
      }
    }
    // 看板筛选区域同样使用悬浮层下拉
    .suggestion-panel {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 260px;
      width: max(100%, 360px);
      max-width: 520px;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      box-shadow: 0 12px 28px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
      z-index: 20;
      padding: 6px;
    }
    .suggestion-panel ul { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
    .suggestion-panel li {
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .15s ease;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .suggestion-panel li:hover { background: #f3f4f6; }
    .suggestion-panel .line-1 { display: flex; align-items: center; gap: 8px; }
    .suggestion-panel .line-1 .name { font-weight: 600; color: #111827; flex: 1; min-width: 0; }
    .suggestion-panel .line-1 .badge { font-size: 12px; padding: 2px 6px; border-radius: 999px; background: #eef2ff; color: #4f46e5; }
    .suggestion-panel .line-1 .badge.vip { background: #ede9fe; color: #7c3aed; }
    .suggestion-panel .line-1 .urgency { font-size: 12px; }
    .suggestion-panel .line-2 { display: flex; align-items: center; justify-content: space-between; color: #6b7280; font-size: 12px; }
    .suggestion-panel .empty { padding: 10px 12px; color: #6b7280; font-size: 13px; }
  }
}

// 项目卡片与看板样�?
.project-kanban {
  position: relative;
  z-index: 1;
  
  // 公共横向滚动容器
  .kanban-scroll {
    overflow-x: auto;
    padding-bottom: local.$ios-spacing-md;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar { height: 6px; }
    &::-webkit-scrollbar-track {
      background: local.$ios-background;
      border-radius: local.$ios-radius-full;
    }
    &::-webkit-scrollbar-thumb {
      background: local.$ios-border;
      border-radius: local.$ios-radius-full;
    }
    &::-webkit-scrollbar-thumb:hover { background: local.$ios-text-tertiary; }

    .kanban-header, .kanban-body { width: max-content; }
  }
  
  // 看板标题�?
  .kanban-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: local.$ios-card-background;
    border-bottom: 1px solid local.$ios-border;
    display: flex;
    gap: local.$ios-spacing-md;
    margin-bottom: local.$ios-spacing-md;
    
    .kanban-column-header {
      flex: 0 0 180px;
      min-width: 180px;
      max-width: 180px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: local.$ios-spacing-sm local.$ios-spacing-md;
      background-color: local.$ios-background;
      border-radius: local.$ios-radius-md;
      border: 1px solid local.$ios-border;
      
      h3 {
        font-size: local.$ios-font-size-sm;
        font-weight: local.$ios-font-weight-medium;
        color: local.$ios-text-primary;
        margin: 0;
      }
      
      .stage-count {
        font-size: local.$ios-font-size-xs;
        background-color: local.$ios-primary;
        color: local.$ios-background;
        padding: 2px 8px;
        border-radius: local.$ios-radius-full;
        font-weight: local.$ios-font-weight-medium;
      }
    }
  }
  
  // 看板主体内容
  .kanban-body {
    display: flex;
    gap: local.$ios-spacing-md;
    
    .kanban-column {
      flex: 1;
      min-width: 180px;
      max-width: 180px;
      height: 400px;
      background-color: local.$ios-background;
      border-radius: local.$ios-radius-md;
      border: 1px solid local.$ios-border;
      padding: local.$ios-spacing-sm;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      
      &::-webkit-scrollbar { width: 4px; }
      &::-webkit-scrollbar-track { background: transparent; }
      &::-webkit-scrollbar-thumb {
        background: local.$ios-border;
        border-radius: local.$ios-radius-full;
      }
      
      .project-card {
        background-color: local.$ios-card-background;
        border-radius: local.$ios-radius-md;
        padding: local.$ios-spacing-md;
        margin-bottom: local.$ios-spacing-sm;
        border: 1px solid local.$ios-border;
        box-shadow: local.$ios-shadow-sm;
        transition: all 0.2s ease;
        cursor: pointer;
        user-select: none;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        &:active { transform: translateY(-1px); opacity: 0.98; }
        &.overdue { border-left: 4px solid local.$ios-danger; }
        &.high-urgency { border-left: 4px solid local.$ios-warning; }
        &.due-soon { border-left: 4px solid local.$ios-warning; }
        
        .project-card-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: local.$ios-spacing-sm;
          
          h4 {
            font-size: local.$ios-font-size-sm;
            font-weight: local.$ios-font-weight-medium;
            color: local.$ios-primary;
            margin: 0;
            cursor: pointer;
            &:hover { text-decoration: underline; }
          }
          
          .project-urgency {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: local.$ios-radius-full;
            font-weight: local.$ios-font-weight-medium;
          }
          
          .urgency-high { background-color: rgba(239, 68, 68, 0.1); color: local.$ios-danger; }
          .urgency-medium { background-color: rgba(255, 149, 0, 0.1); color: local.$ios-warning; }
          .urgency-low { background-color: rgba(59, 130, 246, 0.1); color: local.$ios-info; }
        }
        
        .project-card-content {
          margin-bottom: local.$ios-spacing-sm;
          
          p {
            font-size: 11px;
            color: local.$ios-text-secondary;
            margin: 0 0 4px 0;
          }
          
          .deadline { font-size: 10px; color: local.$ios-text-tertiary; }
        }
        
        .project-card-footer {
          display: flex;
          gap: 4px;
          
          button {
            flex: 1;
            font-size: 10px;
            padding: 4px 6px;
            border: none;
            border-radius: local.$ios-radius-sm;
            cursor: pointer;
            transition: all 0.2s ease;
          }
          
          .btn-view { background-color: local.$ios-primary; color: local.$ios-background; }
          .btn-assign { background-color: local.$ios-success; color: local.$ios-background; }
          button:hover { opacity: 0.9; }
        }
        
        .right-badges {
          display: flex;
          align-items: center;
          gap: 6px;
        }
        .member-badge {
          font-size: 10px;
          padding: 2px 6px;
          border-radius: local.$ios-radius-full;
          background-color: rgba(59, 130, 246, 0.08);
          color: local.$ios-info;
          &.vip {
            background-color: rgba(124, 58, 237, 0.12);
            color: local.$ios-primary;
            font-weight: local.$ios-font-weight-semibold;
          }
        }
      }
      
      .empty-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        
        .empty-icon {
          font-size: 2rem;
          margin-bottom: local.$ios-spacing-sm;
          opacity: 0.3;
        }
        
        p {
          font-size: local.$ios-font-size-sm;
          color: local.$ios-text-tertiary;
          margin: 0;
        }
      }
    }
  }
}

/* 项目监控大盘样式 */
.monitoring-section {
  background-color: local.$ios-card-background;
  border-radius: local.$ios-radius-lg;
  padding: local.$ios-spacing-xl;
  margin-bottom: local.$ios-spacing-xl;
  box-shadow: local.$ios-shadow-card;
  position: relative;
  overflow: visible; // 允许搜索建议下拉面板不被裁剪
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), transparent);
    border-radius: 50%;
    transform: translate(50%, -50%);
    z-index: 0;
    pointer-events: none;
  }

  .gantt-card { position: relative; z-index: 1; }
}

/* 快速操作面板样�?*/
.quick-actions-section {
  background-color: local.$ios-card-background;
  border-radius: local.$ios-radius-lg;
  padding: local.$ios-spacing-xl;
  margin-bottom: local.$ios-spacing-xl;
  box-shadow: local.$ios-shadow-card;
  
  .quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: local.$ios-spacing-lg;
    
    .action-card {
      background: linear-gradient(135deg, local.$ios-background, #f8f9fa);
      border-radius: local.$ios-radius-lg;
      padding: local.$ios-spacing-xl;
      border: 1px solid local.$ios-border;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        border-color: local.$ios-primary-light;
      }
      
      .action-icon {
        font-size: 2.5rem;
        margin-bottom: local.$ios-spacing-md;
        opacity: 0.8;
      }
      
      h3 {
        font-size: local.$ios-font-size-base;
        font-weight: local.$ios-font-weight-medium;
        color: local.$ios-text-primary;
        margin: 0 0 local.$ios-spacing-xs 0;
      }
      
      p {
        font-size: local.$ios-font-size-sm;
        color: local.$ios-text-secondary;
        margin: 0;
      }
    }
  }
}

/* 待办任务样式（重构版 - 基于项目问题板块） */
.todo-section {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h2 {
      font-size: 20px;
      font-weight: 600;
      color: #111827;
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      
      .task-count {
        font-size: 16px;
        color: #6b7280;
        font-weight: 400;
      }
    }
    
    .section-actions {
      display: flex;
      gap: 12px;
      
      .btn-refresh {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        font-size: 14px;
        color: #374151;
        cursor: pointer;
        transition: all 0.2s;
        
        &:hover:not(:disabled) {
          background: #e5e7eb;
          border-color: #d1d5db;
        }
        
        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }
        
        svg.rotating {
          animation: rotate 1s linear infinite;
        }
      }
    }
  }
  
  // 加载/错误/空状态
  .loading-state,
  .error-state,
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    
    .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f4f6;
      border-top-color: #667eea;
      border-radius: 50%;
      animation: rotate 1s linear infinite;
    }
    
    p {
      margin-top: 16px;
      font-size: 14px;
      color: #6b7280;
      
      &.hint {
        font-size: 13px;
        color: #9ca3af;
        margin-top: 8px;
      }
    }
    
    .btn-retry {
      margin-top: 16px;
      padding: 8px 20px;
      background: #667eea;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.2s;
      
      &:hover {
        background: #5568d3;
      }
    }
  }
  
  // 紧凑列表
  .todo-list-compact {
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    .todo-item-compact {
      position: relative;
      display: flex;
      align-items: stretch;
      background: #fafafa;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.2s;
      cursor: pointer;
      
      &:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
      }
      
      // 优先级指示条
      .priority-indicator {
        width: 4px;
        flex-shrink: 0;
        border-radius: 2px 0 0 2px;
        
        // 根据优先级设置颜色
        &[data-priority="critical"] {
          background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
        }
        
        &[data-priority="high"] {
          background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
        }
        
        &[data-priority="medium"] {
          background: linear-gradient(180deg, #eab308 0%, #ca8a04 100%);
        }
        
        &[data-priority="low"] {
          background: linear-gradient(180deg, #d1d5db 0%, #9ca3af 100%);
        }
      }
      
      // 主要内容区
      .task-content {
        flex: 1;
        padding: 16px;
        min-width: 0;
        
        .task-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;
          
          .priority-icon {
            font-size: 16px;
            flex-shrink: 0;
          }
          
          .priority-label {
            font-size: 12px;
            font-weight: 600;
            flex-shrink: 0;
          }
          
          .task-title {
            font-size: 15px;
            font-weight: 500;
            color: #111827;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 0;
          }
          
          .task-badges {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
          }
          
          .badge {
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            white-space: nowrap;
            
            &.badge-priority {
              // 根据优先级设置颜色
              &[data-priority="critical"] {
                background: #fee2e2;
                color: #dc2626;
              }
              
              &[data-priority="high"] {
                background: #ffedd5;
                color: #f97316;
              }
              
              &[data-priority="medium"] {
                background: #fef3c7;
                color: #ca8a04;
              }
              
              &[data-priority="low"] {
                background: #f3f4f6;
                color: #6b7280;
              }
            }
            
            &.badge-type {
              background: #e0e7ff;
              color: #4f46e5;
            }
          }
          
          .issue-type-badge {
            padding: 2px 8px;
            background: #e0e7ff;
            color: #4f46e5;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
            flex-shrink: 0;
          }
        }
        
        .task-meta {
          display: flex;
          align-items: center;
          gap: 16px;
          margin-bottom: 8px;
          flex-wrap: wrap;
          
          .meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: #6b7280;
            
            svg {
              opacity: 0.6;
            }
          }
        }
        
        .task-footer {
          display: flex;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
          
          .time-info,
          .assignee-info {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: #9ca3af;
            
            svg {
              opacity: 0.7;
            }
          }
          
          // 时间信息的特殊样式（支持 tooltip 显示精确时间）
          .time-info {
            cursor: help; // 鼠标悬停时显示帮助图标
            position: relative;
            padding: 2px 4px;
            margin: -2px -4px; // 抵消padding，保持原有位置
            border-radius: 3px;
            transition: all 0.2s ease;
            
            &:hover {
              background-color: rgba(102, 126, 234, 0.1);
              color: #667eea;
              
              svg {
                opacity: 1;
              }
            }
          }
          
          .tags {
            display: flex;
            align-items: center;
            gap: 6px;
            
            .tag {
              padding: 2px 6px;
              background: #f3f4f6;
              color: #6b7280;
              border-radius: 3px;
              font-size: 11px;
            }
            
            .tag-more {
              font-size: 11px;
              color: #9ca3af;
            }
          }
        }
      }
      
      // 操作按钮区
      .task-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        border-left: 1px solid #e5e7eb;
        background: white;
        
        button {
          padding: 6px 12px;
          border: 1px solid #d1d5db;
          border-radius: 4px;
          font-size: 12px;
          cursor: pointer;
          transition: all 0.2s;
          white-space: nowrap;
          
          &.btn-view {
            background: #667eea;
            color: white;
            border-color: #667eea;
            
            &:hover {
              background: #5568d3;
              border-color: #5568d3;
            }
          }
          
          &.btn-mark-read {
            background: white;
            color: #6b7280;
            
            &:hover {
              background: #f9fafb;
              border-color: #9ca3af;
            }
          }
        }
      }
    }
  }
}

// 🆕 双栏布局样式
.todo-section-dual {
  // 双栏容器
  .todo-dual-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 20px;
  }
  
  // 单栏样式
  .todo-column {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
    overflow: hidden;
    
    .column-header {
      padding: 16px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-bottom: 1px solid #e5e7eb;
      
      h3 {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 600;
        color: white;
        display: flex;
        align-items: center;
        gap: 8px;
        
        svg {
          flex-shrink: 0;
        }
        
        .task-count {
          font-size: 13px;
          font-weight: 500;
          padding: 2px 8px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 12px;
          
          &.urgent {
            background: rgba(239, 68, 68, 0.9);
            animation: pulse-glow 2s infinite;
          }
        }
      }
      
      .column-subtitle {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        margin-left: 26px;
      }
    }
    
    // 左栏特定样式（待办问题）
    &.todo-column-issues {
      .column-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
    }
    
    // 右栏特定样式（紧急事件）
    &.todo-column-urgent {
      .column-header {
        background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
      }
      
      // 紧急事件特定样式
      .urgent-item {
        background: #fff8f8;
        border-left-width: 4px;
        
        &[data-urgency="critical"] {
          border-left-color: #dc2626;
          background: #fef2f2;
        }
        
        &[data-urgency="high"] {
          border-left-color: #f97316;
          background: #fff7ed;
        }
        
        &[data-urgency="medium"] {
          border-left-color: #f59e0b;
          background: #fffbeb;
        }
      }
      
      .urgency-indicator {
        width: 4px;
        
        &[data-urgency="critical"] {
          background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
          box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
        }
        
        &[data-urgency="high"] {
          background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
        }
        
        &[data-urgency="medium"] {
          background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
        }
      }
      
      .badge-urgency {
        &[data-urgency="critical"] {
          background: #fee2e2;
          color: #dc2626;
          font-weight: 700;
        }
        
        &[data-urgency="high"] {
          background: #ffedd5;
          color: #f97316;
        }
        
        &[data-urgency="medium"] {
          background: #fef3c7;
          color: #f59e0b;
        }
      }
      
      .badge-event-type {
        background: #dbeafe;
        color: #1e40af;
      }
      
      .task-description {
        font-size: 13px;
        color: #6b7280;
        margin: 8px 0;
        line-height: 1.5;
      }
      
      .deadline-info {
        &.overdue {
          color: #dc2626;
          font-weight: 600;
        }
        
        .overdue-label {
          color: #dc2626;
          font-weight: 600;
        }
        
        .upcoming-label {
          color: #f97316;
        }
        
        .today-label {
          color: #f59e0b;
          font-weight: 600;
        }
      }
      
      .completion-info {
        font-weight: 500;
      }
    }
  }
}

// 🆕 紧急事件脉冲动画
@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    opacity: 0.9;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 响应式布局
@media (max-width: 768px) {
  .todo-section {
    padding: 16px;
    
    .section-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
    
    .todo-list-compact {
      .todo-item-compact {
        flex-direction: column;
        
        .task-actions {
          flex-direction: row;
          border-left: none;
          border-top: 1px solid #e5e7eb;
          padding: 12px;
          
          button {
            flex: 1;
          }
        }
      }
    }
  }
  
  // 🆕 双栏布局响应式
  .todo-section-dual {
    .todo-dual-columns {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    
    .todo-column {
      .column-header h3 {
        font-size: 15px;
      }
    }
  }
}

/* 超期提醒样式 */
.overdue-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: local.$ios-card-background;
  border-radius: local.$ios-radius-lg;
  padding: local.$ios-spacing-xl;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 400px;
  animation: slideIn 0.3s ease-out;
  
  @keyframes slideIn {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
  
  .alert-content {
    h3 {
      font-size: local.$ios-font-size-lg;
      font-weight: local.$ios-font-weight-semibold;
      color: local.$ios-danger;
      margin: 0 0 local.$ios-spacing-lg 0;
      display: flex;
      align-items: center;
      gap: local.$ios-spacing-sm;
    }
    
    ul {
      margin: 0 0 local.$ios-spacing-lg 0;
      padding-left: local.$ios-spacing-xl;
      
      li {
        font-size: local.$ios-font-size-base;
        color: local.$ios-text-primary;
        margin-bottom: local.$ios-spacing-sm;
        
        &:last-child { margin-bottom: 0; }
      }
    }
    
    .alert-actions {
      display: flex;
      gap: local.$ios-spacing-md;
      justify-content: flex-end;
      
      .btn-view-all {
        background-color: local.$ios-primary;
        color: local.$ios-background;
        border: none;
        border-radius: local.$ios-radius-md;
        padding: local.$ios-spacing-sm local.$ios-spacing-lg;
        font-size: local.$ios-font-size-sm;
        font-weight: local.$ios-font-weight-medium;
        cursor: pointer;
        transition: local.$ios-feedback-tap;
        
        &:hover { background-color: local.$ios-primary-light; }
      }
      
      .btn-close {
        background-color: local.$ios-text-tertiary;
        color: local.$ios-text-primary;
        border: none;
        border-radius: local.$ios-radius-md;
        padding: local.$ios-spacing-sm local.$ios-spacing-lg;
        font-size: local.$ios-font-size-sm;
        font-weight: local.$ios-font-weight-medium;
        cursor: pointer;
        transition: local.$ios-feedback-tap;
        
        &:hover { background-color: local.$ios-text-secondary; color: local.$ios-background; }
      }
    }
  }
}

.time-window-buttons {
  display: inline-flex;
  gap: 8px;
  margin-left: 8px;
  button {
    padding: 6px 10px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #fff;
    color: #24292f;
    cursor: pointer;
    transition: all .15s ease;
    &:hover { background: #f6f8fa; }
    &.active { background: #0969da; color: #fff; border-color: #0969da; }
  }
}

.inline-actions {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  .btn-secondary {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #fff;
    color: #24292f;
    cursor: pointer;
    &:hover { background: #f3f4f6; }
  }
}

.urgent-pinned {
  margin: 8px 16px 0;
  padding: 8px 12px;
  background: rgba(255, 241, 241, 0.8);
  border: 1px solid #fecaca;
  border-radius: 8px;
  .pinned-title {
    font-size: 12px;
    color: #b91c1c;
    margin-bottom: 6px;
    font-weight: 600;
  }
  .pinned-list {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .pinned-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #fee2e2;
    cursor: pointer;
    transition: box-shadow .2s ease;
    &:hover { box-shadow: 0 1px 4px rgba(0,0,0,.1); }
    .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
    .dot-high { background: #ef4444; }
    .name { font-weight: 600; color: #111827; }
    .meta { color: #6b7280; font-size: 12px; }
  }
  .btn-view-all {
    padding: 6px 10px;
    border: none;
    background: #ef4444;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
  }
}

/* 全局甘特头部工具条（网格布局，含缩放/搜索/模式切换�?*/
.gantt-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto auto auto; // title/hint | scale | search | mode
  gap: 12px;
  align-items: center;

  .search-box {
    input[type='search'] {
      width: 240px;
      padding: 8px 12px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
      &:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
      }
    }
  }

  .scale-switch {
    margin-left: auto;
    display: inline-flex;
    border: 1px solid local.$ios-border;
    border-radius: 8px;
    overflow: hidden;
    button {
      background: #fff;
      color: local.$ios-text-secondary;
      padding: 6px 10px;
      border: none;
      outline: none;
      cursor: pointer;
      font-size: local.$ios-font-size-sm;
      &:hover { background: local.$ios-background-secondary; }
      &.active {
        background: local.$ios-primary-light;
        color: #fff;
      }
      & + button { border-left: 1px solid local.$ios-border; }
    }
  }

  .mode-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: local.$ios-background;
    border: 1px solid local.$ios-border;
    border-radius: 999px;
    padding: 2px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);

    // 滑块式高亮背�?
    &::before {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      bottom: 2px;
      width: calc(50% - 2px);
      background: linear-gradient(180deg, local.$ios-primary-light 0%, color.adjust(local.$ios-primary-light, $lightness: -4%) 100%);
      border-radius: 999px;
      box-shadow: 0 6px 14px rgba(99,102,241,.22);
      transform: translateX(0%);
      transition: transform .25s cubic-bezier(.2,.8,.2,1);
      z-index: 0;
    }
    &[data-active='designer']::before { transform: translateX(100%); }

    button {
      position: relative;
      z-index: 1;
      background: transparent;
      border: none;
      outline: none;
      color: local.$ios-text-secondary;
      padding: 10px 16px 10px 14px;
      font-size: local.$ios-font-size-sm;
      font-weight: local.$ios-font-weight-semibold;
      letter-spacing: .2px;
      border-radius: 999px;
      cursor: pointer;
      transition: color .2s ease, transform .05s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      &:hover { color: local.$ios-text-primary; }
      &:active { transform: translateY(0.5px); }
      &:focus-visible { box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
      &.active {
        color: #fff;
        text-shadow: 0 1px 0 rgba(0,0,0,.08);
      }
      &::before {
        content: '';
        display: inline-block;
        width: 14px; height: 14px;
      }
      &:first-child::before { content: '📁'; }
      &:last-child::before { content: '🎨'; }
    }

    @media (max-width: 640px) { button { padding: 8px 12px 8px 10px; } }
    @media (max-width: 420px) {
      button {
        padding: 7px 10px 7px 9px;
        font-size: 12px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      &::before { transition: none; }
      button { transition: none; }
    }
  }
}

@media (max-width: 1024px) {
  .gantt-header {
    grid-template-columns: 1fr auto auto; // title/hint | scale | mode; search full row
    grid-auto-rows: auto;
    .search-box { grid-column: 1 / -1; }
  }
  .section-filters {
    .search-box { width: 100%; }
    .input-search { width: min(100%, 520px); }
  }
}

@media (max-width: 640px) {
  .gantt-header {
    gap: 8px;
    .search-box input[type='search'] { width: 100%; }
  }
  .section-filters {
    gap: 6px;
    .input-search { width: 100%; }
  }
}
.workload-summary {
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: local.$ios-background;
  border: 1px solid local.$ios-border;
  border-radius: local.$ios-radius-lg;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);

  .summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    h3 { font-size: local.$ios-font-size-md; margin: 0; color: local.$ios-text-primary; }
    .summary-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      .dimension-switch {
        display: inline-flex;
        border: 1px solid local.$ios-border;
        border-radius: 999px;
        overflow: hidden;
        button {
          background: #fff;
          color: local.$ios-text-secondary;
          padding: 6px 10px;
          border: none;
          cursor: pointer;
          font-size: local.$ios-font-size-sm;
          &:hover { background: local.$ios-background-secondary; }
          &.active { background: local.$ios-primary-light; color: #fff; }
          & + button { border-left: 1px solid local.$ios-border; }
        }
      }
    }
  }

  .workload-chart {
    width: 100%;
    height: 240px;
  }
}

// 在文件末尾追加覆盖样式：让项目监控大盘四列等分占满卡片内�?
.project-kanban {
  // 让头部与主体容器使用可用宽度而非max-content，避免不必要的横向滚�?
  .kanban-scroll {
    .kanban-header, .kanban-body { width: 100%; }
  }

  // 使用grid使四列等分，并确保头部与主体列宽对齐
  .kanban-header {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: local.$ios-spacing-md;

    .kanban-column-header {
      // 取消固定180px，允许自适应
      flex: 1 1 auto;
      min-width: 0;
      max-width: none;
    }
  }

  .kanban-body {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: local.$ios-spacing-md;

    .kanban-column {
      // 取消固定180px，允许自适应
      min-width: 0;
      max-width: none;
    }
  }
}

// 响应式：中屏降为两列，小屏单列，避免过窄
@media (max-width: 1200px) {
  .project-kanban {
    .kanban-header, .kanban-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

@media (max-width: 640px) {
  .project-kanban {
    .kanban-header, .kanban-body { grid-template-columns: 1fr; }
  }
}

/* 员工详情面板样式 */
.employee-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease-out;
}

.employee-detail-panel {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
  
  .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    
    .panel-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      
      .icon-user {
        width: 24px;
        height: 24px;
        stroke-width: 2;
      }
    }
    
    .btn-close {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      border-radius: 8px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      
      svg {
        width: 18px;
        height: 18px;
        stroke: white;
      }
      
      &:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
      }
    }
  }
  
  .panel-content {
    padding: 24px;
    max-height: calc(80vh - 100px);
    overflow-y: auto;
    
    .section {
      margin-bottom: 24px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .section-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        
        .section-icon {
          width: 20px;
          height: 20px;
          stroke: #667eea;
          stroke-width: 2;
        }
        
        h4 {
          margin: 0;
          flex: 1;
          font-size: 16px;
          font-weight: 600;
          color: #1e293b;
        }

        .btn-refresh-survey {
          background: transparent;
          border: none;
          padding: 6px;
          cursor: pointer;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s;
          color: #667eea;

          &:hover:not(:disabled) {
            background: #f0f3ff;
          }

          &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }

          svg {
            transition: transform 0.3s ease;

            &.rotating {
              animation: rotate 1s linear infinite;
            }
          }
        }

        @keyframes rotate {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      }
    }
    
    // 负载概况样式
    .workload-section {
      .workload-info {
        background: #f8fafc;
        border-radius: 12px;
        padding: 20px;
        border: 1px solid #e2e8f0;
        
        .workload-stat {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 16px;
          
          .stat-label {
            font-size: 14px;
            color: #64748b;
            font-weight: 500;
          }
          
          .stat-value {
            font-size: 18px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            
            &.normal-workload {
              color: #059669;
              background: #d1fae5;
            }
            
            &.high-workload {
              color: #dc2626;
              background: #fee2e2;
            }
          }
        }
        
        .project-list {
          .project-label {
            font-size: 14px;
            color: #64748b;
            font-weight: 500;
            margin-bottom: 8px;
            display: block;
          }
          
          .project-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            
            .project-tag {
              background: #667eea;
              color: white;
              padding: 4px 12px;
              border-radius: 16px;
              font-size: 12px;
              font-weight: 500;
              transition: all 0.2s ease;
              
              &.clickable {
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                gap: 4px;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
                
                .icon-arrow {
                  width: 14px;
                  height: 14px;
                  stroke-width: 2.5;
                  opacity: 0;
                  transform: translateX(-4px);
                  transition: all 0.2s ease;
                }
                
                &:hover {
                  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
                  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
                  transform: translateY(-2px);
                  
                  .icon-arrow {
                    opacity: 1;
                    transform: translateX(0);
                  }
                }
                
                &:active {
                  transform: translateY(0);
                  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
                }
              }
              
              &.more {
                background: #94a3b8;
                cursor: default;
              }
            }
          }
        }
      }
    }
    
    // 请假明细样式
    .leave-section {
      .leave-table {
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
        
        table {
          width: 100%;
          border-collapse: collapse;
          
          thead {
            background: #f8fafc;
            
            th {
              padding: 12px 16px;
              text-align: left;
              font-size: 14px;
              font-weight: 600;
              color: #374151;
              border-bottom: 1px solid #e5e7eb;
            }
          }
          
          tbody {
            tr {
              transition: background-color 0.2s ease;
              
              &:hover {
                background: #f9fafb;
              }
              
              &.leave-day {
                background: #fef2f2;
                
                &:hover {
                  background: #fee2e2;
                }
              }
              
              td {
                padding: 12px 16px;
                font-size: 14px;
                color: #374151;
                border-bottom: 1px solid #f1f5f9;
                
                &:last-child {
                  border-bottom: none;
                }
              }
            }
            
            tr:last-child td {
              border-bottom: none;
            }
          }
          
          .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            
            &.work {
              background: #d1fae5;
              color: #059669;
            }
            
            &.leave {
              background: #fee2e2;
              color: #dc2626;
            }
          }
        }
        
        .no-leave {
          padding: 40px 20px;
          text-align: center;
          color: #64748b;
          
          .no-data-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 16px;
            stroke: #94a3b8;
            stroke-width: 1.5;
          }
          
          p {
            margin: 0;
            font-size: 14px;
          }
        }
      }
    }
    
    // 红色标记说明样式
    .explanation-section {
      .explanation-content {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border: 1px solid #f59e0b;
        border-radius: 12px;
        padding: 16px;
        
        .explanation-text {
          margin: 0;
          font-size: 14px;
          color: #92400e;
          line-height: 1.5;
          font-weight: 500;
        }
      }
    }
    
    // 新增：能力问卷样式
    .survey-section {
      .survey-content {
        background: #f8fafc;
        border-radius: 12px;
        padding: 20px;
        border: 1px solid #e2e8f0;
        
        .survey-status {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 16px;
          background: white;
          border-radius: 8px;
          margin-bottom: 20px;
          border: 1px solid #d1fae5;
          
          &.completed {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
          }
          
          span {
            font-size: 14px;
            font-weight: 500;
            color: #065f46;
            
            &.survey-time {
              margin-left: auto;
              font-size: 12px;
              color: #6b7280;
            }
          }
        }
        
        .capability-summary {
          h5 {
            margin: 0 0 20px 0;
            font-size: 15px;
            font-weight: 600;
            color: #1e293b;
          }

          .summary-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
            margin-bottom: 20px;

            .summary-item {
              background: white;
              border-radius: 8px;
              padding: 16px;
              border: 1px solid #e2e8f0;
              display: flex;
              flex-direction: column;
              gap: 8px;

              .label {
                font-size: 13px;
                font-weight: 600;
                color: #64748b;
              }

              .value {
                font-size: 14px;
                color: #1e293b;
                line-height: 1.5;

                .limit-hint {
                  font-size: 12px;
                  color: #94a3b8;
                  font-style: italic;
                  margin-left: 4px;
                }
              }
            }
          }

          .btn-view-full {
            width: 100%;
            padding: 12px 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s;

            &:hover {
              transform: translateY(-1px);
              box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
            }

            svg {
              flex-shrink: 0;
            }
          }
        }

        .survey-answers {
          h5 {
            margin: 0 0 16px 0;
            font-size: 15px;
            font-weight: 600;
            color: #1e293b;
          }

          .btn-collapse {
            width: 100%;
            padding: 12px 16px;
            background: #f1f5f9;
            color: #64748b;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 20px;
            transition: all 0.2s;

            &:hover {
              background: #e2e8f0;
              border-color: #cbd5e1;
            }

            svg {
              flex-shrink: 0;
            }
          }
          
          .answer-item {
            background: white;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 12px;
            border: 1px solid #e2e8f0;
            transition: all 0.2s ease;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            &:hover {
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
              border-color: #cbd5e1;
            }
            
            .question-text {
              font-size: 14px;
              color: #374151;
              margin-bottom: 12px;
              line-height: 1.5;
              
              strong {
                color: #667eea;
                margin-right: 4px;
              }
            }
            
            .answer-text {
              display: flex;
              flex-wrap: wrap;
              gap: 8px;
              
              .answer-tag {
                display: inline-block;
                padding: 6px 12px;
                border-radius: 16px;
                font-size: 13px;
                font-weight: 500;
                
                &.single {
                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                  color: white;
                }
                
                &.multiple {
                  background: #dbeafe;
                  color: #1e40af;
                  border: 1px solid #93c5fd;
                }

                &.empty {
                  background: #f3f4f6;
                  color: #9ca3af;
                  border: 1px dashed #d1d5db;
                  font-style: italic;
                }
              }
              
              .answer-scale {
                width: 100%;
                
                .scale-bar {
                  height: 32px;
                  background: #f1f5f9;
                  border-radius: 16px;
                  overflow: hidden;
                  position: relative;
                  
                  .scale-fill {
                    height: 100%;
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    padding: 0 12px;
                    transition: width 0.3s ease;
                    
                    span {
                      font-size: 13px;
                      font-weight: 600;
                      color: white;
                    }
                  }
                }
              }
            }
          }
        }
      }
      
      .survey-empty {
        padding: 60px 20px;
        text-align: center;
        color: #64748b;
        background: #f8fafc;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        
        .no-data-icon {
          width: 64px;
          height: 64px;
          margin: 0 auto 16px;
          stroke: #94a3b8;
          stroke-width: 1.5;
          opacity: 0.5;
        }
        
        p {
          margin: 0;
          font-size: 14px;
          color: #64748b;
        }
      }
    }
  }
}

// 动画效果
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

// 响应式设�?
@media (max-width: 768px) {
  .employee-detail-overlay {
    padding: 10px;
    
    .employee-detail-panel {
      max-width: 100%;
      max-height: 90vh;
      
      .panel-header {
        padding: 20px 20px 12px;
        
        .panel-title {
          font-size: 18px;
        }
      }
      
      .panel-content {
        padding: 20px;
        
        .section {
          margin-bottom: 20px;
        }
        
        .workload-section .workload-info {
          padding: 16px;
        }
        
        .leave-section .leave-table table {
          font-size: 13px;
          
          th, td {
            padding: 10px 12px;
          }
        }
      }
    }
  }
}

// 🆕 视图切换按钮栏样式
.view-toggle-bar {
  position: static;
  top: 50px; // 根据导航栏高度调整
  z-index: 99;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 16px 20px;
  margin: 20px 0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  
  .btn-toggle-view {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    
    .toggle-icon {
      font-size: 20px;
      transition: transform 0.3s ease;
    }
    
    .toggle-text {
      letter-spacing: 0.5px;
    }
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
      
      .toggle-icon {
        transform: scale(1.2) rotate(5deg);
      }
    }
    
    &:active {
      transform: translateY(0);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .view-toggle-bar {
    top: 45px;
    padding: 12px 16px;
    margin: 16px 0;
    
    .btn-toggle-view {
      padding: 10px 24px;
      font-size: 14px;
      
      .toggle-icon {
        font-size: 18px;
      }
    }
  }
}