/**
 * Semi Design + Tailwind CSS 4.x 整合配置
 * 利用 Tailwind 4.x 原生 CSS 配置特性
 * 将 Semi Design 配色系统注入到 Tailwind
 */

/* ========== Tailwind 4.x 主题配置 ========== */
@theme {
    /* Semi Design 主题色 */
    --color-primary: #3370FF;
    --color-primary-hover: #4080FF;
    --color-primary-active: #2B5DD1;
    --color-success: #00B42A;
    --color-warning: #FF7D00;
    --color-danger: #F53F3F;
    --color-info: #3370FF;

    /* 背景色 */
    --color-bg-0: #FFFFFF;
    --color-bg-1: #F7F8FA;
    --color-bg-2: #F2F3F5;
    --color-bg-3: #E5E6EB;

    /* 文字色 */
    --color-text-0: #1F2329;
    --color-text-1: #4E5969;
    --color-text-2: #86909C;
    --color-text-3: #C9CDD4;

    /* 边框色 */
    --color-border: #E5E6EB;
    --color-border-light: #F2F3F5;

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* 间距 */
    --spacing-tight: 8px;
    --spacing-base: 12px;
    --spacing-loose: 16px;
    --spacing-xl: 24px;

    /* 字体 */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* ========== Semi Design CSS 变量（兼容性）========== */
:root {
    /* 主题色 */
    --semi-color-primary: var(--color-primary);
    --semi-color-primary-hover: var(--color-primary-hover);
    --semi-color-primary-active: var(--color-primary-active);
    --semi-color-success: var(--color-success);
    --semi-color-warning: var(--color-warning);
    --semi-color-danger: var(--color-danger);
    --semi-color-info: var(--color-info);

    /* 背景色 */
    --semi-color-bg-0: var(--color-bg-0);
    --semi-color-bg-1: var(--color-bg-1);
    --semi-color-bg-2: var(--color-bg-2);
    --semi-color-bg-3: var(--color-bg-3);

    /* 文字色 */
    --semi-color-text-0: var(--color-text-0);
    --semi-color-text-1: var(--color-text-1);
    --semi-color-text-2: var(--color-text-2);
    --semi-color-text-3: var(--color-text-3);

    /* 边框色 */
    --semi-color-border: var(--color-border);
    --semi-color-border-light: var(--color-border-light);

    /* 阴影 */
    --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1);
    --semi-shadow-card: 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.08);
    --semi-shadow-hover: 0 0 1px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.15);

    /* 圆角 */
    --semi-border-radius-small: var(--radius-sm);
    --semi-border-radius-medium: var(--radius-md);
    --semi-border-radius-large: var(--radius-lg);

    /* 间距 */
    --semi-spacing-tight: var(--spacing-tight);
    --semi-spacing-base: var(--spacing-base);
    --semi-spacing-loose: var(--spacing-loose);
    --semi-spacing-extra-loose: var(--spacing-xl);

    /* 过渡动画 */
    --semi-transition-duration: 0.2s;
    --semi-transition-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== Semi Design 配色变量 ========== */
:root {
    /* NewAPI/OneAPI 风格变量（兼容旧代码）- 这些是暴露给 HTML 使用的 */
    --color-primary: #3370FF;
    --color-primary-hover: #4080FF;
    --color-primary-active: #2B5DD1;
    --color-bg-page: #F7F8FA;
    --color-bg-hover: #F2F3F5;
    --color-bg-0: #FFFFFF;
    --color-bg-1: #F7F8FA;
    --color-bg-2: #F2F3F5;
    --color-bg-3: #E5E6EB;
    --color-border-default: #E5E6EB;
    --color-border: #E5E6EB;
    --color-border-light: #F2F3F5;
    --color-text-0: #1F2329;
    --color-text-1: #4E5969;
    --color-text-2: #86909C;
    --color-text-3: #C9CDD4;
    --color-success: #00B42A;
    --color-warning: #FF7D00;
    --color-danger: #F53F3F;
    --color-info: #3370FF;

    /* 主题色 */
    --semi-color-primary: #3370FF;
    --semi-color-primary-hover: #4080FF;
    --semi-color-primary-active: #2B5DD1;
    --semi-color-success: #00B42A;
    --semi-color-warning: #FF7D00;
    --semi-color-danger: #F53F3F;
    --semi-color-info: #3370FF;

    /* 背景色 */
    --semi-color-bg-0: #FFFFFF;
    --semi-color-bg-1: #F7F8FA;
    --semi-color-bg-2: #F2F3F5;
    --semi-color-bg-3: #E5E6EB;

    /* 文字色 */
    --semi-color-text-0: #1F2329;
    --semi-color-text-1: #4E5969;
    --semi-color-text-2: #86909C;
    --semi-color-text-3: #C9CDD4;

    /* 边框色 */
    --semi-color-border: #E5E6EB;
    --semi-color-border-light: #F2F3F5;

    /* 表格边框色（浅色模式）*/
    --semi-table-border: #e5e7eb;

    /* 阴影 */
    --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1);
    --semi-shadow-card: 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.08);
    --semi-shadow-hover: 0 0 1px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.15);

    /* 圆角 */
    --semi-border-radius-small: 4px;
    --semi-border-radius-medium: 6px;
    --semi-border-radius-large: 8px;

    /* 间距 */
    --semi-spacing-tight: 8px;
    --semi-spacing-base: 12px;
    --semi-spacing-loose: 16px;
    --semi-spacing-extra-loose: 24px;

    /* 过渡动画 */
    --semi-transition-duration: 0.2s;
    --semi-transition-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== 深色模式变量 ========== */
