:root {
    /* Existing Variables (Updated) */
    --navbar-height: 3.5rem;
    --sidebar-width: 220px;
    --white: #fff;
    --black: #000;
    --gray-50: #f9f9f9;
    --gray-100: #ececec;
    --gray-200: #e3e3e3;
    --gray-300: #cdcdcd;
    --gray-400: #b4b4b4;
    --gray-500: #9b9b9b;
    --gray-600: #676767;
    --gray-700: #424242;
    --gray-750: #2f2f2f;
    --gray-800: #212121;
    --gray-900: #171717;
    --gray-950: #0d0d0d;
    --red-500: #ef4444;
    --red-700: #b91c1c;
    --brand-purple: #ab68ff;
    --yellow-900: #927201;
    --main-surface-background: hsla(0, 0%, 100%, .95);
    --message-surface: hsla(0, 0%, 91%, .5);
    --composer-surface: var(--message-surface);
    --dot-color: var(--black);
    --text-primary: #1d1d1f; /* Updated: 主要文本 */
    --text-primary-inverse: var(--gray-100);
    --content-primary: #01172b;
    --content-secondary: #44505b;
    --text-secondary: #86868b; /* 保持不变: 次要文本 */
    --text-tertiary: var(--gray-400);
    --text-quaternary: var(--gray-300);
    --tag-blue: #08f;
    --tag-blue-light: #0af;
    --text-error: #c62828; /* Updated: 错误/警告文本 */
    --text-danger: var(--red-500);
    --text-placeholder: rgba(0, 0, 0, .7);
    --surface-error: #ffebee; /* Updated: 错误/警告背景 */
    --border-xlight: rgb(0 0 0 / 5%);
    --border-light: rgba(0, 0, 0, .1);
    --border-medium: rgba(0, 0, 0, .15);
    --border-heavy: rgba(0, 0, 0, .2);
    --border-xheavy: rgba(0, 0, 0, .25);
    --hint-text: #08f;
    --hint-bg: #b3dbff;
    --border-sharp: rgb(0 0 0 / 5%);
    --icon-secondary: #676767;
    --main-surface-primary: #f5f5f5; /* 保持不变: 未激活/禁用背景 */
    --main-surface-primary-inverse: var(--gray-800);
    --main-surface-secondary: #e8f5e9; /* 保持不变: 激活/成功背景 */
    --main-surface-tertiary: #e3f2fd; /* Updated: 信息/提示背景 */
    --sidebar-surface-primary: var(--gray-50);
    --sidebar-surface-secondary: var(--gray-100);
    --sidebar-surface-tertiary: var(--gray-200);
    --sidebar-title-primary: rgba(40, 40, 40, .5);
    --sidebar-surface: #fcfcfc;
    --sidebar-body-primary: #0d0d0d;
    --sidebar-icon: #7d7d7d;
    --surface-hover: rgba(0, 0, 0, .07);
    --link: #2964aa;
    --link-hover: #749ac8;
    --selection: #007aff;

	--brand-primary-hover: rgba(255, 159, 10, 0.9); /* 主色悬停 */
    --brand-gradient-hover-start: rgba(255, 159, 10, 0.9); /* 渐变悬停起点 */
    --brand-gradient-hover-end: rgba(255, 189, 10, 0.9); /* 渐变悬停终点 */
    --brand-gradient-start: #ff9f0a; /* 主色渐变起点 */
    --brand-gradient-end: #ffbd0a; /* 主色渐变终点 */
    --brand-primary: #ff9f0a; /* 主色 */
    --brand-secondary: #ffbd0a; /* 辅助色 */
    --background-primary: #f8f8f8; /* 背景色 */
    --background-medium: #757575;
    --background-light: #f5f5f7; /* 浅背景色 */
    --border-primary: #e5e5e5; /* 保持不变: 边框颜色 */
    --text-success: #2e7d32; /* 激活/成功文本 */
    --text-disabled: #757575; /* 未激活/禁用文本 */
    --text-info: #1565c0; /* 信息/提示文本 */
}
/* 全局滚动条样式 */
* {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--sidebar-surface-secondary) transparent; /* 滚动条颜色（前景色，背景色）*/
}

/* 针对 Webkit 浏览器（Chrome、Safari等） */
::-webkit-scrollbar {
    width: 8px; /* 设置滚动条宽度 */
    height: 8px; /* 设置水平滚动条的高度 */
}

/* 设置滚动条的轨道颜色为透明 */
::-webkit-scrollbar-track {
    background-color: transparent; /* 滚动条轨道背景色透明 */
}

/* 设置滚动条的滑块（thumb）颜色 */
::-webkit-scrollbar-thumb {
    background-color: var(--sidebar-surface-secondary); /* 滑块颜色 */
    border-radius: 4px; /* 滑块圆角 */
}

/* 设置滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-500) !important; /* 悬停时的颜色 */
}


