@charset "utf-8";
/* ========================================
   Admin 后台 - 莫兰迪灰蓝现代简约配色
   特点：低饱和、高级感、专业稳重
   ======================================== */

:root {
    /* 莫兰迪灰蓝系 */
    --blue-50: #F5F7FA;
    --blue-100: #E8EDF2;
    --blue-200: #D1DBE5;
    --blue-300: #A8BED4;
    --blue-400: #7BA3C4;
    --blue-500: #5B7B9A;
    --blue-600: #4A6580;
    --blue-700: #3D5268;
    --blue-800: #2F4050;
    --blue-900: #1F2A35;

    /* 暖灰中性 */
    --gray-50: #FAFAF9;
    --gray-100: #F5F5F4;
    --gray-200: #E8E4E1;
    --gray-300: #D4CFCA;
    --gray-400: #A8A29E;
    --gray-500: #78716C;
    --gray-600: #57534E;
    --gray-700: #44403C;
    --gray-800: #292524;
    --gray-900: #1C1917;

    /* 页面配色 */
    --bg-page: var(--blue-50);
    --bg-card: #FFFFFF;
    --bg-hover: var(--blue-100);
    --text-primary: var(--gray-800);
    --text-secondary: var(--gray-600);
    --text-muted: var(--gray-400);
    --border-color: var(--gray-200);
    --border-light: var(--gray-100);

    /* 主色 - 雾霾蓝 */
    --primary: var(--blue-500);
    --primary-light: var(--blue-400);
    --primary-dark: var(--blue-700);
    --primary-bg: var(--blue-50);

    /* 功能色 - 低饱和 */
    --success: #6B9080;
    --success-bg: #E8F0EB;
    --info: var(--blue-500);
    --info-bg: var(--blue-100);
    --warning: #B89A6B;
    --warning-bg: #F5EFE4;
    --danger: #9A6B6B;
    --danger-bg: #F0E4E4;

    /* 阴影 - 柔和 */
    --shadow-sm: 0 1px 2px 0 rgba(44, 62, 80, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(44, 62, 80, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(44, 62, 80, 0.1);
}

/* 页面背景 */
html, body {
    background-color: var(--bg-page) !important;
}

/* 顶部 Logo - 深蓝灰 */
.ns-logo {
    background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-900) 100%) !important;
}

/* 顶部导航 - 单行布局 */
.layui-layout-admin .layui-header {
    background-color: var(--blue-800) !important;
    box-shadow: var(--shadow-md) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
}

/* Logo */
.layui-layout-admin .layui-header .layui-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
    margin-left: 10px !important;
    margin-right: 30px !important;
}

.layui-layout-admin .layui-header .layui-logo img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
}

/* 居中菜单 */
.layui-layout-admin .layui-header .layui-layout-center {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    background: transparent !important;
    position: static !important;
}

.layui-layout-admin .layui-header .layui-layout-center .layui-nav-item {
    margin: 0 5px !important;
}

.layui-layout-admin .layui-header .layui-nav {
    background: transparent !important;
}

.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0 20px !important;
}

.layui-layout-admin .layui-header .layui-nav .layui-nav-item a:hover {
    color: var(--blue-300) !important;
}

/* 顶部导航选中项 - 醒目样式 */
.layui-layout-admin .layui-header .layui-nav .layui-this {
    position: relative;
}

.layui-layout-admin .layui-header .layui-nav .layui-this a {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    border-radius: 6px 6px 0 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    top: -2px;
    padding: 0 24px !important;
}

/* 底部高亮指示条 */
.layui-layout-admin .layui-header .layui-nav .layui-this::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 10% !important;
    width: 80% !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #FFFFFF, transparent) !important;
    border-radius: 2px !important;
    display: block !important;
    box-shadow: 0 -1px 4px rgba(255, 255, 255, 0.5) !important;
}

/* 悬停时的选中项保持样式 */
.layui-layout-admin .layui-header .layui-nav .layui-this:hover a {
    background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* 用户下拉菜单 - 强制深色文字 */
.layui-layout-admin .layui-header .layui-nav-child {
    background-color: #FFFFFF !important;
    border: 1px solid #E8E4E1 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    top: 55px !important;
    padding: 5px 0 !important;
    min-width: 120px !important;
}

.layui-layout-admin .layui-header .layui-nav-child dd {
    line-height: 40px !important;
    background-color: transparent !important;
}

.layui-layout-admin .layui-header .layui-nav-child dd a,
.layui-layout-admin .layui-header .layui-nav .layui-nav-child a {
    color: #2D3436 !important;
    padding: 0 20px !important;
    display: block !important;
    font-size: 14px !important;
    background-color: transparent !important;
}

.layui-layout-admin .layui-header .layui-nav-child dd a:hover,
.layui-layout-admin .layui-header .layui-nav .layui-nav-child a:hover {
    background-color: #F5F7FA !important;
    color: #5B7B9A !important;
}

/* 左侧菜单 */
.layui-layout-admin .layui-side {
    background-color: var(--bg-card) !important;
    box-shadow: var(--shadow-sm) !important;
    border-right: 1px solid var(--border-color) !important;
}

.layui-layout-admin .layui-side .layui-side-scroll {
    background-color: var(--bg-card) !important;
}

.layui-layout-admin .layui-side .ns-side-title {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    line-height: normal !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--blue-600) !important;
    border-bottom: 1px solid var(--border-light) !important;
    text-align: left !important;
}

