/**新的UI标准样式-------------------------------------start**/

/* --- 文字颜色 --- */
.xx-color-text-theme{
    color: var(--color-text-theme);
}
.xx-color-text-1{
    color: var(--color-text-1);
}
.xx-color-text-2{
    color: var(--color-text-2);
}
.xx-color-text-3{
    color: var(--color-text-3);
}
.xx-color-text-4{
    color: var(--color-text-4);
}
.xx-color-red{
    color: var(--error-1);
}
.xx-color-green{
    color: var(--green-1);
}
.xx-color-yellow{
    color: var(--yellow-1);
}
/* --- 文字大小 --- */
.xx-fontsize-tiny{
    font-size:var(--fontsize-tiny);
}
.xx-fontsize-mini{
    font-size:var(--fontsize-mini);
}
.xx-fontsize-small{
    font-size: var(--fontsize-small);
}
.xx-fontsize-medium{
    font-size: var(--fontsize-medium);
}
.xx-fontsize-large{
    font-size: var(--fontsize-large);
}
.xx-list-item{
    /*所有的列表都需要增加这个class*/
}
.xx-list-item.is-active{
    background: var(--secondary-2);
}
.xx-list-item:hover{
    background: var(--color-hover);
}
.margin-4      { margin: 4px; }
.margin-8      { margin: 8px; }
.margin-12     { margin: 12px; }
.margin-16     { margin: 16px; }
.margin-20     { margin: 20px; }
.margin-24     { margin: 24px; }

.margin-left-4  { margin-left: 4px; }
.margin-left-8  { margin-left: 8px; }
.margin-left-12 { margin-left: 12px; }
.margin-left-16 { margin-left: 16px; }
.margin-left-20 { margin-left: 20px; }
.margin-left-24 { margin-left: 24px; }

.margin-right-4  { margin-right: 4px; }
.margin-right-8  { margin-right: 8px; }
.margin-right-12 { margin-right: 12px; }
.margin-right-16 { margin-right: 16px; }
.margin-right-20 { margin-right: 20px; }
.margin-right-24 { margin-right: 24px; }

.margin-top-4  { margin-top: 4px; }
.margin-top-8  { margin-top: 8px; }
.margin-top-12 { margin-top: 12px; }
.margin-top-16 { margin-top: 16px; }
.margin-top-20 { margin-top: 20px; }
.margin-top-24 { margin-top: 24px; }

.margin-bottom-4  { margin-bottom: 4px; }
.margin-bottom-8  { margin-bottom: 8px; }
.margin-bottom-12 { margin-bottom: 12px; }
.margin-bottom-16 { margin-bottom: 16px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-24 { margin-bottom: 24px; }

.padding-4      { padding: 4px; }
.padding-8      { padding: 8px; }
.padding-12     { padding: 12px; }
.padding-16     { padding: 16px; }
.padding-20     { padding: 20px; }
.padding-24     { padding: 24px; }

.padding-left-4  { padding-left: 4px; }
.padding-left-8  { padding-left: 8px; }
.padding-left-12 { padding-left: 12px; }
.padding-left-16 { padding-left: 16px; }
.padding-left-20 { padding-left: 20px; }
.padding-left-24 { padding-left: 24px; }

.padding-right-4  { padding-right: 4px; }
.padding-right-8  { padding-right: 8px; }
.padding-right-12 { padding-right: 12px; }
.padding-right-16 { padding-right: 16px; }
.padding-right-20 { padding-right: 20px; }
.padding-right-24 { padding-right: 24px; }

.padding-top-4  { padding-top: 4px; }
.padding-top-8  { padding-top: 8px; }
.padding-top-12 { padding-top: 12px; }
.padding-top-16 { padding-top: 16px; }
.padding-top-20 { padding-top: 20px; }
.padding-top-24 { padding-top: 24px; }

.padding-bottom-4  { padding-bottom: 4px; }
.padding-bottom-8  { padding-bottom: 8px; }
.padding-bottom-12 { padding-bottom: 12px; }
.padding-bottom-16 { padding-bottom: 16px; }
.padding-bottom-20 { padding-bottom: 20px; }
.padding-bottom-24 { padding-bottom: 24px; }

.gap-0{ gap:var(--spacing-0)}
.gap-4{ gap:var(--spacing-mini)}
.gap-8{ gap:var(--spacing-small)}
.gap-8-row{ gap:var(--spacing-small) 0}
.gap-12{ gap:var(--spacing-medium)}
.gap-16{ gap:var(--spacing-large)}

/* ===== 全局滚动条样式 ===== */
/* Webkit 浏览器（Chrome, Safari, Edge） */
*::-webkit-scrollbar        { width: 8px; height: 8px; }
*::-webkit-scrollbar-track  { background: transparent; }
*::-webkit-scrollbar-thumb   { background: transparent; border-radius: 4px; transition: background 0.3s ease; }
/* 鼠标悬停时显示滚动条 */
*:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); }
*::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.5); }
/* Firefox */
*       { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: rgba(0, 0, 0, 0.3) transparent; }

.xx-popper {background: var(--color-fill-1)!important;border-radius: 16px;}
.xx-popper .popper__arrow{display: none;}
.xx-popper[x-placement^=bottom]{margin-top: 8px;}

