/* yaya-layui-admin-plus css样式扩展 2026/02/25 10:05:59;author:夜泊1990;email:hd1611756908@163.com;Licensed:MIT */
/*
 * 按钮扩展
 */
.yaya-btn{
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    white-space: nowrap;
    cursor: pointer;
    color: #606266;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    transition: .1s;
    font-weight: 500;
    user-select: none;
    vertical-align: middle;
    background-color: white;
    border: 1px solid #dcdfe6;
}
/* 默认伪类样式 */
.yaya-default:hover{
    color: #409eff;
    border-color: #a0cfff;
    background-color: #ecf5ff;
    outline: none;
}
.yaya-primary{
    color: white;
    background-color: #409eff;
    border-color: #409eff;
    outline-color: #a0cfff;
}
.yaya-primary:hover{
    color: white;
    background-color: #79bbff;
    border-color: #79bbff;
    outline: none;
}
.yaya-success{
    color: white;
    background-color: #67c23a;
    border-color: #67c23a;
    outline-color: #b3e19d;
}
.yaya-success:hover{
    color: white;
    background-color: #95d475;
    border-color: #95d475;
    outline: none;
}

.yaya-info{
    color: white;
    background-color: #909399;
    border-color: #909399;
    outline-color: #c8c9cc;
}
.yaya-info:hover{
    color: white;
    background-color: #b1b3b8;
    border-color: #b1b3b8;
    outline: none;
}
.yaya-warning{
    color: white;
    background-color: #e6a23c;
    border-color: #e6a23c;
    outline-color: #f3d19e;
}
.yaya-warning:hover{
    color: white;
    background-color: #eebe77;
    border-color: #eebe77;
    outline: none;
}
.yaya-danger{
    color: white;
    background-color: #f56c6c;
    border-color: #f56c6c;
    outline-color: #fab6b6;
}
.yaya-danger:hover{
    color: white;
    background-color: #f89898;
    border-color: #f89898;
    outline: none;
}
.is-plain-primary{
    color: #409eff;
    background-color: #ecf5ff;
    border-color: #a0cfff;
}
.is-plain-primary:hover{
    color: white;
    background-color: #409eff;
}
.is-plain-success{
    color: #67c23a;
    background-color: #f0f9eb;
    border-color: #b3e19d;
}
.is-plain-success:hover{
    color: white;
    background-color: #67c23a;
}
.is-plain-info{
    color: #909399;
    background-color: #f4f4f5;
    border-color: #c8c9cc;
}
.is-plain-info:hover{
    color: white;
    background-color: #909399;
}
.is-plain-warning{
    color: #e6a23c;
    background-color: #fdf6ec;
    border-color: #f3d19e;
}
.is-plain-warning:hover{
    color: white;
    background-color: #e6a23c;
}
.is-plain-danger{
    color: #f56c6c;
    background-color: #fef0f0;
    border-color: #fab6b6;
}
.is-plain-danger:hover{
    color: white;
    background-color: #f56c6c;
}

.is-round-default{
    border-radius: 20px;
}
.is-round-default:hover{
    color: #409eff;
    border-color: #a0cfff;
    background-color: #ecf5ff;
    outline: none;
    border-radius: 20px;
}
.is-round-primary{
    color: #409eff;
    background-color: #ecf5ff;
    border-color: #a0cfff;
    border-radius: 20px;
}
.is-round-primary:hover{
    color: white;
    background-color: #409eff;
    border-radius: 20px;
}
.is-round-success{
    color: #67c23a;
    background-color: #f0f9eb;
    border-color: #b3e19d;
    border-radius: 20px;
}
.is-round-success:hover{
    color: white;
    background-color: #67c23a;
    border-radius: 20px;
}
.is-round-info{
    color: #909399;
    background-color: #f4f4f5;
    border-color: #c8c9cc;
    border-radius: 20px;
}
.is-round-info:hover{
    color: white;
    background-color: #909399;
    border-radius: 20px;
}
.is-round-warning{
    color: #e6a23c;
    background-color: #fdf6ec;
    border-color: #f3d19e;
    border-radius: 20px;
}
.is-round-warning:hover{
    color: white;
    background-color: #e6a23c;
    border-radius: 20px;
}
.is-round-danger{
    color: #f56c6c;
    background-color: #fef0f0;
    border-color: #fab6b6;
    border-radius: 20px;
}
.is-round-danger:hover{
    color: white;
    background-color: #f56c6c;
    border-radius: 20px;
}

