/* ==================== 易算AI - 工具类系统 ==================== */
/* 版本: 2.0.0 | 用途: 常用CSS工具类，快速构建界面 */
/* 依赖: 01-design-tokens.css */

/* ==================== 文本工具类 ==================== */
/* 文本对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

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

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

/* 文本颜色 */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-white { color: var(--text-white); }
.text-link { color: var(--text-link); }
.text-disabled { color: var(--text-disabled); }

/* 功能色文本 */
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }

/* 品牌色文本 */
.text-brand { color: var(--primary); }
.text-brand-hover:hover { color: var(--primary-hover); }

/* 文本装饰 */
.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;
}

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

/* 文本换行 */
.break-normal { overflow-wrap: normal; word-break: normal; }
.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* ==================== 显示工具类 ==================== */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.table { display: table; }
.table-cell { display: table-cell; }
.table-row { display: table-row; }
.hidden { display: none; }

/* ==================== 可见性工具类 ==================== */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.collapse { visibility: collapse; }

/* ==================== 透明度工具类 ==================== */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ==================== 指针事件 ==================== */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ==================== 用户选择 ==================== */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* ==================== 圆角工具类 ==================== */
.rounded-none { border-radius: var(--radius-none); }
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { 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-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

/* 单侧圆角 */
.rounded-t-lg { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.rounded-b-lg { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.rounded-l-lg { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.rounded-r-lg { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }

/* ==================== 边框工具类 ==================== */
.border { border: 1px solid var(--border); }
.border-0 { border: 0; }
.border-2 { border: 2px solid var(--border); }
.border-4 { border: 4px solid var(--border); }

/* 边框颜色 */
.border-primary { border-color: var(--primary); }
.border-success { border-color: var(--success); }
.border-warning { border-color: var(--warning); }
.border-error { border-color: var(--error); }
.border-gray { border-color: var(--gray-200); }
.border-transparent { border-color: transparent; }

/* 单侧边框 */
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-l { border-left: 1px solid var(--border); }
.border-r { border-right: 1px solid var(--border); }

/* ==================== 背景工具类 ==================== */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: var(--bg-card); }
.bg-primary { background-color: var(--primary); }
.bg-primary-light { background-color: var(--primary-light); }
.bg-success { background-color: var(--success); }
.bg-success-light { background-color: var(--success-light); }
.bg-warning { background-color: var(--warning); }
.bg-warning-light { background-color: var(--warning-light); }
.bg-error { background-color: var(--error); }
.bg-error-light { background-color: var(--error-light); }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }

/* 渐变背景 */
.bg-gradient-primary { background: var(--primary-gradient); }
.bg-gradient-success { background: var(--success-gradient); }
.bg-gradient-page { background: var(--bg-page); }

/* ==================== 阴影工具类 ==================== */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }
.shadow-none { box-shadow: none; }

/* 功能色阴影 */
.shadow-primary { box-shadow: var(--shadow-focus); }
.shadow-success { box-shadow: var(--shadow-success); }
.shadow-error { box-shadow: var(--shadow-error); }

/* ==================== 动画工具类 ==================== */
/* 淡入 */
.animate-fade-in {
    animation: fadeIn var(--transition-normal);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 淡入上移 */
.animate-fade-in-up {
    animation: fadeInUp var(--transition-normal);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 淡入下移 */
.animate-fade-in-down {
    animation: fadeInDown var(--transition-normal);
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 滑入右侧 */
.animate-slide-in-right {
    animation: slideInRight var(--transition-normal);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 弹跳 */
.animate-bounce {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* 旋转 */
.animate-spin {
    animation: spin 1s linear infinite;
}

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

/* 动画延迟 */
.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-500 { animation-delay: 500ms; }

/* ==================== 响应式工具类 ==================== */
/* 手机端 (<768px) */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
    .flex-mobile { display: flex !important; }
    .text-center-mobile { text-align: center !important; }
    .w-full-mobile { width: 100% !important; }
    .p-mobile { padding: var(--spacing-lg) !important; }
}

/* 平板端 (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet { display: none !important; }
    .show-tablet { display: block !important; }
}

/* 桌面端 (>=1024px) */
@media (min-width: 1024px) {
    .hide-desktop { display: none !important; }
    .show-desktop { display: block !important; }
}

/* 小屏隐藏 (<768px) */
@media (max-width: 767px) {
    .hide-sm { display: none !important; }
}

/* 中屏隐藏 (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-md { display: none !important; }
}

/* 大屏隐藏 (>=1024px) */
@media (min-width: 1024px) {
    .hide-lg { display: none !important; }
}

/* ==================== 打印工具类 ==================== */
@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
}