:root {
    /* 颜色变量 - 浅色模式 */
    --k8-primary-color: #1366EC;
    --k8-primary-light: #F1F8FF;
    --k8-primary-dark: #0759B6;
    --k8-primary-hover: #2286F3;
    --gradient-primary: linear-gradient(90deg, #9FCCFA, #44A1FF, #1366EC);
    --k8-secondary-color: #F2F3F5;
    --k8-secondary-hover: #E5E6EB;
    --k8-text-color-white: #ffffff;
    --k8-text-color-black: #000000;
    --k8-bg-color: #ffffff;
    --k8-border-color: #D0D1D3;
    --k8-gray-color: #D0D1D3;
    --k8-normal-color: #1366EC;
    --k8-success-color: #00b42a;
    --k8-warning-color: #ff7d00;
    --k8-danger-color: #f53f3f;
    --k8-info-color: #165DFF;
    /* 滚动条变量 */
    --k8-scrollbar-width: 8px;
    --k8-scrollbar-track-color: var(--k8-secondary-color);
    --k8-scrollbar-thumb-color: var(--k8-gray-color);
    --k8-scrollbar-thumb-hover-color: var(--k8-secondary-hover);
    /* 字体变量 */
    --k8-font-family: Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
    --k8-font-size: 14px;
}

/* 深色模式颜色变量 */
[data-theme="dark"] {
    --k8-secondary-color: #2A2C2E;
    --k8-secondary-hover: #3E4043;
    --k8-text-color-white: #ffffff;
    --k8-text-color-black: #E5E6EB;
    --k8-bg-color: #17171A;
    --k8-border-color: #424548;
    --k8-gray-color: #424548;
    --k8-normal-color: #4080FF;
    --k8-success-color: #00B42A;
    --k8-warning-color: #FF7D00;
    --k8-danger-color: #F53F3F;
    --k8-info-color: #4080FF;
    /* 深色模式滚动条变量会自动继承上面定义的变量，无需重新定义 */
    --k8-primary-hover: color-mix(in srgb, var(--k8-primary-color) 80%, transparent);
    --k8-primary-light: color-mix(in srgb, var(--k8-primary-color) 15%, transparent);
}

html {
    background-color: var(--k8-bg-color);
    color: var(--k8-text-color-black);
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    /* 全局字体设置 */
    font-size: var(--k8-font-size);
    font-family: var(--k8-font-family);
    margin: 0;
    background-color: var(--k8-bg-color);
    color: var(--k8-text-color-black);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.k8-main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 25px;
    width: 100%;
    box-sizing: border-box;
}

.button-demo {
    /* 按钮演示容器 */
    display: flex;
    gap: 10px;
}

/* 主要按钮样式 */
.k8-primary-button {
    background-color: var(--k8-primary-color);
    color: var(--k8-text-color-white);
    border: none;
    height: 32px;
    padding: 0px 15px;
    cursor: pointer;
}
.k8-primary-button:hover {
    background-color: var(--k8-primary-hover);
}
.k8-primary-button:active {
    background-color: var(--k8-primary-dark);
}

/* 次要按钮样式 */
.k8-secondary-button {
    background-color: var(--k8-secondary-color);
    color: var(--k8-text-color-black);
    border: none;
    height: 32px;
    padding: 0px 15px;
    cursor: pointer;
}
.k8-secondary-button:hover {
    background-color: var(--k8-secondary-hover);
}
.k8-secondary-button:active {
    background-color: var(--k8-gray-color);
}

/* 虚线按钮样式 */
.k8-dashed-button {
    border: 2px dashed var(--k8-border-color);
    background-color: transparent;
    color: var(--k8-text-color-black);
    height: 32px;
    padding: 0px 15px;
    cursor: pointer;
}
.k8-dashed-button:hover {
    background-color: var(--k8-secondary-color);
    color: var(--k8-text-color-black);
}
.k8-dashed-button:active {
    background-color: var(--k8-gray-color);
    color: var(--k8-text-color-black);
}

/* 线形按钮样式 */
.k8-outline-button {
    border: 2px solid var(--k8-primary-color);
    background-color: transparent;
    color: var(--k8-primary-color);
    height: 32px;
    padding: 0px 15px;
    cursor: pointer;
}

.k8-outline-button:active {
    color: var(--k8-primary-dark);
}

/* 文本按钮样式 */
.k8-text-button {
    background-color: transparent;
    color: var(--k8-primary-color);
    border: none;
    height: 32px;
    padding: 0px 15px;
    cursor: pointer;
}
.k8-text-button:hover {
    background-color: var(--k8-secondary-hover);
    color: var(--k8-primary-color);
}
.k8-text-button:active {
    background-color: var(--k8-gray-color);
    color: var(--k8-primary-color);
}

/* 链接样式 */
.k8-link {
    color: var(--k8-primary-color);
    text-decoration: none;
    background-color: transparent;
}
.k8-link:hover {
    text-decoration: none;
    background-color: transparent;
    color: var(--k8-primary-hover);
}

/* 背景链接样式 */
.k8-link-background {
    background-color: transparent;
    color: var(--k8-primary-color);
    border: none;
    text-decoration: none;
    height: 32px;
    padding: 1px 5px;
    cursor: pointer;
}
.k8-link-background:hover {
    background-color: var(--k8-secondary-hover);
    color: var(--k8-primary-color);
}
.k8-link-background:active {
    background-color: var(--k8-gray-color);
    color: var(--k8-primary-color);
}

/* 进度条样式 */
.k8-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background-color: var(--k8-primary-color);
    width: 0;
    transition: width 0.2s ease;
    z-index: 9999;
    box-shadow: 0 0 4px var(--k8-primary-color);
}