[data-theme='dark'],
.dark {
    /* NewAPI/OneAPI 风格变量（深色模式）*/
    --color-bg-page: #111827;
    --color-bg-hover: #1f2937;
    --color-bg-0: #1f2937;
    --color-bg-1: #111827;
    --color-bg-2: #0f1419;
    --color-bg-3: #0a0c0f;
    --color-border-default: #374151;
    --color-border: #374151;
    --color-border-light: #1f2937;
    --color-text-0: #ffffff;
    --color-text-1: #e5e7eb;
    --color-text-2: #9ca3af;
    --color-text-3: #6b7280;

    /* 边框色（深色模式）*/
    --semi-color-border: #374151;
    --semi-color-border-light: #1f2937;

    /* 表格边框色（深色模式 - 更淡）*/
    --semi-table-border: #1f2937;
}

/* ========== 全局样式重置 ========== */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    color: var(--semi-color-text-0);
    background-color: var(--semi-color-bg-1);
}

/* ========== 自定义工具类（扩展 Tailwind）========== */

/* Semi Design 背景色 */
.bg-semi-primary {
    background-color: var(--semi-color-primary) !important;
}

.bg-semi-success {
    background-color: var(--semi-color-success) !important;
}

.bg-semi-warning {
    background-color: var(--semi-color-warning) !important;
}

.bg-semi-danger {
    background-color: var(--semi-color-danger) !important;
}

.bg-semi-0 {
    background-color: var(--semi-color-bg-0) !important;
}

.bg-semi-1 {
    background-color: var(--semi-color-bg-1) !important;
}

.bg-semi-2 {
    background-color: var(--semi-color-bg-2) !important;
}

/* Semi Design 文字色 */
.text-semi-primary {
    color: var(--semi-color-primary) !important;
}

.text-semi-success {
    color: var(--semi-color-success) !important;
}

.text-semi-warning {
    color: var(--semi-color-warning) !important;
}

.text-semi-danger {
    color: var(--semi-color-danger) !important;
}

.text-semi-0 {
    color: var(--semi-color-text-0) !important;
}

.text-semi-1 {
    color: var(--semi-color-text-1) !important;
}

.text-semi-2 {
    color: var(--semi-color-text-2) !important;
}

/* Semi Design 边框色 */
.border-semi {
    border-color: var(--semi-color-border) !important;
}

.border-semi-light {
    border-color: var(--semi-color-border-light) !important;
}

/* Semi Design 阴影 */
.shadow-semi-card {
    box-shadow: var(--semi-shadow-card) !important;
}

.shadow-semi-elevated {
    box-shadow: var(--semi-shadow-elevated) !important;
}

.shadow-semi-hover {
    box-shadow: var(--semi-shadow-hover) !important;
}

/* Semi Design 圆角 */
.rounded-semi-sm {
    border-radius: var(--semi-border-radius-small) !important;
}

.rounded-semi-md {
    border-radius: var(--semi-border-radius-medium) !important;
}

.rounded-semi-lg {
    border-radius: var(--semi-border-radius-large) !important;
}

/* ========== 按钮组件（兼容原有 .btn 类）========== */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-semi-md transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    background-color: var(--semi-color-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--semi-color-primary-hover);
}

.btn-success {
    background-color: var(--semi-color-success);
    color: white;
}

.btn-success:hover {
    opacity: 0.9;
}

.btn-warning {
    background-color: var(--semi-color-warning);
    color: white;
}

.btn-danger {
    background-color: var(--semi-color-danger);
    color: white;
}

.btn-default {
    background-color: white;
    color: var(--semi-color-text-0);
    border: 1px solid var(--semi-color-border);
}

.btn-default:hover {
    background-color: var(--semi-color-bg-1);
}

