/* ==========================================================================
   金航 CRM 动感增强样式 ui-dynamics.css  v5.3.15
   --------------------------------------------------------------------------
   设计原则：
   1) 只做视觉增强，不改动布局尺寸，不覆盖业务功能样式
   2) 全部动效 120~300ms，不阻塞操作
   3) 窄屏（<=768px）与 prefers-reduced-motion 自动降级
   4) 出问题直接移除本文件 / 去掉引用即可完全恢复原样
   ========================================================================== */

:root {
    --uid-blue: #1E9FFF;
    --uid-blue-dark: #0d8bff;
    --uid-cyan: #36cfc9;
    --uid-teal: #5DCAA5;
    --uid-line: linear-gradient(180deg, #1E9FFF, #36cfc9);
}

/* ---------------- 1. 左侧菜单 ---------------- */
.layui-side .layui-nav-tree .layui-nav-item > a {
    position: relative;
    transition: background-color .2s ease, color .2s ease;
}
.layui-side .layui-nav-tree .layui-nav-item > a .layui-icon {
    transition: transform .22s ease;
    display: inline-block;
}
.layui-side .layui-nav-tree .layui-nav-item > a:hover {
    background: linear-gradient(90deg, rgba(30, 159, 255, .16), rgba(54, 207, 201, 0)) !important;
}
.layui-side .layui-nav-tree .layui-nav-item > a:hover .layui-icon {
    transform: translateX(2px);
}
.layui-side .layui-nav-tree .layui-nav-item > a::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--uid-line);
    opacity: 0;
    transform: scaleY(.35);
    transition: opacity .22s ease, transform .22s ease;
    border-radius: 0 2px 2px 0;
}
.layui-side .layui-nav-tree .layui-nav-item > a:hover::before {
    opacity: .6;
    transform: scaleY(1);
}
.layui-side .layui-nav-tree .layui-this > a::before,
.layui-side .layui-nav-tree a.layui-this::before {
    opacity: 1;
    transform: scaleY(1);
}
.layui-side .layui-nav-tree .layui-this > a,
.layui-side .layui-nav-tree a.layui-this {
    background: linear-gradient(90deg, rgba(30, 159, 255, .22), rgba(54, 207, 201, .04)) !important;
}

/* ---------------- 2. 顶部页签 ---------------- */
.layuimini-tab .layui-tab-title li,
.layui-body > .layui-tab .layui-tab-title li {
    position: relative;
    transition: background-color .2s ease, color .2s ease;
}
.layuimini-tab .layui-tab-title li::after,
.layui-body > .layui-tab .layui-tab-title li::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    width: 0; height: 2px;
    background: var(--uid-line);
    transform: translateX(-50%);
    transition: width .24s ease;
    border-radius: 2px 2px 0 0;
}
.layuimini-tab .layui-tab-title li:hover,
.layui-body > .layui-tab .layui-tab-title li:hover {
    background: rgba(30, 159, 255, .08);
}
.layuimini-tab .layui-tab-title .layui-this::after,
.layui-body > .layui-tab .layui-tab-title .layui-this::after {
    width: calc(100% - 16px);
}
.layuimini-tab .layui-tab-title li .layui-tab-close {
    transition: transform .18s ease, color .18s ease;
}
.layuimini-tab .layui-tab-title li .layui-tab-close:hover {
    transform: rotate(90deg);
    color: #FF5722;
}

/* ---------------- 3. 顶栏 & 快捷入口 ---------------- */
.layui-header .layui-nav .layui-nav-item > a .layui-icon,
.layuimini-header-content .layui-nav .layui-nav-item > a .layui-icon {
    transition: transform .2s ease, color .2s ease;
}
.layui-header .layui-nav .layui-nav-item > a:hover .layui-icon {
    transform: translateY(-1px);
    color: var(--uid-cyan);
}
.layuimini-header-content .menu-refresh:hover .layui-icon,
.layuimini-header-content .layui-nav-item > a:hover .layui-icon {
    color: var(--uid-cyan);
}