/* ====== 左侧菜单项 - 莫兰迪灰蓝风格 ====== */

/* 二级菜单项 - 圆角 + 留边呼吸感 */
.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-item > a {
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    margin: 4px 12px !important;
    padding-left: 16px !important;
    height: 40px !important;
    line-height: 40px !important;
    transition: all 0.25s ease !important;
}

/* 二级菜单项 - 悬停微动效 */
.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-item > a:hover {
    background-color: var(--bg-hover) !important;
    color: var(--primary) !important;
    transform: translateX(4px) !important;
}

/* 三级菜单子容器 - 留白 */
.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-child {
    padding: 4px 0 !important;
    background-color: transparent !important;
}

/* 三级菜单项 */
.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-child a {
    border-radius: var(--radius-sm) !important;
    margin: 2px 12px !important;
    padding-left: 36px !important;
    height: 34px !important;
    line-height: 34px !important;
    transition: all 0.2s ease !important;
    color: var(--text-secondary) !important;
}

/* 三级菜单圆点指示器 */
.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-child a::after {
    content: '' !important;
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    background-color: var(--text-muted) !important;
    border-radius: 50% !important;
    top: 50% !important;
    left: 24px !important;
    transform: translateY(-50%) !important;
    transition: background-color 0.2s ease !important;
}

/* 三级菜单项 - 悬停（圆点随动变色） */
.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-child a:hover {
    color: var(--primary) !important;
    background-color: var(--bg-hover) !important;
    transform: translateX(3px) !important;
}

.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-child a:hover::after {
    background-color: var(--primary) !important;
}

/* 选中态 - 二级菜单（左侧蓝色竖条 + 浅背景 + 加粗） */
.layui-layout-admin .layui-side .layui-nav-tree .layui-this > a {
    background-color: var(--primary-bg) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--primary) !important;
}

/* 选中态 - 三级菜单（左侧蓝色竖条 + 浅背景 + 加粗） */
.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-child .layui-this > a {
    background-color: var(--primary-bg) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--primary) !important;
}

/* 清除 layui 默认选中样式干扰（圆点 → 竖条） */
.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-child dd.layui-this {
    background-color: transparent !important;
}

.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-child dd.layui-this a::after {
    background-color: transparent !important;
}

/* 清除旧选中态全局规则干扰（已拆分为二级/三级独立规则） */
.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-child .layui-this {
    background-color: transparent !important;
    border-left: none !important;
}

.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-bar {
    background-color: var(--primary) !important;
}

/* 箭头指示器 - 有下级菜单提示（优雅简约风格） */
.layui-layout-admin .layui-side .layui-nav .layui-nav-more {
    width: 7px !important;
    height: 7px !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    border-color: transparent var(--text-muted) var(--text-muted) transparent !important;
    top: 15px !important;
    right: 22px !important;
    transition: all 0.3s ease !important;
    opacity: 0.7 !important;
}

/* 菜单项悬停时 - 箭头加深 + 背景圈浮现 */
.layui-layout-admin .layui-side .layui-nav-item:hover > a .layui-nav-more {
    border-color: transparent var(--text-secondary) var(--text-secondary) transparent !important;
    opacity: 1 !important;
}

/* 收起态箭头（默认折叠）- 保持细腻 */
.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-more {
    border-color: transparent var(--text-muted) var(--text-muted) transparent !important;
    margin-top: -3px !important;
    transform: rotate(-45deg) !important;
}

/* 展开态箭头 - 主色 + 柔和过渡 */
.layui-layout-admin .layui-side .layui-nav-itemed > a .layui-nav-more {
    border-color: transparent var(--primary) var(--primary) transparent !important;
    opacity: 1 !important;
    margin-top: 4px !important;
    transform: rotate(45deg) !important;
}

/* 主体内容区 */
.layui-layout-admin .layui-body {
    background-color: var(--bg-page) !important;
}