/* 分割线样式 */
.k8-solid-divider {
    border: none;
    height: 1px;
    background-color: var(--k8-border-color);
    margin: 20px 0;
}
.k8-dashed-divider {
    border: none;
    height: 1px;
    border-top: 2px dashed var(--k8-border-color);
    margin: 20px 0;
}
.k8-text-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    flex: 1;
}
.k8-text-divider::before,
.k8-text-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--k8-border-color);
}
.k8-text-divider span {
    padding: 0 10px; /* 文字两侧的间距 */
    color: var(--k8-border-color);
}
.k8-vertical-divider {
    width: 1px;
    height: 20px; /* 竖直分割线的高度 */
    background-color: var(--k8-border-color);
}

/* 头像样式 */
.k8-avatar {
    width: 100px; /* 头像宽度 */
    height: 100px; /* 头像高度 */
    overflow: hidden; /* 超出部分隐藏 */
    margin: 10px 0; /* 上下间距 */
}
.k8-avatar img {
    width: 100%; /* 图片宽度 */
    height: 100%; /* 图片高度 */
    object-fit: cover; /* 保持图片比例 */
}
.k8-avatar-circle {
    border-radius: 50%; /* 圆形 */
}
.k8-avatar-square {
    border-radius: 0; /* 方形 */
}

/* 头像容器样式 */
.k8-avatar-container {
    display: flex; /* 使用 flexbox 布局 */
    gap: 20px; /* 头像之间的间距 */
    align-items: center; /* 垂直居中对齐 */
}
.k8-avatar-item {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
}

/* 文字头像样式 */
.k8-text-avatar {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-size: 50px; /* 默认字体大小 */
    color: var(--k8-text-color-white); /* 文字颜色 */
    background-color: var(--k8-primary-color); /* 背景颜色 */
    width: 100px; /* 确保宽度为100px */
    height: 100px; /* 确保高度为100px */
}

.k8-text-avatar span {
    display: block;
    width: 100%; /* 文字宽度 */
    height: 100%; /* 文字高度 */
    text-align: center; /* 文字居中 */
    line-height: 100px; /* 行高与头像高度一致 */
}

.k8-card {
    padding: 18px;
    background: var(--k8-bg-color);
    border: 1px solid var(--k8-border-color);
}