/* ---------------- 4. 按钮：流光 + 按压 ---------------- */
.layui-btn {
    position: relative;
    overflow: hidden;
    transition: transform .14s ease, box-shadow .2s ease, opacity .2s ease;
}
.layui-btn:not(.layui-btn-disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 159, 255, .28);
}
.layui-btn:not(.layui-btn-disabled):active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(30, 159, 255, .3);
}
.layui-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
    pointer-events: none;
    opacity: 0;
}
.layui-btn:not(.layui-btn-disabled):hover::after {
    animation: uidSheen .65s ease;
}
@keyframes uidSheen {
    0% { left: -60%; opacity: .9; }
    100% { left: 130%; opacity: 0; }
}
/* 水波纹（由 JS 插入 .uid-ripple） */
.uid-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, .55);
    pointer-events: none;
    animation: uidRipple .55s ease-out forwards;
}
.layui-btn-primary .uid-ripple,
.layui-btn-normal .uid-ripple { background: rgba(30, 159, 255, .35); }
@keyframes uidRipple {
    to { transform: scale(2.6); opacity: 0; }
}

/* ---------------- 5. 表单：聚焦发光 ---------------- */
.layui-input, .layui-textarea, .layui-select, .layui-form-select dl {
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.layui-input:hover, .layui-textarea:hover, .layui-select:hover {
    border-color: #9fd0ff !important;
}
.layui-input:focus, .layui-textarea:focus, .layui-select:focus {
    border-color: var(--uid-cyan) !important;
    box-shadow: 0 0 0 3px rgba(54, 207, 201, .18) !important;
    background-color: #fbffff;
}
.layui-form-select dl dd.layui-this {
    background: linear-gradient(90deg, rgba(30, 159, 255, .12), rgba(54, 207, 201, .06));
    color: var(--uid-blue-dark);
}
.layui-form-select dl dd {
    transition: background-color .16s ease, padding-left .16s ease;
}
.layui-form-select dl dd:hover {
    padding-left: 22px;
}
/* 表单块标题加科技小竖条 */
.layui-elem-field legend {
    position: relative;
    padding-left: 12px;
}
.layui-elem-field legend::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 4px; height: 14px;
    margin-top: -7px;
    background: var(--uid-line);
    border-radius: 2px;
}

/* ---------------- 6. 卡片 ---------------- */
.layui-card {
    transition: box-shadow .24s ease, transform .24s ease;
}
.layui-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}
.layui-card-header {
    position: relative;
}
.layui-card-header::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 16px;
    margin-top: -8px;
    background: var(--uid-line);
    border-radius: 0 2px 2px 0;
}