/* 去除所有能产生外框的元素的蓝色边框 */
*:focus,
*:active,
*.form-control:focus,
*.form-control:active {
    outline: none !important;
    box-shadow:none !important;
}

/* Override Bootstrap 4 Headings */
h1 {
    font-size: 1.5rem !important; /* 标题 1 */
    font-weight: 600 !important;
    color: var(--text-primary) !important; /* #1d1d1f */
}

h2 {
    font-size: 1.25rem !important; /* 标题 2 */
    font-weight: 500 !important;
    color: var(--text-primary) !important; /* #1d1d1f */
}

h3 {
    font-size: 1.125rem !important; /* 标题 3 */
    font-weight: 500 !important;
    color: var(--text-primary) !important; /* #1d1d1f */
}

/* Override Body Text */
body {
    font-size: 1rem !important; /* 正文 */
    font-weight: 400 !important;
    color: var(--text-primary) !important; /* #1d1d1f */
}

/* Override Secondary Text (Bootstrap 4 uses .text-muted for secondary text) */
.text-muted {
    font-size: 0.875rem !important; /* 次要文本 */
    font-weight: 400 !important;
    color: var(--text-secondary) !important; /* #86868b */
}

/* Custom Class for Small Text */
.text-small {
    font-size: 0.75rem !important; /* 小文本 */
    font-weight: 400 !important;
    color: var(--text-secondary) !important; /* #86868b */
}

.text-black {
	color:black;
}
.text-white {
	color:white;
}
.text-red {
	color:red;
}
.text-blue {
	color:blue;
}
.text-green {
	color:green;
}
.text-yellow {
	color:yellow;
}
.text-orange {
	color:orange;
}
.text-lightgrey {
	color:lightgrey;
}

.hidden {
    display: none;
}
.cursor-pointer {
    cursor: pointer;
}
.no-select {
    -webkit-user-select: none;  /* Chrome, Safari, and Opera */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* Internet Explorer/Edge */
    user-select: none;          /* Non-prefixed version, currently supported by Chrome, Edge, Opera, and Firefox */
}
@media (min-width: 768px) {
    .pt-md-6 {
        padding-top: 4.5rem !important; /* 6 * 0.75rem = 4.5rem */
    }
    .pt-md-7 {
        padding-top: 6rem !important; /* 7 * 0.75rem = 6rem */
    }
    .pt-md-8 {
        padding-top: 7.5rem !important; /* 8 * 0.75rem = 7.5rem */
    }
    .pt-md-9 {
        padding-top: 9rem !important; /* 9 * 0.75rem = 9rem */
    }
    .pt-md-10 {
        padding-top: 10.5rem !important; /* 10 * 0.75rem = 10.5rem */
    }
}

@media (min-width: 1600px) {
 	/* 定义新的列类前缀，这里用 col-xxl */
    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.333333%;
    }

    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.666667%;
    }

    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.666667%;
    }

    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.333333%;
    }

    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }

    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }

    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.666667%;
    }

    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* 激活/成功状态 */
.status-success {
    background-color: var(--main-surface-secondary) !important; /* #e8f5e9 */
    color: var(--text-success) !important; /* #2e7d32 */
}

/* 未激活/禁用状态 */
.status-disabled {
    background-color: var(--main-surface-primary) !important; /* #f5f5f5 */
    color: var(--text-disabled) !important; /* #757575 */
}

/* 错误/警告状态 */
.status-error {
    background-color: var(--surface-error) !important; /* #ffebee */
    color: var(--text-error) !important; /* #c62828 */
}

/* 信息/提示状态 */
.status-info {
    background-color: var(--main-surface-tertiary) !important; /* #e3f2fd */
    color: var(--text-info) !important; /* #1565c0 */
}

.status-tag {
	font-size:0.75rem;
	padding: 0.3rem 0.6rem;
	border-top-left-radius: 50% 100%;
	border-bottom-left-radius: 50% 100%;
	border-top-right-radius: 50% 100%;
	border-bottom-right-radius: 50% 100%;
	white-space: nowrap;
}


/* 自定义主按钮 (覆盖 .btn-primary) */
/* 按钮基础样式 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* 主要按钮 - 渐变背景 */
.btn-primary-gradient {
  background-image: linear-gradient(to right, var(--brand-gradient-start), var(--brand-gradient-end));
  color: var(--white);
}
.btn-primary-gradient:hover {
    background-image: linear-gradient(to right, var(--brand-gradient-hover-start), var(--brand-gradient-hover-end));
    color: var(--white);
}

/* 主要按钮 - 纯色背景 */
.btn-primary {
  background-color: var(--brand-primary);
  color: var(--white);
  border-color: var(--brand-primary);
}
.btn-primary:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

/* 功能按钮 */
.btn-function {
  background-color: var(--background-light); /* #f5f5f7 */
  color: var(--text-primary); /* #1d1d1f */
}
.btn-function:hover {
  background-color: var(--border-primary); /* #e5e5e5 */
}