.k8-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--k8-text-color);
    margin: 0;
    position: relative;
    padding-left: 12px;
    margin-bottom: 15px;
}

.k8-card-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: var(--k8-primary-color);
}


.k8-card-content {
    display: flex;
    flex-direction: column;
}

.k8-table {
    width: 100%; /* 表格宽度 */
    border-collapse: collapse; /* 合并边框 */
    margin: 20px 0; /* 上下间距 */
    font-size: 12px;
    border: 1px solid var(--k8-border-color); /* 添加外边框 */
}

.k8-table th, .k8-table td {
    border: none; /* 去掉内竖线 */
    padding: 10px; /* 内边距 */
    text-align: left; /* 左对齐 */
}

.k8-table th {
    background-color: var(--k8-secondary-color); /* 表头背景颜色设置为灰色 */
    color: var(--k8-text-color-black); /* 表头文字颜色 */
}

.k8-table tr:hover {
    background-color: var(--k8-secondary-color); /* 行悬停背景颜色 */
}

.k8-table tr {
    border-bottom: 1px solid var(--k8-border-color); /* 添加行底部边框 */
}

.k8-tabs {
    position: relative;
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.k8-tabs::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: var(--tab-offset, 0);
    width: var(--tab-width, 0);
    height: 2px;
    background-color: var(--k8-primary-color);
    transition: all 0.3s ease;
}

.k8-tab-button {
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    color: var(--k8-text-color-black);
    cursor: pointer;
    transition: color 0.3s ease;
}

.k8-tab-button:hover {
    color: var(--k8-primary-color);
}

.k8-tab-button.active {
    color: var(--k8-primary-color);
}

.k8-tab-content {
    display: none;
}

.k8-tab-content.active {
    display: block;
}

.k8-input {
    width: 100%; /* 输入框宽度 */
    padding: 4px 10px; /* 内边距 */
    border: 1px solid transparent; /* 使用透明边框保持高度一致 */
    background-color: var(--k8-secondary-color); /* 背景色 */
    color: var(--k8-text-color-black); /* 文字颜色 */
    font-size: var(--k8-font-size); /* 字体大小 */
    transition: border-color 0.3s, background-color 0.3s, color 0.3s; /* 边框、背景和文字颜色过渡 */
    line-height: 1.5;
    box-sizing: border-box;
}

/* 带图标的输入框容器 */
.k8-input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    width: 100%;
}

/* 前缀图标样式 */
.k8-input-prefix-icon {
    position: absolute;
    left: 10px;
    color: var(--k8-text-color-black);
    font-size: 16px;
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* 后缀图标样式 */
.k8-input-suffix-icon {
    position: absolute;
    right: 10px;
    color: var(--k8-text-color-black);
    font-size: 16px;
    opacity: 0.6;
    transition: opacity 0.3s;
    cursor: pointer;
}

/* 警告状态图标 */
.k8-input-suffix-icon.warning {
    color: var(--k8-warning-color);
    opacity: 1;
}

/* 带前缀图标的输入框padding调整 */
.k8-input-with-icon > .k8-input-prefix-icon + .k8-input {
    padding-left: 34px;
}

/* 带后缀图标的输入框padding调整 */
.k8-input-with-icon > .k8-input:has(+ .k8-input-suffix-icon) {
    padding-right: 34px;
}


.k8-input::placeholder {
    color: var(--k8-text-color-black); /* 占位符文字颜色 */
    opacity: 0.6; /* 设置透明度使其看起来不那么突出 */
}

.k8-input:focus {
    border-color: var(--k8-primary-color); /* 聚焦时显示主题色边框 */
    background-color: var(--k8-bg-color); /* 背景色变为白色 */
    outline: none; /* 去掉默认的轮廓 */
}

.k8-input:hover:not(:focus) {
    background-color: var(--k8-secondary-hover); /* 悬停时背景颜色 */
}

.k8-select {
    position: relative;
    display: inline-block;
    width: 150px;
}

.k8-select-button {
    background-color: var(--k8-secondary-color);
    color: var(--k8-text-color-black);
    border: none;
    height: 32px;
    padding: 0px 15px;
    cursor: pointer;
    width: 100%; /* 设置为全宽 */
    text-align: left; /* 文字靠左显示 */
}
.k8-select-button:hover {
    background-color: var(--k8-secondary-hover);
}
.k8-select-button:active {
    background-color: var(--k8-gray-color); /* 背景色变为白色 */
}

.k8-dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--k8-bg-color);
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
    z-index: 1;
    box-shadow: 0 1px 2px var(--k8-border-color);
}
.k8-dropdown-content.show {
    display: block;
    height: auto;
}