.btn-info {
    background-color: var(--semi-color-info);
    color: white;
}

.btn-xs {
    @apply px-2 py-1 text-xs;
}

.btn-sm {
    @apply px-3 py-1.5 text-sm;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

/* 按钮组 */
.btn-group {
    @apply inline-flex rounded-semi-md shadow-semi-card;
}

.btn-group .btn {
    @apply rounded-none;
}

.btn-group .btn:first-child {
    @apply rounded-l-semi-md;
}

.btn-group .btn:last-child {
    @apply rounded-r-semi-md;
}

/* ========== 模态框（兼容原有 Bootstrap Modal）========== */
.modal {
    @apply fixed inset-0 z-50 overflow-auto;
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    @apply relative w-full max-w-lg mx-4;
}

.modal-content {
    @apply bg-white rounded-semi-lg overflow-hidden;
    box-shadow: var(--semi-shadow-elevated);
}

.modal-header {
    @apply px-6 py-4 border-b;
    border-color: var(--semi-color-border);
}

.modal-title {
    @apply text-lg font-semibold;
    color: var(--semi-color-text-0);
}

.modal-body {
    @apply px-6 py-4;
}

.modal-footer {
    @apply px-6 py-4 border-t flex justify-end gap-2;
    border-color: var(--semi-color-border);
}

.close {
    @apply absolute top-4 right-4 text-2xl leading-none cursor-pointer;
    color: var(--semi-color-text-2);
    background: transparent;
    border: none;
}

.close:hover {
    color: var(--semi-color-text-0);
}

/* ========== 表单组件 ========== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
    @apply w-full px-3 py-2 border rounded-semi-md transition-all;
    border-color: var(--semi-color-border);
    color: var(--semi-color-text-0);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--semi-color-primary);
    box-shadow: 0 0 0 3px rgba(51, 112, 255, 0.1);
}

input::placeholder,
textarea::placeholder {
    color: var(--semi-color-text-3);
}

/* ========== 表格组件 ========== */
table {
    @apply w-full border-collapse;
}

table thead tr {
    background-color: var(--semi-color-bg-2);
}

table th {
    @apply px-4 py-3 text-left text-sm font-semibold;
    color: var(--semi-color-text-0);
    border-bottom: 1px solid var(--semi-table-border);
}

table td {
    @apply px-4 py-3 text-sm;
    color: var(--semi-color-text-1);
    border-bottom: 1px solid var(--semi-table-border);
}

table tbody tr:hover {
    background-color: var(--semi-color-bg-1);
}

/* ========== 工具类 ========== */
.color-red {
    color: var(--semi-color-danger) !important;
}

.text-center {
    text-align: center !important;
}

.margin-top-20 {
    margin-top: 20px !important;
}

/* ========== 动画 ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.animate-slideDown {
    animation: slideDown 0.3s ease;
}

.animate-slideUp {
    animation: slideUp 0.3s ease;
}

/* ========== 从 uniapi-design-system.css 合并的样式 ========== */

/* Glassmorphism 效果 */
.glass-effect {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* 渐变文字效果 */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(135deg, var(--semi-color-primary), #6366f1);
}

/* 自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--semi-color-text-3);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--semi-color-text-2);
}

/* 导航项样式 */
.nav-item {
    position: relative;
    color: var(--semi-color-text-1);
    border-radius: var(--semi-border-radius-medium);
    transition: var(--semi-transition-duration) var(--semi-transition-function);
    font-size: 0.9rem;
    font-weight: 500;
}

.nav-item:hover {
    background-color: var(--semi-color-bg-1);
    color: var(--semi-color-text-0);
}

/* Active State */
.nav-item.active {
    background: linear-gradient(90deg, rgba(51, 112, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    color: var(--semi-color-primary);
    font-weight: 600;
    border-left: 3px solid var(--semi-color-primary);
    border-radius: 0 var(--semi-border-radius-medium) var(--semi-border-radius-medium) 0;
}

.nav-item i {
    transition: transform 0.2s ease;
}

.nav-item:hover i {
    transform: translateX(2px);
}

/* Header 样式 */
.header-wrapper {
    background-color: var(--semi-color-bg-0);
    border-bottom: 1px solid var(--semi-color-border);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Semi Design 风格的输入框 */
.semi-input {
    background: transparent;
    border: 1px solid var(--semi-color-border);
    border-radius: var(--semi-border-radius-small);
    color: var(--semi-color-text-0);
    transition: all 0.2s;
}

.semi-input:focus {
    border-color: var(--semi-color-primary);
    box-shadow: 0 0 0 3px rgba(51, 112, 255, 0.1);
    outline: none;
}