.is-circle-default{
    padding: 8px;
    border-radius:50%;
    width: 32px;
    height: 32px;

}
.is-circle-default:hover{
    color: #409eff;
    border-color: #a0cfff;
    background-color: #ecf5ff;
    outline: none;
    border-radius:50%;
}

.is-circle-info{
    padding: 8px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: white;
    background-color: #909399;
}
.is-circle-info:hover{
    color: #ffffff;
    border-color: #b1b3b8;
    background-color: #b1b3b8;
    padding: 8px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.is-circle-success{
    padding: 8px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: white;
    background-color: #67c23a;
}
.is-circle-success:hover{
    color: #ffffff;
    border-color: #b3e19d;
    background-color: #b3e19d;
    padding: 8px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.is-circle-primary{
    padding: 8px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: white;
    background-color: #409eff;
}
.is-circle-primary:hover{
    color: #ffffff;
    border-color: #a0cfff;
    background-color: #79bbff;
    padding: 8px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.is-circle-warning{
    padding: 8px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: white;
    background-color: #e6a23c;
}
.is-circle-warning:hover{
    color: white;
    border-color: #eebb77;
    background-color: #eebb77;
    padding: 8px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.is-circle-danger{
    padding: 8px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: white;
    background-color: #f56c6c;
}
.is-circle-danger:hover{
    color: white;
    border-color: #f89898;
    background-color: #f89898;
    padding: 8px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}
/*链接按钮*/
.is-link-default{
    border-color: transparent;
    color: #606266;
    background: transparent;
    padding: 2px;
    height: auto;
}
.is-link-default:hover{
    color: #909399;
}
.is-link-primary{
    border-color: transparent;
    color: #409eff;
    background: transparent;
    padding: 2px;
    height: auto;
}
.is-link-primary:hover{
    color: #a0cfff;
}

.is-link-success{
    border-color: transparent;
    color: #67c23a;
    background: transparent;
    padding: 2px;
    height: auto;
}
.is-link-success:hover{
    color: #b3e19d;
}

.is-link-info{
    border-color: transparent;
    color: #909399;
    background: transparent;
    padding: 2px;
    height: auto;
}
.is-link-info:hover{
    color: #b1b3b8;
}

.is-link-warning{
    border-color: transparent;
    color: #e6a23c;
    background: transparent;
    padding: 2px;
    height: auto;
}
.is-link-warning:hover{
    color: #eebb77;
}

.is-link-danger{
    border-color: transparent;
    color: #f56c6c;
    background: transparent;
    padding: 2px;
    height: auto;
}
.is-link-danger:hover{
    color: #f89898;
}

/* 按钮禁用 */
.yaya-btn-disabled,
.yaya-btn-disabled:active,
.yaya-btn-disabled:hover{
    cursor:not-allowed!important;
    opacity:0.4
}
/* 按钮大小 */
.yaya-btn-large{
    padding: 20px 40px;
    font-size: 24px;
}
.yaya-btn-small{
    height: 24px;
    font-size: 12px;
}

.yaya-btn-round-large{
    padding: 20px 40px;
    font-size: 24px;
}
.yaya-btn-round-small{
    height: 24px;
    font-size: 12px;
}

.yaya-btn-circle-large{
    padding: 20px;
}
.yaya-btn-circle-large>i{
    font-size: 24px;
}
.yaya-btn-circle-small{
    height: 24px;
    width: 24px;
}
.yaya-btn-circle-small>i{
    font-size: 12px;
}
/*宽度100%*/
.yaya-fluid{
    width: 100%;
}
/* 标签扩展 */
.yaya-tag{
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    text-overflow: ellipsis;
    padding: 0 9px;
    color: white;
    height: 24px;
    justify-content:center;
    vertical-align: middle;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
}
.yaya-tag-primary{
    background-color: #409eff;
    border-color: #409eff;
}
.yaya-tag-success{
    background-color: #67c23a;
    border-color: #67c23a;
}
.yaya-tag-info{
    background-color: #909399;
    border-color: #909399;
}
.yaya-tag-warning{
    background-color: #e6a23c;
    border-color: #e6a23c;
}
.yaya-tag-danger{
    background-color: #f56c6c;
    border-color: #f56c6c;
}

.yaya-tag-light-primary{
    background-color: #ecf5ff;
    color: #409eff;
    border-color: #d9ecff;
}
.yaya-tag-light-success{
    background-color: #f0f9eb;
    color: #67c23a;
    border-color: #e1f3d8;
}
.yaya-tag-light-info{
    background-color: #f4f4f5;
    color: #909399;
    border-color: #e9e9eb;
}
.yaya-tag-light-warning{
    background-color: #fdf6ec;
    color: #e6a23c;
    border-color: #faecd8;
}
.yaya-tag-light-danger{
    background-color: #fef0f0;
    color: #f56c6c;
    border-color: #fde2e2;
}

.yaya-tag-plain-primary{
    background-color: #ffffff;
    color: #409eff;
    border-color: #a0cfff;
}
.yaya-tag-plain-success{
    background-color: #ffffff;
    color: #67c23a;
    border-color: #b3e19d;
}
.yaya-tag-plain-info{
    background-color: #ffffff;
    color: #909399;
    border-color: #c8c9cc;
}
.yaya-tag-plain-warning{
    background-color: #ffffff;
    color: #e6a23c;
    border-color: #f3d19e;
}
.yaya-tag-plain-danger{
    background-color: #ffffff;
    color: #f56c6c;
    border-color: #fab6b6;
}
/* 圆形标签 */
.is-round{
    border-radius: 9999px;
}
.yaya-x>i{
    margin-left: 3px;
    cursor: pointer;
}
/* 标签尺寸 */
.tag-large{
    padding: 0 15px;
    height: 32px;
}
.tag-small{
    height: 20px;
    font-size: 12px;
}
/* 徽章 */
.badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 10rem; /* 大圆角 */
    background-color: #e0e0e0;
    color: #333;
}

.badge-primary {
    background-color: #409eff;
    color: white;
}
.badge-success {
    background-color: #67c23a;
    color: white;
}


.notification-container {
    position: relative; /* 父容器必须是相对定位 */
    display: inline-block;
}

.badge-dot {
    position: absolute;
    top: -9px;
    right: -9px;
    background-color: #f56c6c;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 8px;
    font-weight: bold;
    border: 2px solid white; /* 增加描边使其在复杂背景下更清晰 */
}
/* 小红点徽章 */
.icon-wrapper {
    position: relative;
    display: inline-block;
}

.avatar {
    width: 48px;
    height: 48px;
    background-color: #ddd;
    border-radius: 8px;
}

.dot {
    position: absolute;
    top: 0;
    right: 0;
    /* 核心样式 */
    width: 10px;
    height: 10px;
    background-color: #ff4d4f;
    border-radius: 50%; /* 变成圆形 */
    border: 2px solid #fff; /* 白色描边，增强在背景上的辨识度 */

    /* 居中偏移修正：让红点中心对准父容器的顶点 */
    transform: translate(50%, -50%);
}
.dot::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ff4d4f;
    animation: pulse 1.5s infinite ease-in-out;
    z-index: -1;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}