/* 面包屑 */
.ns-crumbs {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.ns-crumbs .layui-breadcrumb a {
    color: var(--text-muted) !important;
}

.ns-crumbs .layui-breadcrumb a:hover {
    color: var(--primary) !important;
}

.ns-crumbs .layui-breadcrumb a cite {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* 按钮 - 雾霾蓝主色 */
.layui-btn {
    border-radius: 4px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-out !important;
}

.layui-btn-normal,
.ns-bg-color {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border: none !important;
}

.layui-btn-normal:hover,
.ns-bg-color:hover {
    background: var(--primary-dark) !important;
    box-shadow: var(--shadow-md) !important;
}

/* 成功按钮 - 莫兰迪绿 */
.layui-btn-green {
    background: var(--success) !important;
    border: none !important;
}

/* 警告按钮 - 莫兰迪棕 */
.layui-btn-warm {
    background: var(--warning) !important;
    border: none !important;
}

/* 危险按钮 - 莫兰迪红 */
.layui-btn-danger {
    background: var(--danger) !important;
    border: none !important;
}

/* 次要按钮 */
.layui-btn-primary {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.layui-btn-primary:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* 表格 */
.layui-table-view {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-color) !important;
}

.layui-table-view .layui-table {
    border: none !important;
}

.layui-table-view .layui-table th {
    background: var(--blue-100) !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

.layui-table-view .layui-table td {
    border-bottom: 1px solid var(--border-light) !important;
}

.layui-table-view .layui-table tbody tr:hover {
    background-color: var(--primary-bg) !important;
}

/* 表格分页 */
.layui-table-page {
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* 表单 */
.layui-form .layui-input,
.layui-form .layui-textarea,
.layui-form .layui-select {
    border-radius: 4px !important;
    border-color: var(--border-color) !important;
    background: var(--bg-card) !important;
}

.layui-form .layui-input:focus,
.layui-form .layui-textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(91, 123, 154, 0.1) !important;
}

/* 卡片 */
.layui-card {
    border-radius: 8px !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
}

.layui-card-header {
    border-bottom: 1px solid var(--border-color) !important;
    font-weight: 600 !important;
}

/* Tab - 增强对比度 */
.layui-tab-title {
    border-bottom-color: var(--border-color) !important;
    background-color: var(--bg-card) !important;
}

.layui-tab-title li {
    color: var(--text-secondary) !important;
    background-color: transparent !important;
}

.layui-tab-title li:hover {
    color: var(--primary) !important;
    background-color: var(--bg-hover) !important;
}

.layui-tab-title li.layui-this {
    color: #FFFFFF !important;
    background-color: var(--primary) !important;
    border-radius: 4px 4px 0 0 !important;
}

.layui-tab-title li.layui-this::after {
    background-color: transparent !important;
}

/* 弹窗 */
.layui-layer {
    border-radius: 8px !important;
    box-shadow: var(--shadow-lg) !important;
}

.layui-layer-title {
    background: var(--blue-100) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* 统计卡片 */
.ns-survey-info {
    border-radius: 8px !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
}

.ns-survey-detail-num {
    color: var(--primary) !important;
}

/* 快捷入口 */
.statistics-wrap .flex-box {
    border-radius: 8px !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
}

.statistics-wrap .flex-box:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: var(--primary) !important;
}

.statistics-wrap .flex-box .num {
    color: var(--primary) !important;
}

/* 常用功能 */
.common-function .layui-elem-quote {
    border-left: 4px solid var(--primary) !important;
    background: var(--primary-bg) !important;
    color: var(--primary-dark) !important;
}

/* 版本信息 */
.version_box,
.system_box {
    border-radius: 8px !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
}

/* 右侧信息栏 */
.index-info .layui-card {
    border-radius: 8px !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-color) !important;
}

/* 搜索栏 */
.table-search {
    background: var(--bg-card) !important;
    border-radius: 8px 8px 0 0 !important;
    border: 1px solid var(--border-color) !important;
    border-bottom: none !important;
}

/* 四级导航 */
.fourstage-nav {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-bottom: none !important;
}

.fourstage-nav .layui-tab-title li.layui-this {
    color: var(--primary) !important;
}

.fourstage-nav .layui-tab-title li.layui-this::after {
    background-color: var(--primary) !important;
}

/* 提示信息 */
.version-upgrade {
    background: var(--warning-bg) !important;
    border: 1px solid var(--warning) !important;
    color: var(--warning) !important;
}

/* 选中文字 */
::selection {
    background-color: var(--primary) !important;
    color: #FFFFFF !important;
}

/* 滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--blue-100);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

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