:root {
  --project-dev-bg: rgba(13, 110, 253, 0.05);
  --project-warranty-bg: rgba(255, 193, 7, 0.05);
  --project-maintenance-bg: rgba(255, 193, 7, 0.05);
  --project-other-bg: rgba(108, 117, 125, 0.05);
  --info-color: #0dcaf0;
  --transition-speed: 0.2s;
  --transition-speed-slow: 0.3s;
  --shadow-light: 0 0 5px rgba(0, 0, 0, 0.05);
}

/* 專案類型背景色 */
.project-type-開發\/執行 {
  background-color: var(--project-dev-bg);
}

.project-type-保固 {
  background-color: var(--project-warranty-bg);
}

.project-type-維護 {
  background-color: var(--project-maintenance-bg);
}

.project-type-其他 {
  background-color: var(--project-other-bg);
}

/* 按鈕組樣式優化 */
.btn-group .btn {
  padding: 0.5rem 1rem;
  transition: all var(--transition-speed);
}

.btn-group .btn i {
  width: 16px;
  text-align: center;
}

/* 卡片效果 */
.card {
  transition: box-shadow var(--transition-speed-slow) ease;
}

/* Sprint 選擇器 */
#sprintSelect {
  min-width: 300px;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .btn-group {
    grid-template-columns: repeat(3, 1fr);
    display: grid !important;
  }

  .btn-group .btn {
    border-radius: 0.25rem !important;
    margin: 2px;
  }

  #sprintSelect {
    min-width: 100%;
  }
}

/* 時間單位切換動畫 */
.unit-toggle-container {
  position: relative;
}

.hours-display,
.man-days-display {
  transition: opacity var(--transition-speed) ease;
}

/* 切換選擇器的樣式優化 */
.btn-check:checked + .btn-outline-info {
  background-color: rgba(13, 202, 240, 0.1);
  border-color: var(--info-color);
  color: var(--info-color);
  font-weight: 500;
}

/* 工時顯示單位按鈕組 */
.btn-group[aria-label="工時顯示單位"] {
  box-shadow: var(--shadow-light);
  border-radius: 0.375rem;
}

/* 改善焦點可見性 */
.form-select:focus,
.form-control:focus,
.btn:focus {
  outline: 2px solid var(--info-color);
  outline-offset: 2px;
}