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

@use '../../../shared/styles/ios-theme' as ios;
@use '../ios-theme.scss' as local;

:host {
  display: block;
  background-color: ios.$ios-background-secondary;
  min-height: 100vh;
  padding: ios.$ios-spacing-lg;
}

.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-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-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%, darken(local.$ios-primary-light, 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;
              
              &.more {
                background: #94a3b8;
              }
            }
          }
        }
      }
    }
    
    // 霂瑕��𡒊��瑕�
    .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;
          }
        }
      }
    }
  }
}