.k8-dropdown-item {
    color: var(--k8-text-color-black);
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.k8-dropdown-item:hover {
    background-color: var(--k8-primary-light);
}

.k8-global-message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--k8-text-color-black);
    gap: 4px;
    z-index: 10000;
    transition: opacity 0.5s ease, height 0.5s ease;
}

.k8-global-message-container {
    border: 1px solid var(--k8-border-color);
    background-color: var(--k8-bg-color);
    padding: 8px 12px;
    margin: 10px auto;
    transition: opacity 0.5s ease, max-height 0.5s ease;
    max-height: 0;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: fit-content;
}

.k8-global-message-icon-success {
    color: var(--k8-success-color);
}
.k8-global-message-icon-warning {
    color: var(--k8-warning-color);
}
.k8-global-message-icon-error {
    color: var(--k8-danger-color);
}
.k8-global-message-icon-info {
    color: var(--k8-info-color);
}

.k8-global-message-icon {
    font-size: 16px;
    line-height: 1;
    align-items: center;
}

/* 标签组件 */
.k8-tag {
    display: inline-block;
    padding: 1px 8px;
    font-size: 12px;
    margin-right: 8px;
    transition: all 0.3s;
    border: 1px solid transparent;
}

/* 标签类型 */
.k8-tag-outline {
    background-color: transparent;
}

.k8-tag-success {
    --tag-color: var(--k8-success-color);
    color: var(--tag-color);
    border-color: var(--tag-color);
}

.k8-tag-warning {
    --tag-color: var(--k8-warning-color);
    color: var(--tag-color);
    border-color: var(--tag-color);
}

.k8-tag-danger {
    --tag-color: var(--k8-danger-color);
    color: var(--tag-color);
    border-color: var(--tag-color);
}

.k8-tag-info {
    --tag-color: var(--k8-info-color);
    color: var(--tag-color);
    border-color: var(--tag-color);
}

.k8-tag-filled {
    color: white;
}

.k8-tag-filled.k8-tag-success {
    background-color: var(--tag-color);
}

.k8-tag-filled.k8-tag-warning {
    background-color: var(--tag-color);
}

.k8-tag-filled.k8-tag-danger {
    background-color: var(--tag-color);
}

.k8-tag-filled.k8-tag-info {
    background-color: var(--tag-color);
}

/* 数字输入框容器 */
.k8-number-input {
    display: flex;
    align-items: stretch; /* 改为 stretch 使所有元素高度一致 */
    width: fit-content;
}