/* ---------------- 7. 表格：悬停流光（保持高可读） ---------------- */
.layui-table tbody tr {
    transition: background-color .18s ease;
}
.layui-table tbody tr:hover > td {
    background-color: #f0f9ff !important;
}
.layui-table tbody tr:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--uid-cyan);
}
.layui-table thead tr {
    background: linear-gradient(180deg, #f7fbff, #eef7ff);
}
.layui-table th {
    color: #1f4d6b !important;
}
/* 表格内小按钮更紧凑的悬停 */
.layui-table td .layui-btn:hover {
    transform: translateY(-1px);
}

/* ---------------- 8. 弹窗 / 提示 ---------------- */
.layui-layer {
    animation: uidPop .22s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes uidPop {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to { opacity: 1; transform: none; }
}
.layui-layer-title {
    background: linear-gradient(90deg, #f7fbff, #eef7ff) !important;
    border-left: 3px solid var(--uid-blue) !important;
}
.layui-layer-shade {
    backdrop-filter: blur(1.5px);
}
/* 自制 toast（部分页面自建 .attToast 等）统一动效 */
.attToast, .uid-toast, .sch-toast {
    animation: uidSlideDown .26s ease;
}
@keyframes uidSlideDown {
    from { opacity: 0; transform: translate(-50%, -14px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
.attModal, .uid-modal-box {
    animation: uidPop .2s ease;
}

/* ---------------- 9. 页面内容淡入 ---------------- */
body.uid-enter .layuimini-main,
body.uid-enter .layui-card,
body.uid-enter .layui-form {
    animation: uidFadeUp .3s ease both;
}
@keyframes uidFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
/* 分页条 */
.layui-laypage a, .layui-laypage span {
    transition: background-color .18s ease, color .18s ease;
}
.layui-laypage a:hover {
    background-color: #e8f4ff !important;
    color: var(--uid-blue-dark) !important;
}

/* ---------------- 10. 顶部加载进度条（框架页） ---------------- */
#uid-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, #1E9FFF, #36cfc9, #5DCAA5);
    box-shadow: 0 0 8px rgba(54, 207, 201, .8);
    z-index: 99999;
    opacity: 0;
    transition: width .25s ease, opacity .3s ease;
    pointer-events: none;
}
#uid-progress.uid-on {
    opacity: 1;
}

/* ---------------- 11. 登录页科技背景 ---------------- */
#uid-login-canvas {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 0;
    display: block;
}
body.uid-login #particles-js {
    position: relative;
    z-index: 2;
    background: transparent !important;
}
/* 保留原背景图，叠加科技蓝调遮罩 + 光晕 */
body.uid-login .uid-login-mask {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 22% 18%, rgba(30, 159, 255, .40), transparent 55%),
        radial-gradient(circle at 78% 82%, rgba(54, 207, 201, .30), transparent 55%),
        linear-gradient(180deg, rgba(4, 44, 83, .80), rgba(4, 44, 83, .62));
    pointer-events: none;
}
body.uid-login .login-box {
    border: 1px solid rgba(133, 183, 235, .45) !important;
    border-radius: 12px !important;
    background-color: rgba(4, 44, 83, .62) !important;
    backdrop-filter: blur(6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .38), 0 0 0 1px rgba(54, 207, 201, .12) inset;
    animation: uidLoginIn .5s cubic-bezier(.2, .9, .3, 1.05);
}
@keyframes uidLoginIn {
    from { opacity: 0; transform: translate(0, -14px) scale(.97); }
    to { opacity: 1; transform: none; }
}
body.uid-login .login-box .layui-input {
    background-color: rgba(255, 255, 255, .1) !important;
    border-color: rgba(133, 183, 235, .5) !important;
    color: #fff !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
body.uid-login .login-box .layui-input::placeholder {
    color: rgba(230, 241, 251, .55);
}
body.uid-login .login-box .layui-input:focus {
    border-color: var(--uid-cyan) !important;
    box-shadow: 0 0 0 3px rgba(54, 207, 201, .22) !important;
    background-color: rgba(255, 255, 255, .16) !important;
}
body.uid-login .login-box .layui-form-label {
    background-color: rgba(255, 255, 255, .08) !important;
    border-right-color: rgba(133, 183, 235, .35) !important;
}
body.uid-login .login-box input[type="submit"],
body.uid-login .login-box .layui-btn {
    background: linear-gradient(100deg, #1E9FFF, #36cfc9) !important;
    border: none !important;
    letter-spacing: 5px;
    font-weight: 500;
    box-shadow: 0 6px 18px rgba(30, 159, 255, .38);
}
body.uid-login .login-box input[type="submit"]:hover {
    filter: brightness(1.06);
    box-shadow: 0 8px 22px rgba(54, 207, 201, .45);
}
body.uid-login .captcha {
    border: 1px solid rgba(133, 183, 235, .45);
    border-radius: 4px;
}

/* ---------------- 12. 降级：窄屏 / 减少动效 ---------------- */
@media (max-width: 768px) {
    #uid-login-canvas { display: none; }
    .layui-btn::after { display: none; }
    .layui-card:hover, .layui-btn:hover { transform: none; }
    .uid-ripple { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .layui-btn::after,
    .uid-ripple,
    .layui-layer,
    body.uid-login .login-box,
    body.uid-enter .layuimini-main { animation: none !important; }
    .layui-card, .layui-btn, .layui-input { transition: none !important; }
    .layui-btn:hover, .layui-card:hover { transform: none !important; }
}