/**
 * Modern Dark Theme for Layui Admin
 * Style: Fresh, Rounded, Modern Dark
 * Author: Trae AI
 */

:root {
  /* --- 配色体系 (Color Palette) --- */
  --bg-body: #1E1E2F;          /* 主背景：深灰紫调 */
  --bg-card: #2D2D3F;          /* 卡片背景：稍浅 */
  --bg-sidebar: #2D2D3F;       /* 侧边栏背景 */
  --bg-header: #1E1E2F;        /* 顶部导航背景 */
  
  --color-primary: #4AB8FF;    /* 主色调：清新天蓝 */
  --color-primary-rgb: 74, 184, 255;
  --color-primary-hover: #6AC4FF;
  
  --color-success: #36D399;    /* 成功 */
  --color-warning: #FBBD23;    /* 警告 */
  --color-danger: #F87272;     /* 危险 */
  
  --text-main: #E5E5E5;        /* 主文字 */
  --text-secondary: #A0A0B0;   /* 次要文字 */
  --text-muted: #808090;       /* 提示文字 */
  
  --border-color: #3D3D50;     /* 边框颜色 */
  
  /* --- 尺寸与质感 (Dimensions & Texture) --- */
  --radius-base: 12px;         /* 全局圆角 */
  --radius-sm: 8px;            /* 小圆角 */
  --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.15); /* 柔和阴影 */
  --header-height: 64px;       /* 顶部导航高度 */
  --sider-width: 220px;        /* 侧边栏宽度 */
}

/* --- 全局重置 (Global Reset) --- */
body, html {
    background-color: var(--bg-body) !important;
    color: var(--text-main);
    font-family: 'Inter', 'Microsoft YaHei', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-body); 
}
::-webkit-scrollbar-thumb {
    background: #3D3D50; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #5D5D70; 
}

/* --- Layui 布局覆盖 (Layout Overrides) --- */

/* 1. 顶部导航 (Header) */
.layui-layout-admin .layui-header {
    background-color: var(--bg-header) !important;
    height: var(--header-height);
    line-height: var(--header-height);
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
}

.layui-layout-admin .layui-logo {
    height: var(--header-height);
    line-height: var(--header-height);
    background-color: transparent !important;
    color: var(--color-primary) !important;
    font-size: 20px;
    font-weight: 700;
    box-shadow: none;
    border-bottom: 1px solid var(--border-color);
}

.layui-header .layui-nav .layui-nav-item a {
    color: var(--text-secondary);
    transition: all 0.3s;
}
.layui-header .layui-nav .layui-nav-item a:hover {
    color: var(--color-primary);
}
/* 头部头像 */
.layui-nav-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(74, 184, 255, 0.2);
}

/* 2. 侧边栏 (Sidebar) */
.layui-layout-admin .layui-side {
    top: var(--header-height);
    width: var(--sider-width);
    background-color: var(--bg-sidebar) !important;
    box-shadow: 1px 0 0 var(--border-color);
}
.layui-side-scroll {
    width: var(--sider-width);
    background-color: transparent !important;
}

/* 菜单项 */
.layui-nav-tree {
    background-color: transparent !important;
    width: var(--sider-width);
    padding: 10px 0;
}
.layui-nav-tree .layui-nav-item a {
    height: 48px;
    line-height: 48px;
    color: var(--text-secondary);
    border-radius: var(--radius-base);
    margin: 4px 12px;
    padding: 0 16px !important; /* 覆盖Layui默认padding */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.layui-nav-tree .layui-nav-item a i {
    margin-right: 12px;
    font-size: 16px;
    color: var(--text-muted);
    transition: color 0.3s;
}

/* 菜单悬停 */
.layui-nav-tree .layui-nav-item a:hover {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-main);
}
.layui-nav-tree .layui-nav-item a:hover i {
    color: var(--color-primary);
}

/* 菜单选中 (重点) */
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-this > a,
.layui-nav-tree .layui-nav-child dd.layui-this,
.layui-nav-tree .layui-nav-child dd.layui-this a {
    background-color: rgba(74, 184, 255, 0.15) !important;
    color: var(--color-primary) !important;
}
.layui-nav-tree .layui-this::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background-color: var(--color-primary);
    border-radius: 0 4px 4px 0;
}
.layui-nav-tree .layui-this > a i,
.layui-nav-tree .layui-nav-child dd.layui-this a i {
    color: var(--color-primary);
}
/* 去除左侧默认竖条 */
.layui-nav-tree .layui-this > a::after, 
.layui-nav-tree .layui-nav-bar {
    display: none !important; 
}