/* 数字输入框按钮 */
.k8-number-decrease,
.k8-number-increase {
    background-color: var(--k8-secondary-color);
    border: none;
    padding: 6px 0;
    width: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.k8-number-decrease i,
.k8-number-increase i {
    font-size: 16px;
    color: var(--k8-text-color-black);
    line-height: 1;
}

.k8-number-decrease:hover,
.k8-number-increase:hover {
    background-color: var(--k8-secondary-hover);
}

.k8-number-decrease:hover i,
.k8-number-increase:hover i {
    color: var(--k8-primary-color);
}

.k8-number-decrease:active,
.k8-number-increase:active {
    background-color: var(--k8-gray-color);
}

/* 数字输入框 */
.k8-input-number {
    width: 80px;
    text-align: center;
    margin: 0 4px;
    height: auto; /* 让高度自适应内容和内边距 */
    padding: 6px 8px; /* 保持与普通输入框一致的内边距 */
    box-sizing: border-box; /* 确保padding不会增加整体尺寸 */
    color: var(--k8-text-color-black); /* 确保文字颜色与普通输入框一致 */
}

/* 隐藏数字输入框的上下箭头 */
.k8-input-number::-webkit-outer-spin-button,
.k8-input-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 输入框示例容器 */
.input-demo {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 功能表格样式 */
.k8-table-functional th {
    position: relative;
    padding-right: 24px; /* 为排序图标留出空间 */
}

/* 复选框列样式 */
.k8-checkbox-column {
    width: 40px;
    padding: 10px !important;
}

/* 复选框样式 */
.k8-checkbox {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.k8-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.k8-checkbox-inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: var(--k8-bg-color);
    border: 1px solid var(--k8-border-color);
    transition: all 0.3s;
}

.k8-checkbox-inner i {
    font-size: 14px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
    position: absolute;
}

.k8-checkbox-input:checked + .k8-checkbox-inner .check-icon {
    opacity: 1;
}

.k8-checkbox-input.indeterminate + .k8-checkbox-inner .indeterminate-icon {
    opacity: 1;
}

.k8-checkbox-input:checked + .k8-checkbox-inner {
    background-color: var(--k8-primary-color);
    border-color: var(--k8-primary-color);
}

/* 添加半选状态样式 */
.k8-checkbox-input.indeterminate + .k8-checkbox-inner {
    background-color: var(--k8-primary-color);
    border-color: var(--k8-primary-color);
}

/* 排序图标样式 */
.k8-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 24px; /* 为排序图标留出空间 */
}

.k8-sort-icons {
    position: absolute;
    right: 8px;
    top: 45%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    line-height: 1;
    color: var(--k8-border-color);
}

.k8-sort-icon-up,
.k8-sort-icon-down {
    font-size: 10px;
    transition: all 0.3s;
    height: 6px;
}

.k8-sortable:hover .k8-sort-icons {
    color: var(--k8-primary-color);
}

.k8-sort-icons.asc .k8-sort-icon-up {
    color: var(--k8-primary-color);
}

.k8-sort-icons.desc .k8-sort-icon-down {
    color: var(--k8-primary-color);
}

/* 面包屑导航样式 */
.k8-breadcrumb {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--k8-text-color-black);
    padding: 8px 0;
}

.k8-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 4px; /* 添加图标和文本之间的间距 */
}

.k8-breadcrumb-item i {
    font-size: 16px;
    display: flex;
    align-items: center;
    line-height: 1;
}

.k8-breadcrumb-item a {
    color: var(--k8-text-color-black);
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 4px; /* 链接内的图标和文本间距 */
}

.k8-breadcrumb-item a:hover {
    color: var(--k8-primary-color);
}

.k8-breadcrumb-separator {
    margin: 0 8px;
    color: var(--k8-text-color-black);
    opacity: 0.3;
    display: flex;
    align-items: center;
}

.k8-breadcrumb-separator i {
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.k8-breadcrumb-item:last-child {
    color: var(--k8-text-color-black);
    opacity: 0.5;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 主题切换按钮 */
.k8-theme-switch {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--k8-secondary-color);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.k8-theme-switch:hover {
    background-color: var(--k8-secondary-hover);
}

.k8-theme-switch i {
    font-size: 20px;
    color: var(--k8-text-color-black);
    transition: all 0.3s ease;
}

/* 主题切换动画 */
.k8-theme-switch.rotate i {
    transform: rotate(360deg);
}

/* 对话框样式 */
.k8-dialog-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1000;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding: 40px 20px;
    opacity: 0;
}

.k8-dialog {
    background-color: var(--k8-bg-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 420px;
    max-width: 90%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.4);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: auto;
}

.k8-dialog-mask.show {
    visibility: visible;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.45);
}

