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';

/* 顶部导航栏样式 */
.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: 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;
}

.todo-list {
  .todo-item {
    padding: local.$ios-spacing-lg;
    border-radius: local.$ios-radius-md;
    margin-bottom: local.$ios-spacing-md;
    background-color: local.$ios-background;
    border: 1px solid local.$ios-border;
    transition: local.$ios-feedback-hover;
    
    &:last-child { margin-bottom: 0; }
    
    &.priority-high { border-left: 4px solid local.$ios-danger; }
    &.priority-medium { border-left: 4px solid local.$ios-warning; }
    &.priority-low { border-left: 4px solid local.$ios-info; }
    
    &:hover { transform: translateY(-1px); box-shadow: local.$ios-shadow-sm; }
    
    .todo-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: local.$ios-spacing-md;
      
      h3 {
        font-size: local.$ios-font-size-base;
        font-weight: local.$ios-font-weight-medium;
        color: local.$ios-text-primary;
        margin: 0;
      }
      
      .task-priority {
        font-size: local.$ios-font-size-xs;
        padding: local.$ios-spacing-xs local.$ios-spacing-sm;
        border-radius: local.$ios-radius-full;
        font-weight: local.$ios-font-weight-medium;
      }
    }
    
    .todo-info {
      margin-bottom: local.$ios-spacing-md;
      
      p {
        margin: 0 0 local.$ios-spacing-xs 0;
        font-size: local.$ios-font-size-sm;
        color: local.$ios-text-secondary;
      }
      
      .task-deadline { font-size: local.$ios-font-size-xs; color: local.$ios-text-tertiary; }
    }
    
    .todo-actions {
      .btn-handle {
        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; }
      }
    }
  }
}

/* 超期提醒样式 */
.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;
          font-size: 16px;
          font-weight: 600;
          color: #1e293b;
        }
      }
    }
    
    // 负载概况样式
    .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;
        }
      }
    }
  }
}

// 动画效果
@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;
          }
        }
      }
    }
  }
}