/* 轮廓按钮 */
.btn-outline {
  background-color: transparent;
  border: 1px solid var(--border-primary); /* #e5e5e5 */
  color: var(--text-primary); /* #1d1d1f */
}
.btn-outline:hover {
  background-color: var(--background-light); /* #f5f5f7 */
}

/* 幽灵按钮 */
.btn-ghost {
  background-color: transparent;
  color: var(--gray-400); /* #86868b */
}
.btn-ghost:hover {
  background-color: var(--gray-100); /* #f5f5f7 */
  color: var(--text-secondary); /* #1d1d1f */
}

/* 危险按钮 */
.btn-destructive {
  background-color: var(--red-500); /* #ef4444 */
  color: var(--white);
}
.btn-destructive:hover {
  background-color: var(--red-700); /* #b91c1c */
}

/* 图标按钮 */
.btn-icon {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.3rem;
}

/* 卡片操作区图标按钮 */
.btn-card-action {
  background-color: transparent;
  color: var(--text-secondary); /* #86868b */
  height: 2.25rem;
  width: 2.25rem;
  padding: 0;
}
.btn-card-action:hover {
  background-color: var(--background-light); /* #f5f5f7 */
  color: var(--text-primary); /* #1d1d1f */
}

/* 图片卡片悬浮按钮 */
.btn-image-overlay {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  color: var(--text-primary); /* #1d1d1f */
  height: 2rem;
  width: 2rem;
  padding: 0;
}
.btn-image-overlay:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* 确认图标按钮 */
.btn-icon-confirm {
  background-color: var(--brand-primary); /* #ff9f0a */
  color: var(--white);
  height: 2.25rem;
  width: 2.25rem;
  padding: 0;
}
.btn-icon-confirm:hover {
    background-color: var(--brand-primary-hover);
}

/* 取消图标按钮 */
.btn-icon-cancel {
  background-color: var(--red-500); /* #ef4444 */
  color: var(--white);
  height: 2.25rem;
  width: 2.25rem;
  padding: 0;
}
.btn-icon-cancel:hover {
  background-color: var(--red-700); /* #dc2626 */
}

/* 小尺寸按钮 */
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
.btn-xs {
    padding: 0.25rem 0.25rem; /* 减小填充 */
    font-size: 0.75rem; /* 减小字体大小 */
    line-height: 1; /* 调整行高 */
    border-radius: 0.2rem; /* 调整边框圆角 */
}
/* 大尺寸按钮 */
.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}


/* 按钮禁用状态 */
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* 按钮加载状态 */
.btn-loading {
  position: relative;
  pointer-events: none;
}
.btn-loading:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 按钮组 */
.btn-group {
  display: inline-flex;
}
.btn-group .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.form-control, .custom-select {
	border-color: var(--border-primary);
}

.bootstrap-select.form-control {
	border: 1px solid var(--border-primary);
}


.tooltip-inner {
    background-color: var(--gray-800);
    color: var(--white);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: var(--gray-800);
}

.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--gray-800);
}

.tooltip.bs-tooltip-left .arrow::before {
    border-left-color: var(--gray-800);
}

.tooltip.bs-tooltip-right .arrow::before {
    border-right-color: var(--gray-800);
}



div.dataTables_wrapper div.dataTables_info {
    padding-top: 0.15em;
}
table.dataTable {
    border-collapse: collapse !important;
    border-spacing: 0;
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
}
table.dataTable tr:hover {
	background-color:var(--gray-50);
}
.table td {
    border-top: 1px solid var(--gray-100);
}
table.dataTable thead {
	background-color: var(--gray-50);
}
div.dataTables_wrapper div.dataTables_length select {
    border-radius: 0.5rem;
    min-height: 2.2rem;
}
.pagination .page-item .page-link {
	margin: 0 0.1rem;
    border-radius: 0.5rem;
    min-width: 2.2rem;
    min-height: 2.2rem;
}
.pagination .page-item.active .page-link {
    background-color: var(--brand-primary);
    color: var(--white);
    border-color: var(--brand-primary);
}
.pagination .page-item.disabled .page-link {
    color: var(--text-primary);
    background-color: var(--white);
    border-color: var(--border-primary);
}

/*
    Start Preloader css
*/
.preloader {
  background-color: #fff;
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 99999;
}

.lds-ellipsis {
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 5rem;
  text-align: center;
  z-index: 9999;
}

.lds-ellipsis span {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #d00b2b;
  margin: 0 0.1rem;
  animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
}

.lds-ellipsis span:nth-child(1) {
  animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
}

.lds-ellipsis span:nth-child(2) {
  animation: ball-pulse-sync 0.6s -70ms infinite ease-in-out;
}
@keyframes ball-pulse-sync {
  33% {
    transform: translateY(10px);
  }
  66% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}