/* ========== CSS 变量 ========== */
:root {
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f0f7ff;
    --bg-sidebar: #0c1a2e;
    --bg-sidebar-hover: #142742;
    --border: #e5e8ec;
    --border-light: #f0f2f5;
    --text-primary: #1a202c;
    --text-secondary: #5a6577;
    --text-muted: #9ca3af;
    --accent: #f97316;
    --accent-hover: #ea580c;
    --accent-dim: #fff7ed;
    --accent-gradient: linear-gradient(135deg,#f97316,#ea580c);
    /* 选中态使用蓝色 */
    --checked-color: #3b82f6;
    --checked-hover: #2563eb;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --transition: all .2s cubic-bezier(.4,0,.2,1);
}

/* ========== 基础重置 ========== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; background:var(--bg-primary); color:var(--text-primary); min-height:100vh; font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:var(--accent); text-decoration:none; transition:var(--transition); } a:hover { color:var(--accent-hover); }

/* ========== 布局 ========== */
.layout { display:flex; min-height:100vh; }

/* ---------- 侧边栏 ---------- */
.sidebar { width:232px; background:var(--bg-sidebar); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100; transition:var(--transition); }
.sidebar-logo { padding:22px 20px; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; gap:10px; }
.sidebar-logo .logo-icon { width:32px; height:32px; border-radius:var(--radius); background:var(--accent-gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; flex-shrink:0; }
.sidebar-logo h1 { font-size:17px; background:var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:1px; font-weight:700; }
.sidebar-nav { flex:1; padding:12px 0; overflow-y:auto; }
.sidebar-nav::-webkit-scrollbar { width:3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:3px; }
.nav-group-title { padding:20px 24px 8px; font-size:10px; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,0.25); font-weight:600; }
.nav-item { display:flex; align-items:center; padding:9px 16px; margin:2px 12px; color:rgba(255,255,255,0.55); font-size:13.5px; font-weight:500; transition:background .15s,color .15s; border-radius:var(--radius); cursor:pointer; gap:10px; letter-spacing:0.2px; }
.nav-item:hover { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.9); }
.nav-item.active { background:rgba(249,115,22,.12); color:#fff; }
.nav-item.active .nav-icon { opacity:1; }

/* 子菜单 */
.nav-sub { list-style:none; padding:0; margin:0; }
.nav-sub > summary { cursor:pointer; outline:none; user-select:none; -webkit-user-select:none; }
.nav-sub > summary::-webkit-details-marker { display:none; }
.nav-sub > summary::marker { display:none; content:''; }
.nav-sub > summary .nav-arrow { margin-left:auto; flex-shrink:0; transition:transform .2s; color:rgba(255,255,255,0.3); display:flex;align-items:center; }
.nav-sub[open] > summary .nav-arrow { transform:rotate(90deg); color:rgba(255,255,255,0.7); }
.nav-sub-items { padding-left:8px; }
.nav-item-wrap { }
.nav-icon { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; opacity:.75; }
.nav-item.active .nav-icon { opacity:1; }
.sidebar-footer { padding:14px 20px; border-top:1px solid rgba(255,255,255,0.06); }
.sidebar-footer a { color:rgba(255,255,255,0.35); font-size:13px; transition:var(--transition); } .sidebar-footer a:hover { color:var(--danger); }

/* ---------- 主内容区 ---------- */
.main-wrap { flex:1; margin-left:232px; display:flex; flex-direction:column; min-height:100vh; }
.topbar { height:60px; background:var(--bg-secondary); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:50; box-shadow:var(--shadow-xs); }
.topbar-breadcrumb { font-size:16px; color:#1e293b; font-weight:700; display:flex; align-items:center; gap:8px }
.topbar-breadcrumb .page-title { }

/* 用户下拉 */
.topbar-user { position:relative; }
.topbar-user-btn { display:flex; align-items:center; gap:10px; padding:5px 14px 5px 6px; border-radius:var(--radius-lg); cursor:pointer; transition:var(--transition); font-size:13px; color:var(--text-secondary); background:none; border:1px solid var(--border); }
.topbar-user-btn:hover { border-color:var(--accent); background:var(--accent-dim); }
.topbar-user-btn .avatar { width:30px; height:30px; border-radius:50%; background:var(--accent-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.topbar-user-btn .avatar-img { width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid var(--border); }
.topbar-user-btn .name { color:var(--text-primary); font-weight:600; font-size:13px; }
.topbar-dropdown { display:none; position:absolute; right:0; top:calc(100% + 6px); background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); min-width:180px; z-index:300; overflow:hidden; animation:dropdownIn .15s ease; }
.topbar-dropdown.show { display:block; }
@keyframes dropdownIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.topbar-dropdown a { display:flex; align-items:center; gap:10px; padding:10px 16px; color:var(--text-secondary); font-size:13px; font-weight:500; transition:var(--transition); }
.topbar-dropdown a:hover { background:var(--accent-dim); color:var(--accent); }
.topbar-dropdown .divider { height:1px; background:var(--border-light); margin:4px 0; }
.topbar-dropdown .dd-icon { width:16px; text-align:center; opacity:.6; }

.content { flex:1; padding:28px; }

/* ========== 卡片 ========== */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); margin-bottom:24px; box-shadow:var(--shadow-sm); overflow:hidden; }
.card-header { padding:18px 24px; border-bottom:1px solid var(--border-light); display:flex; justify-content:space-between; align-items:center; background:var(--bg-card); }
.card-header h3 { font-size:15px; font-weight:600; color:var(--text-primary); letter-spacing:0.2px; }
.card-body { padding:24px; }

/* ========== 表格 ========== */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { background:#fafbfc; color:var(--text-muted); font-weight:600; text-align:left; padding:10px 16px; border-bottom:1px solid var(--border); white-space:nowrap; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; }
td { padding:12px 16px; border-bottom:1px solid var(--border-light); color:var(--text-primary); font-size:13px; }
tr { transition:var(--transition); }
tr:hover td { background:var(--bg-hover); }
tr:last-child td { border-bottom:none; }

/* ========== 标签 ========== */
.badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:600; letter-spacing:0.3px; }
.badge-success { background:#ecfdf5; color:#059669; }
.badge-danger { background:#fef2f2; color:#dc2626; }
.badge-info { background:var(--accent-dim); color:var(--accent); }
.badge-warning { background:#fffbeb; color:#d97706; }

/* ========== 按钮 ========== */
.btn { display:inline-flex; align-items:center; gap:5px; padding:7px 18px; border:1px solid var(--border); border-radius:var(--radius); font-size:13px; font-weight:500; cursor:pointer; transition:var(--transition); background:var(--bg-secondary); color:var(--text-primary); line-height:1.5; letter-spacing:0.2px; }
.btn:hover { border-color:var(--accent); color:var(--accent); box-shadow:var(--shadow-xs); }
.btn:active { transform:scale(.98); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 1px 4px rgba(59,130,246,0.3); } .btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; box-shadow:0 2px 8px rgba(59,130,246,0.4); }
.btn-success { background:var(--success); border-color:var(--success); color:#fff; }
.btn-danger { background:#fff; border-color:var(--danger); color:var(--danger); } .btn-danger:hover { background:var(--danger); color:#fff; }
.btn-sm { padding:4px 12px; font-size:12px; }
.btn-group { display:flex; gap:6px; }

/* ========== 表单 ========== */
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group.full { grid-column:1/-1; }
.form-label { font-size:13px; color:var(--text-secondary); font-weight:600; letter-spacing:0.2px; }
.form-label .req { color:var(--danger); }
.form-input { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:8px 14px; color:var(--text-primary); font-size:13px; outline:none; transition:var(--transition); font-family:inherit; }
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,0.12); }
.form-input::placeholder { color:var(--text-muted); }
select.form-input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
textarea.form-input { resize:vertical; min-height:80px; }

/* ========== 搜索栏 ========== */
.search-bar { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; align-items:center; }
.search-bar .form-input { width:200px; }

/* ========== 日期范围选择器 ========== */
.date-range-wrap { position:relative; display:inline-flex; align-items:center; }
.date-range-wrap .form-input { width:150px; min-width:0; cursor:pointer; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat right 10px center !important; padding-right:34px !important; }
.date-range-wrap .form-input[readonly] { background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat right 10px center !important; }
.date-range-sep { color:var(--text-muted); font-size:13px; margin:0 6px; user-select:none; flex-shrink:0; font-weight:500; }

/* ============================================
   Layui laydate 日期选择器微调
   ============================================ */
.layui-laydate {
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    border: 1px solid #e5e7eb !important;
}
/* 头部 - 白色背景 */
.layui-laydate-header {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-radius: 8px 8px 0 0 !important;
}
.layui-laydate-header i,
.layui-laydate-header span {
    color: #333 !important;
}
/* 年月选择文字 */
.layui-laydate-header .layui-laydate-content {
    font-weight: 600 !important;
}

/* 翻月按钮 - 用文字符号替换图标 */
.layui-laydate-header i {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
    font-style: normal !important;
    color: #666 !important;
    padding: 4px 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    /* 彻底隐藏原始图标字体 */
    font-size: 0 !important;
}
.layui-laydate-header i::before {
    font-size: 13px !important;
    font-weight: bold !important;
}
/* 上一年 */
.layui-laydate-header i.laydate-prev-y::before { content: '<<'; }
/* 上一月 */
.layui-laydate-header i.laydate-prev-m::before { content: '<'; }
/* 下一月 */
.layui-laydate-header i.laydate-next-m::before { content: '>'; }
/* 下一年 */
.layui-laydate-header i.laydate-next-y::before { content: '>>'; }

.layui-laydate-header i:hover {
    color: #f97316 !important;
    border-color: #f97316 !important;
}

/* 底部按钮区 */
.layui-laydate-footer {
    border-top: 1px solid #f0f0f0 !important;
    border-radius: 0 0 8px 8px !important;
}

/* ========== 分页 ========== */
.pag-bar { display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding-top:16px; border-top:1px solid var(--border-light); font-size:13px; color:var(--text-secondary); }
.pag-bar .pag-info { color:var(--text-muted); font-size:13px; }
.pag-bar select { border:1px solid var(--border); border-radius:var(--radius-sm); padding:3px 8px; font-size:13px; color:var(--text-primary); background:#fff; margin:0 4px; font-family:inherit; cursor:pointer; }
.pagination { display:flex; gap:4px; }
.pagination a, .pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; color:var(--text-secondary); transition:var(--transition); background:#fff; font-weight:500; }
.pagination a:hover { border-color:var(--accent); color:var(--accent); }
.pagination .active { background:var(--accent); border-color:var(--accent); color:#fff; }
.pagination .pag-dots { border:none; background:transparent; min-width:auto; padding:0 4px; color:var(--text-muted); cursor:default; font-weight:700; }
.pagination .disabled { color:var(--text-muted); opacity:.5; cursor:not-allowed; background:var(--bg); }

/* ========== 提示条 ========== */
.alert { padding:12px 18px; border-radius:var(--radius); margin-bottom:20px; font-size:13px; display:flex; justify-content:space-between; align-items:center; font-weight:500; animation:alertIn .3s ease; }
@keyframes alertIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.alert-success { background:#ecfdf5; border:1px solid #a7f3d0; color:#059669; }
.alert-danger { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; }
.alert .close { cursor:pointer; background:none; border:none; color:inherit; font-size:18px; opacity:.5; transition:var(--transition); padding:0 4px; }
.alert .close:hover { opacity:1; }

/* ========== 树形表格 ========== */
.tree-table { width:100%; border-collapse:collapse; font-size:13px; }
.tree-table th { background:#fafbfc; color:var(--text-muted); font-weight:600; text-align:left; padding:10px 16px; border-bottom:1px solid var(--border); white-space:nowrap; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; }
.tree-table td { padding:10px 16px; border-bottom:1px solid var(--border-light); color:var(--text-primary); }
.tree-table tr:hover td { background:var(--bg-hover); }

/* ========== 登录页 ========== */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#0c1a2e 0%,#1e3a5f 50%,#0c1a2e 100%); position:relative; overflow:hidden; }
.login-page::before { content:''; position:absolute; width:600px; height:600px; background:radial-gradient(circle,rgba(59,130,246,0.15) 0%,transparent 70%); top:-150px; right:-150px; animation:loginPulse 6s ease-in-out infinite; }
.login-page::after { content:''; position:absolute; width:450px; height:450px; background:radial-gradient(circle,rgba(6,182,212,0.1) 0%,transparent 70%); bottom:-100px; left:-100px; animation:loginPulse 8s ease-in-out infinite reverse; }
@keyframes loginPulse { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.2);opacity:1} }
.login-box { background:#fff; border-radius:16px; padding:48px 44px; width:420px; position:relative; z-index:1; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.login-box h2 { text-align:center; margin-bottom:4px; font-size:26px; background:var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; letter-spacing:1px; }
.login-box .login-sub { text-align:center; color:var(--text-muted); margin-bottom:32px; font-size:13px; font-weight:500; }
.login-box .form-group { margin-bottom:20px; }
.login-box .form-input { padding:10px 16px; font-size:14px; border-radius:var(--radius); }
.login-box .form-label { font-size:13px; color:var(--text-secondary); font-weight:600; margin-bottom:4px; }
.login-box .btn-primary { width:100%; justify-content:center; padding:12px; font-size:15px; margin-top:10px; border-radius:var(--radius); background:var(--accent-gradient); border:none; font-weight:600; letter-spacing:1px; box-shadow:0 4px 14px rgba(59,130,246,0.35); transition:var(--transition); }
.login-box .btn-primary:hover { box-shadow:0 6px 20px rgba(59,130,246,0.5); transform:translateY(-1px); }

/* ========== 统计卡片 ========== */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:24px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--transition); }
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent-gradient); }
.stat-card .stat-label { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; }
.stat-card .stat-value { font-size:32px; font-weight:700; background:var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-top:8px; letter-spacing:-0.5px; }

/* ========== 模态框 ========== */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,0.5); z-index:200; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal-overlay.show { display:flex; }
.modal-box { background:var(--bg-secondary); border-radius:var(--radius-lg); padding:28px; width:420px; max-width:90vw; box-shadow:var(--shadow-lg); animation:modalIn .2s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
.modal-box h3 { margin-bottom:20px; font-size:16px; font-weight:600; }
.modal-box .form-group { margin-bottom:16px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }

/* ========== 动画 ========== */
.fade-in { animation:fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ========== 选中态统一使用蓝色（checkbox / 选中项） ========== */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--checked-color) !important;
}
.perm-check:checked {
    accent-color: #3b82f6 !important;
}
/* tag--success 保持蓝色（选中标签态） */
.tag--success { background:#eff6ff !important; color:#2563eb !important; border:1px solid #bfdbfe; }
/* 状态徽章：启用=绿色，禁用=红色 */
/* 分页和行选中保持蓝色 */
.pagination .active { background:var(--accent) !important; border-color:var(--accent) !important; }
.tree-table tr.selected td,
.tree-row.selected td { background:#eff6ff !important; }