.k8-dialog-mask.show .k8-dialog {
    transform: scale(1);
    opacity: 1;
}

/* 关闭时的动画 */
.k8-dialog-mask.closing {
    visibility: visible;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
}

.k8-dialog-mask.closing .k8-dialog {
    transform: scale(0.4);
    opacity: 0;
}

.k8-dialog-header {
    padding: 8px 5px 8px 15px;
    border-bottom: 1px solid var(--k8-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.k8-dialog-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--k8-text-color-black);
}

.k8-dialog-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--k8-text-color-black);
    opacity: 0.6;
    transition: all 0.3s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.k8-dialog-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.k8-dialog-close i {
    transition: all 0.3s ease;
    line-height: 1;
}

.k8-dialog-close:hover i {
    color: var(--k8-primary-color);
}

.k8-dialog-content {
    padding: 20px;
    color: var(--k8-text-color-black);
    overflow-y: auto;
    max-height: calc(80vh - 120px); /* 减去头部和底部的高度以及一些间距 */
}

.k8-dialog-footer {
    padding: 8px 20px;
    border-top: 1px solid var(--k8-border-color);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: var(--k8-scrollbar-width);
    height: var(--k8-scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--k8-scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
    background: var(--k8-scrollbar-thumb-color);
    border-radius: calc(var(--k8-scrollbar-width) / 2);
    transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--k8-scrollbar-thumb-hover-color);
}

/* Firefox 滚动条样式 */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--k8-scrollbar-thumb-color) var(--k8-scrollbar-track-color);
}

/* 滚动条演示容器 */
.k8-scrollbar-demo {
    width: 300px;
    height: 200px;
    overflow: auto;
    padding: 16px;
    border: 1px solid var(--k8-border-color);
    background-color: var(--k8-bg-color);
    margin: 20px 0;
}

.k8-scrollbar-demo-content {
    width: 600px;
    padding-bottom: 50px;
}

/* 加载样式 */
/* 圆形旋转加载 */
.k8-loading-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--k8-secondary-color);
    border-radius: 50%;
    border-top-color: var(--k8-primary-color);
    animation: k8-spin 0.6s linear infinite;
    position: relative;
}

@keyframes k8-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 小尺寸 */
.k8-loading-spinner.k8-loading-small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

/* 大尺寸 */
.k8-loading-spinner.k8-loading-large {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

/* 点脉冲加载 */
.k8-loading-dots {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 32px;
}

.k8-loading-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background-color: var(--k8-primary-color);
    border-radius: 50%;
    animation: k8-dots-pulse 1.4s ease-in-out infinite;
}

.k8-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.k8-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes k8-dots-pulse {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 小尺寸 */
.k8-loading-dots.k8-loading-small span {
    width: 6px;
    height: 6px;
    margin: 0 3px;
}

/* 大尺寸 */
.k8-loading-dots.k8-loading-large span {
    width: 12px;
    height: 12px;
    margin: 0 6px;
}

/* 加载容器 */
.k8-loading-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    margin: 20px 0;
}

.k8-loading-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.k8-loading-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
    width: 100%;
}

.k8-loading-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.k8-loading-text {
    font-size: 14px;
    color: var(--k8-text-color-black);
    margin-top: 8px;
}

/* 空状态 */
.k8-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    text-align: center;
}

.k8-empty-icon {
    font-size: 48px;
    color: var(--k8-gray-color);
    margin-bottom: 16px;
}

.k8-empty-image {
    width: 100px;
    height: 100px;
    margin-bottom: 16px;
}

.k8-empty-description {
    color: var(--k8-text-color-black);
    opacity: 0.7;
    font-size: 14px;
    margin-bottom: 16px;
    max-width: 300px;
}

.k8-empty-footer {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

/* 空状态容器和展示样式 */
.k8-empty-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 20px 0;
}

.k8-empty-demo {
    border: 1px solid var(--k8-border-color);
    border-radius: 4px;
    padding: 16px;
    background-color: var(--k8-bg-color);
}