/* 3. 主体内容 (Body) */
.layui-layout-admin .layui-body {
    top: var(--header-height);
    left: var(--sider-width);
    background-color: var(--bg-body);
    padding: 24px; /* 内边距加大 */
}

/* 4. 底部 (Footer) */
.layui-layout-admin .layui-footer {
    left: var(--sider-width);
    background-color: var(--bg-body);
    color: var(--text-muted);
    border-top: none;
    box-shadow: none;
}

/* --- 组件样式覆盖 (Component Overrides) --- */

/* 卡片 (Card) */
.layui-card {
    background-color: var(--bg-card) !important;
    border-radius: var(--radius-base);
    box-shadow: none; /* 默认无阴影 */
    border: 1px solid var(--border-color);
    margin-bottom: 24px;
    color: var(--text-main);
}
.layui-card:hover {
    box-shadow: var(--shadow-base); /* 悬浮阴影 */
    border-color: rgba(74, 184, 255, 0.2);
    transition: all 0.3s ease;
}
.layui-card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    font-weight: 600;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
}
.layui-card-body {
    padding: 20px;
    color: var(--text-secondary);
}

/* 按钮 (Button) */
.layui-btn {
    height: 40px;
    line-height: 40px;
    border-radius: var(--radius-base);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.layui-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
}
.layui-btn:active {
    transform: scale(0.98);
}
/* 主按钮 */
.layui-btn-normal, .layui-btn-primary:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(74, 184, 255, 0.3);
}
.layui-btn-danger {
    background-color: var(--color-danger) !important;
    box-shadow: 0 4px 10px rgba(248, 114, 114, 0.3);
}
.layui-btn-xs { height: 26px; line-height: 26px; border-radius: 6px; }

/* 表格 (Table) */
.layui-table, .layui-table-view {
    background-color: var(--bg-card) !important;
    color: var(--text-secondary);
    border-radius: var(--radius-base);
    border: 1px solid var(--border-color);
}
.layui-table thead tr, .layui-table-header {
    background-color: rgba(0,0,0,0.2) !important; /* 深色表头 */
    color: var(--text-main);
    font-weight: 600;
}
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table-box {
    border-color: var(--border-color) !important;
}
.layui-table-hover, .layui-table-click, .layui-table-tbody tr:hover {
    background-color: rgba(255,255,255,0.03) !important;
}
/* 修复表格内容行背景 */
.layui-table tbody tr {
    background-color: transparent !important;
}
/* 斑马纹 */
.layui-table[lay-even] tr:nth-child(even) {
    background-color: rgba(255,255,255,0.02) !important;
}
/* 分页条 */
.layui-laypage span, .layui-laypage a {
    background-color: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
    border-radius: 6px;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: var(--color-primary);
    border-radius: 6px;
}

/* 表单 (Form) */
.layui-input, .layui-select, .layui-textarea {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base);
    color: var(--text-main);
    transition: all 0.3s;
}
.layui-input:focus, .layui-textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(74, 184, 255, 0.1);
}
.layui-form-select dl {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-base);
}
.layui-form-select dl dd { color: var(--text-secondary); }
.layui-form-select dl dd:hover { background-color: rgba(255,255,255,0.05); }
.layui-form-select dl dd.layui-this { background-color: var(--color-primary); color: #fff; }

/* 弹窗 (Layer) */
.layui-layer {
    background-color: var(--bg-card) !important;
    box-shadow: var(--shadow-base) !important;
    border-radius: var(--radius-base) !important;
    border: 1px solid var(--border-color) !important;
}
.layui-layer-title {
    background-color: transparent !important;
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.layui-layer-content {
    color: var(--text-secondary) !important;
}
.layui-layer-btn {
    background-color: transparent !important;
    border-top: 1px solid var(--border-color);
}

/* 徽章 (Badge) */
.layui-badge { border-radius: 4px; }
.layui-bg-blue { background-color: rgba(74, 184, 255, 0.15) !important; color: var(--color-primary) !important; border: 1px solid rgba(74, 184, 255, 0.3); }
.layui-bg-green { background-color: rgba(54, 211, 153, 0.15) !important; color: var(--color-success) !important; border: 1px solid rgba(54, 211, 153, 0.3); }

/* 文字排版 */
h1, h2, h3, h4, h5, h6 { color: var(--text-main); }
.text-muted { color: var(--text-muted); }