/* xx-popper 滚动条一直显示 */
.xx-popper::-webkit-scrollbar-thumb,
.xx-popper *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);

}
.xx-popper::-webkit-scrollbar-thumb:hover,
.xx-popper *::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}
.xx-popper, .xx-popper * {
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* z-filter 筛选组件样式 */
.xx-popper .multipleSelect{
    min-width: 100px;
}
.z-filter-trigger {
    padding: 4px 8px;
    border-radius: var(--radius-large);
    transition: background-color 0.2s ease;
}
.z-filter-trigger.z-filter-bg {
    background-color: var(--color-fill-2);
}
.z-filter-trigger.z-filter-active{
    background-color: #DCE0E4;
}
.z-filter-trigger.is-selected{
    background-color: var(--primary-2);
}

/* z-filter-date-picker 弹出层样式 */
.xx-popper .el-picker-panel__body-wrapper {
    background-color: var(--color-fill-1) !important;
    background: var(--color-fill-1) !important;
    border-radius: var(--radius-large) !important;
    border: none !important;
}
.xx-popper .el-picker-panel .popper__arrow {
    display: none !important;
}
.xx-popper .el-picker-panel__sidebar{
    background-color: var(--color-fill-1) !important;
    border-radius: var(--radius-large) 0 0  var(--radius-large)!important;
}
.z-term-sidebar__year{
    color: var(--color-text-3);
    padding: 4px;
    font-size: 12px;
}
.z-term-sidebar__term{
    color: var(--color-text-1);
    padding: 4px 8px;
    border-radius: var(--radius-mini);
    cursor: pointer;
}
.z-term-sidebar__term:hover {
    background-color: var(--color-hover);
}
.z-term-sidebar__divider{
    height: 1px;
    margin: 4px;
    background-color: var(--color-border--3);
}
.z-term-sidebar__toggle{
    cursor: pointer;
    color: var(--color-text-theme);
    width: fit-content;
    margin: 4px 8px;
}

/* z-filter-single 下拉菜单样式 */
.z-filter-single-dropdown.el-dropdown-menu {
    border-radius: var(--radius-large) !important;
    background: var(--color-fill-1);
    min-width: 120px;
    padding: 8px 4px;
}
.z-filter-single-dropdown .el-dropdown-menu__item {
    color: var(--color-text-1);
    border-radius: 12px;
    padding: 12px 8px;
    line-height: 24px;
}
.z-filter-single-dropdown .el-dropdown-menu__item:hover {
    background: rgba(0, 0, 0, 0.08)!important;
    color: var(--color-text-1)!important;
}

/* z-filter-date-picker 日期选择器样式 */
.xx-popper .el-date-range-picker__header div{
    color: var(--color-text-1) !important;
    font-weight: bold!important;
    font-size: var(--fontsize-small)!important;
}
.xx-popper .el-picker-panel__sidebar{
    padding: 8px!important;
}
.xx-popper .el-picker-panel__sidebar .el-picker-panel__shortcut{
    height: 40px;
    line-height: 40px;
    color: #192024;
}
.xx-popper .el-picker-panel__sidebar .el-picker-panel__shortcut:hover{
    background-color: var(--primary-2);
    border-radius: var(--radius-small);
}
.xx-popper table{
    color: var(--color-text-1);
    font-size: var(--fontsize-small);
}
.xx-popper .el-date-range-picker__content{
    padding: 16px 24px;
}
.xx-popper .el-date-table td{
    width: 32px;
    height: 32px;
}
.xx-popper .el-date-table td, .el-date-table td div{
    height: 32px;
}
.xx-popper .el-date-table td span{
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin-top: -3px;
}
/**新的UI标准样式-------------------------------------end**/

/* ===== 按钮 ===== */
.el-button--primary.is-active, .el-button--primary:active{
    background: var(--primary-1) !important;
    border-color: var(--primary-1) !important;
}
.blue-text:hover{
    color: var(--primary-1);
}
.el-button--primary.is-plain {
    color: var(--primary-1) !important;
    background-color: var(--primary-2) !important;
    border-color: var(--primary-4) !important;
}
.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus {
    background-color: var(--primary-1) !important;
    border-color: var(--primary-1) !important;
    color: #fff !important;
}
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:hover,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:active {
    background-color: var(--primary-4) !important;
    border-color: var(--primary-4) !important;
}
/* 文字按钮 */
.el-button--text {
    color: var(--primary-1) !important;
}
.el-button--text:hover,
.el-button--text:focus {
    color: var(--primary-5) !important;
}
/* ===== 头像 ===== */
.el-avatar{
    background: var(--primary-1) !important;
}
/* ===== 日期选择器 ===== */
.el-date-table td.in-range div,
.el-date-table td.in-range div:hover {
    background-color: var(--primary-2) !important;
}
.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
    background-color: var(--primary-2);
}
/* ===== tag标签 ===== */
.el-tag {
    background-color: var(--primary-2);
    border-color: var(--primary-4);
}



.spacing-small-left{
    margin-left: var(--spacing-small) !important;
}
.spacing-large-left{
    margin-left: var(--spacing-large) !important;
}
.spacing-small-right{
    margin-right: var(--spacing-small) !important;
}
.spacing-large-right{
    margin-right: var(--spacing-large) !important;
}
.spacing-small-top{
    margin-top: var(--spacing-small) !important;
}
.spacing-large-top{
    margin-top: var(--spacing-large) !important;
}
.spacing-small-bottom{
    margin-bottom: var(--spacing-small) !important;
}
.spacing-large-bottom{
    margin-bottom: var(--spacing-large) !important;
}
.flex-shrink-0 {
    flex-shrink: 0;
}