/**
 * 工具类库 (Utilities)
 * 任務管理系統 - 现代化CSS重构
 *
 * 包含各种实用工具类
 * 用于快速构建界面，补充组件样式
 */

/* ========================================
   文本工具类
   ======================================== */

/* 文本对齐 */
.text-left { text-align: start; }
.text-center { text-align: center; }
.text-right { text-align: end; }
.text-justify { text-align: justify; }

/* 文本大小 */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

/* 文本颜色 */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-inverse { color: var(--text-inverse); }
.text-accent { color: var(--color-primary-500); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

/* 文本粗细 */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* 文本样式 */
.italic { font-style: italic; }
.not-italic { font-style: normal; }
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* 文本转换 */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* 文本截断 */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 空白处理 */
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* ========================================
   背景工具类
   ======================================== */

.bg-primary { background-color: var(--surface-primary); }
.bg-secondary { background-color: var(--surface-secondary); }
.bg-tertiary { background-color: var(--surface-tertiary); }
.bg-accent { background-color: var(--color-primary-500); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-error { background-color: var(--color-error); }
.bg-transparent { background-color: transparent; }

/* ========================================
   边框工具类
   ======================================== */

.border { border: 1px solid var(--border-primary); }
.border-0 { border: none; }
.border-t { border-block-start: 1px solid var(--border-primary); }
.border-b { border-block-end: 1px solid var(--border-primary); }
.border-l { border-inline-start: 1px solid var(--border-primary); }
.border-r { border-inline-end: 1px solid var(--border-primary); }

/* 边框颜色 */
.border-primary { border-color: var(--border-primary); }
.border-secondary { border-color: var(--border-secondary); }
.border-accent { border-color: var(--color-primary-500); }
.border-transparent { border-color: transparent; }

/* 边框圆角 */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ========================================
   阴影工具类
   ======================================== */

.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ========================================
   显示工具类
   ======================================== */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

/* ========================================
   定位工具类
   ======================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Inset工具类（使用逻辑属性） */
.inset-0 { inset: 0; }
.top-0 { inset-block-start: 0; }
.bottom-0 { inset-block-end: 0; }
.left-0 { inset-inline-start: 0; }
.right-0 { inset-inline-end: 0; }

/* ========================================
   尺寸工具类
   ======================================== */

/* 宽度 */
.w-full { inline-size: 100%; }
.w-auto { inline-size: auto; }
.w-fit { inline-size: fit-content; }
.w-screen { inline-size: 100vw; }

/* 高度 */
.h-full { block-size: 100%; }
.h-auto { block-size: auto; }
.h-screen { block-size: 100dvh; }

/* 最小/最大宽度 */
.min-w-0 { min-inline-size: 0; }
.max-w-full { max-inline-size: 100%; }
.max-w-screen { max-inline-size: 100vw; }

/* 最小/最大高度 */
.min-h-0 { min-block-size: 0; }
.min-h-screen { min-block-size: 100dvh; }
.max-h-full { max-block-size: 100%; }
.max-h-screen { max-block-size: 100dvh; }

/* ========================================
   Flexbox工具类 (补充)
   ======================================== */

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

.flex-shrink-0 { flex-shrink: 0; }
.flex-grow { flex-grow: 1; }
.flex-grow-0 { flex-grow: 0; }

/* ========================================
   Grid工具类 (补充)
   ======================================== */

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-full { grid-column: 1 / -1; }

.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-full { grid-row: 1 / -1; }

/* ========================================
   透明度工具类
   ======================================== */

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ========================================
   光标工具类
   ======================================== */

.cursor-auto { cursor: auto; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-move { cursor: move; }

/* ========================================
   用户选择工具类
   ======================================== */

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* ========================================
   指针事件工具类
   ======================================== */

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ========================================
   Z-index工具类
   ======================================== */

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-modal { z-index: var(--z-modal); }
.z-tooltip { z-index: var(--z-tooltip); }

/* ========================================
   过渡动画工具类
   ======================================== */

.transition-none { transition: none; }

.transition-all {
  transition-property: all;
  transition-timing-function: var(--ease-in-out);
  transition-duration: var(--duration-fast);
}

.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--duration-fast);
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--duration-fast);
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--duration-fast);
}

/* 动画时长 */
.duration-fast { transition-duration: var(--duration-fast); }
.duration-normal { transition-duration: var(--duration-normal); }
.duration-slow { transition-duration: var(--duration-slow); }

/* 缓动函数 */
.ease-in { transition-timing-function: var(--ease-in); }
.ease-out { transition-timing-function: var(--ease-out); }
.ease-in-out { transition-timing-function: var(--ease-in-out); }

/* ========================================
   变换工具类
   ======================================== */

.scale-0 { transform: scale(0); }
.scale-50 { transform: scale(0.5); }
.scale-100 { transform: scale(1); }
.scale-110 { transform: scale(1.1); }

.rotate-0 { transform: rotate(0deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

.translate-x-0 { transform: translateX(0); }
.translate-y-0 { transform: translateY(0); }

.-translate-y-1 { transform: translateY(-0.25rem); }
.-translate-y-2 { transform: translateY(-0.5rem); }

/* ========================================
   滤镜工具类
   ======================================== */

.blur-none { filter: blur(0); }
.blur-sm { filter: blur(4px); }
.blur { filter: blur(8px); }
.blur-lg { filter: blur(16px); }

.brightness-50 { filter: brightness(0.5); }
.brightness-100 { filter: brightness(1); }
.brightness-150 { filter: brightness(1.5); }

.grayscale { filter: grayscale(100%); }
.grayscale-0 { filter: grayscale(0); }

/* ========================================
   性能优化工具类
   ======================================== */

.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.contain-strict {
  contain: strict;
}

.contain-layout {
  contain: layout;
}

.contain-paint {
  contain: paint;
}

/* GPU加速 */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ========================================
   交互状态工具类
   ======================================== */

.hover\:scale-105:hover {
  transform: scale(1.05);
}

.hover\:shadow-lg:hover {
  box-shadow: var(--shadow-lg);
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.active\:scale-95:active {
  transform: scale(0.95);
}

.focus\:ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(from var(--color-primary-500) l c h / 0.3);
}

/* ========================================
   暗色模式工具类
   ======================================== */

@media (prefers-color-scheme: dark) {
  .dark\:text-primary { color: var(--text-primary); }
  .dark\:bg-primary { background-color: var(--surface-primary); }
  .dark\:border-primary { border-color: var(--border-primary); }
}

.dark .dark\:text-primary { color: var(--text-primary); }
.dark .dark\:bg-primary { background-color: var(--surface-primary); }
.dark .dark\:border-primary { border-color: var(--border-primary); }

/* ========================================
   无障碍工具类
   ======================================== */

/* 焦点可见性 */
.focus-visible\:ring:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:transition-none {
    transition: none;
  }

  .motion-reduce\:animate-none {
    animation: none;
  }
}

/* ========================================
   打印工具类
   ======================================== */

@media print {
  .print\:hidden {
    display: none;
  }

  .print\:block {
    display: block;
  }
}

/* ========================================
   自定义动画
   ======================================== */

/* 旋转动画 - 用于刷新按钮 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 脉冲动画 - 用于加载状态 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 动画工具类 */
.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}