/* =================================================================== 人员信息管理系统 · 界面样式（无外部依赖，内网可用） =================================================================== */ :root{ --bg:#f5f7fa; --panel:#fff; --line:#e5e7eb; --line-strong:#d1d5db; --text:#1f2937; --muted:#6b7280; --faint:#9ca3af; --pri:#1d4ed8; --pri-soft:#e8efff; --pri-dark:#1e40af; --ok:#0f766e; --ok-soft:#d9f2ee; --warn:#b45309; --warn-soft:#fdf0dd; --bad:#b91c1c; --bad-soft:#fee2e2; --violet:#6d28d9; --violet-soft:#ece8fd; --grey:#4b5563; --grey-soft:#eef0f3; --radius:8px; --shadow:0 1px 2px rgba(16,24,40,.06); --side-w:210px; --fs:14px; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--text); font:var(--fs)/1.65 -apple-system,"Segoe UI","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; } a{color:var(--pri);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{margin:0;font-weight:600} code,pre,.mono{font-family:"Cascadia Mono",Consolas,"Courier New",monospace} .muted{color:var(--muted)} .small{font-size:12px} .pad{padding:10px 14px} .mt{margin-top:12px} .mb{margin-bottom:10px} .empty{color:var(--faint);font-style:normal} mark{background:#fef08a;padding:0 1px;border-radius:2px} /* ---------- 布局 ---------- */ .layout{display:flex;min-height:100vh} .sidebar{ width:var(--side-w);flex:0 0 var(--side-w);background:#111827;color:#d1d5db; display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto; } .brand{display:flex;gap:9px;align-items:center;padding:14px 14px 12px;border-bottom:1px solid #1f2937} .brand .logo{font-size:20px} .brand .logo-img{height:34px;width:34px;object-fit:contain;flex:none} .brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0} .brand-text b{color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand-text small{color:#6b7280;font-size:11px} .nav{flex:1;padding:8px 6px} .nav-item,.nav-parent{ display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:6px; color:#d1d5db;font-size:13.5px;border:0;background:none;cursor:pointer;text-align:left;font-family:inherit; } .nav-item:hover,.nav-parent:hover{background:#1f2937;color:#fff;text-decoration:none} .nav-item.on,.nav-parent.on{background:var(--pri);color:#fff} .nav .ic{width:18px;text-align:center;font-style:normal;opacity:.9} .nav .chev{margin-left:auto;font-style:normal;transition:transform .15s} .nav-group.open .chev{transform:rotate(180deg)} .nav-sub{display:none;margin:2px 0 6px 22px;border-left:1px solid #374151;padding-left:8px} .nav-group.open .nav-sub{display:block} .nav-sub a{display:block;padding:6px 8px;border-radius:5px;color:#9ca3af;font-size:13px} .nav-sub a:hover{color:#fff;background:#1f2937;text-decoration:none} .nav-sub a.on{color:#fff;background:#1f2937} .side-foot{padding:10px 14px;border-top:1px solid #1f2937;font-size:11px} .scope{display:inline-block;padding:2px 8px;border-radius:99px} .scope.all{background:#1f2937;color:#93c5fd} .scope.limited{background:#3b2f0b;color:#fcd34d} .main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{ height:48px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center; gap:10px;padding:0 14px;position:sticky;top:0;z-index:20; } .topbar .crumb{color:var(--muted);font-size:13px;display:flex;gap:6px;align-items:center;min-width:0} .topbar .crumb span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar .crumb i{font-style:normal;color:var(--faint)} .top-right{margin-left:auto;display:flex;gap:6px;align-items:center} .side-toggle{border:1px solid var(--line);background:#fff;border-radius:6px;width:30px;height:30px;cursor:pointer;color:var(--muted)} .content{padding:16px;flex:1} .foot{padding:10px 16px;color:var(--faint);font-size:12px;border-top:1px solid var(--line);background:#fff;display:flex;gap:8px;align-items:center} .foot .sep{color:var(--line-strong)} body.collapsed{--side-w:56px} body.collapsed .brand-text,body.collapsed .nav span,body.collapsed .nav-sub,body.collapsed .nav .chev,body.collapsed .side-foot{display:none} body.collapsed .nav-item,body.collapsed .nav-parent{justify-content:center;padding:9px 4px} /* ---------- 面板 ---------- */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden} .panel-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap} .panel-title{font-size:15px;display:flex;align-items:baseline;gap:8px} .panel-title small{font-weight:400;color:var(--muted);font-size:12px} .panel-actions{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap} .panel-inner{padding:14px} .panel-narrow{max-width:560px} .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px} .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px} /* ---------- 按钮 ---------- */ .btn{ display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:6px;border:1px solid var(--line-strong); background:#fff;color:var(--text);font-size:13px;cursor:pointer;font-family:inherit;line-height:1.4;white-space:nowrap; } .btn:hover{background:#f9fafb;border-color:#9ca3af;text-decoration:none} .btn-primary{background:var(--pri);border-color:var(--pri);color:#fff} .btn-primary:hover{background:var(--pri-dark);border-color:var(--pri-dark)} .btn-danger{background:#fff;border-color:var(--bad);color:var(--bad)} .btn-danger:hover{background:var(--bad-soft)} .btn-ghost{border-color:transparent;color:var(--muted);background:transparent} .btn-ghost:hover{background:var(--grey-soft);color:var(--text)} .btn-ghost.on{background:var(--pri-soft);color:var(--pri-dark)} .btn-sm{padding:3px 9px;font-size:12px} .btn-block{width:100%;justify-content:center;padding:9px} .btn[disabled]{opacity:.45;cursor:not-allowed} .inline{display:inline} /* ---------- 表单 ---------- */ .field{margin-bottom:12px;min-width:0} .field>label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px} .req{color:var(--bad);margin-left:2px} .input{ width:100%;padding:7px 9px;border:1px solid var(--line-strong);border-radius:6px;background:#fff; font-size:13.5px;font-family:inherit;color:var(--text); } .input:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)} .input[readonly]{background:#f3f4f6;color:var(--muted)} /* 月/年-月 选择框被 .input 拉满整行、日历图标跑到最右不好点；收窄到紧凑可点宽度（不影响 .input-sm 小型筛选框） */ input[type=month]:not(.input-sm),input[type=date]:not(.input-sm){width:160px;max-width:100%} .input-sm{padding:4px 7px;font-size:12.5px;width:auto} .textarea{resize:vertical;min-height:56px} .input.mono{font-family:"Cascadia Mono",Consolas,monospace;letter-spacing:.3px} .has-error .input{border-color:var(--bad);background:#fff8f8} .err{color:var(--bad);font-size:12px;margin-top:3px} .help{color:var(--faint);font-size:11.5px;margin-top:3px;line-height:1.5} .check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer} .check.wide{display:flex;margin:6px 0} .check.sm{font-size:12px;color:var(--muted)} .mt28{margin-top:26px} .row-checks{display:flex;gap:18px;flex-wrap:wrap;padding:4px 0 10px} /* 自动计算字段：浅底 + 虚线边，一眼看出不用手填 */ .field.is-auto>label{color:var(--pri-dark)} .field.is-auto .input{background:#f8fafc;border-style:dashed;color:#334155} .field.is-auto select.input{appearance:auto} .tag-auto{background:var(--pri-soft);color:var(--pri-dark);border:1px solid #c7d7fe;font-size:10.5px;padding:0 5px;margin-left:4px;border-radius:3px;font-weight:600} .auto-hit{animation:autoflash .7s ease} @keyframes autoflash{0%{background:#dbeafe}100%{background:#f8fafc}} .field.is-auto.manual-left .input{background:#fff7ed;border-style:solid} .form-grid{padding:14px} .form-foot{display:flex;gap:8px;align-items:center;padding-top:10px;border-top:1px dashed var(--line);margin-top:6px;flex-wrap:wrap} .foot-tip{color:var(--faint);font-size:11.5px;margin-left:auto} .group{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px 14px;margin:0 0 12px} .group legend{font-size:13px;font-weight:600;color:var(--pri-dark);padding:0 6px;background:#fff} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 14px} .err-list{margin:4px 0 0;padding-left:18px} .err-list li{margin:2px 0} .radio-row{display:flex;flex-direction:column;gap:4px} .radio{display:flex;gap:6px;align-items:center;font-size:13px;cursor:pointer;padding:3px 6px;border-radius:5px} .radio.on{background:var(--pri-soft)} .show-pwd{font-size:12px;color:var(--muted);margin-top:5px;display:block} .captcha-row{display:flex;gap:8px;align-items:center} .captcha-row img{border:1px solid var(--line-strong);border-radius:5px;cursor:pointer} .pwd-row{display:flex;gap:8px} .pw-meter{height:4px;border-radius:2px;background:var(--line);margin-top:6px;overflow:hidden} .pw-meter i{display:block;height:100%;width:0;background:var(--bad);transition:.2s} /* ---------- 表格 ---------- */ .table-wrap{overflow-x:auto} .table{width:100%;border-collapse:collapse;font-size:13px} .table th,.table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle} .table thead th{background:#fafbfc;color:var(--muted);font-weight:600;font-size:12.5px;white-space:nowrap;position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--line)} .table tbody tr:hover{background:#f8fafc} .table.table-sm th,.table.table-sm td{padding:5px 8px;font-size:12.5px} .col-id{width:64px;color:var(--faint);font-family:Consolas,monospace} /* 操作列现在有「调整/离职/编辑/更多」四个动作，150px 会把它们挤到换行 */ .col-ops{width:214px;text-align:right;white-space:nowrap} .sortable a{color:inherit;display:inline-flex;gap:3px;align-items:center} .sort-ic{font-style:normal;color:var(--faint);font-size:11px} .num{text-align:right;font-family:Consolas,monospace} .num.zero{color:var(--faint)} .empty-state{text-align:center;color:var(--muted);padding:26px 10px!important;background:#fcfcfd} .op{font-size:12.5px;padding:2px 5px;border-radius:4px;color:var(--pri)} .op:hover{background:var(--pri-soft);text-decoration:none} .op-danger{color:var(--bad)} .op-danger:hover{background:var(--bad-soft)} .op-link{color:var(--muted)} .op.muted{color:var(--faint);cursor:default} .link-strong{font-weight:600} .cell-tags{display:flex;gap:4px;flex-wrap:wrap;max-width:320px} .summary-box summary{cursor:pointer;color:var(--muted)} .summary-box pre{white-space:pre-wrap;word-break:break-all;background:#f9fafb;border:1px solid var(--line);padding:8px;border-radius:5px;font-size:11.5px;max-height:220px;overflow:auto;margin:6px 0 0} .row-sensitive{background:#fffdf7} tr[data-id] td:first-child{white-space:nowrap} /* ---------- 标签/提示 ---------- */ .tag{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:4px;background:var(--grey-soft);color:var(--grey);font-size:11.5px} .tag i{font-style:normal;opacity:.7;font-size:10.5px} .tag-warn{background:var(--warn-soft);color:var(--warn)} .tag-ok{background:var(--ok-soft);color:var(--ok)} .tag-link{cursor:pointer} .pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11.5px;white-space:nowrap} .pill-ok{background:var(--ok-soft);color:var(--ok)} .pill-warn{background:var(--warn-soft);color:var(--warn)} .pill-bad{background:var(--bad-soft);color:var(--bad)} .pill-muted{background:var(--grey-soft);color:var(--grey)} .pill-blue{background:var(--pri-soft);color:var(--pri-dark)} .flash{padding:9px 12px;border-radius:6px;margin-bottom:10px;font-size:13px;border:1px solid transparent} .flash-success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46} .flash-error{background:var(--bad-soft);border-color:#fecaca;color:var(--bad)} .flash-warn{background:var(--warn-soft);border-color:#fde68a;color:var(--warn)} .flash-info{background:var(--pri-soft);border-color:#c7d7fe;color:var(--pri-dark)} .notice{padding:9px 12px;border-radius:6px;margin:10px 14px;font-size:12.5px;border:1px solid var(--line);background:#fafbfc} .notice-warn{background:var(--warn-soft);border-color:#fde68a;color:var(--warn)} .notice-error{background:var(--bad-soft);border-color:#fecaca;color:var(--bad)} .notice-success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46} .notice-info{background:var(--pri-soft);border-color:#c7d7fe;color:var(--pri-dark)} .notice code{background:rgba(255,255,255,.7);padding:1px 4px;border-radius:3px} .hint-box{margin:12px 14px;padding:11px 13px;background:#fbfcfe;border:1px dashed var(--line-strong);border-radius:6px;font-size:12.5px;color:var(--muted)} .hint-box ul{margin:6px 0 0;padding-left:18px} .hint-box li{margin:3px 0} .hint-box code{background:#eef2f7;padding:1px 4px;border-radius:3px;color:var(--pri-dark)} .lock{font-style:normal;font-size:11px;opacity:.75} /* ---------- 详情 ---------- */ .detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:0 16px;padding:12px 14px} .detail-block{border-bottom:1px dashed var(--line);padding-bottom:10px;margin-bottom:10px} .detail-block.wide{grid-column:1/-1} .detail-block h3{font-size:13px;color:var(--pri-dark);margin-bottom:7px;padding-bottom:4px;border-bottom:1px solid var(--line)} .detail-block h4{font-size:12.5px;color:var(--muted);margin:10px 0 5px} .kv-row{display:flex;gap:8px;padding:3px 0;border-bottom:1px dotted #f0f1f3} .kv-row dt{flex:0 0 108px;color:var(--muted);font-size:12.5px} .kv-row dd{flex:1;margin:0;min-width:0;word-break:break-all;font-size:13px} .kv{display:flex;gap:6px;font-size:12.5px} .kv .k{color:var(--muted)} .quick-strip{display:flex;gap:16px;flex-wrap:wrap;padding:10px 14px;background:#fafbfc;border-bottom:1px solid var(--line)} .quick-strip span{display:flex;flex-direction:column} .quick-strip i{font-style:normal;color:var(--faint);font-size:11px} .quick-strip b{font-size:14px} .sensitive{display:inline-flex;align-items:center;gap:6px} .sensitive .sv{word-break:break-all} .eye{border:1px solid var(--line-strong);background:#fff;border-radius:5px;padding:1px 7px;font-size:11.5px;cursor:pointer;color:var(--pri)} .eye:hover{background:var(--pri-soft)} .eye-done,.eye-off{font-size:11.5px;color:var(--faint)} .role-desc{padding:10px 14px;color:var(--muted);font-size:12.5px;border-bottom:1px solid var(--line)} /* ---------- 分页/筛选 ---------- */ .pager{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line);flex-wrap:wrap} .pager-info{color:var(--muted);font-size:12.5px} .pager-btns{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap} .pg{padding:3px 9px;border:1px solid var(--line-strong);border-radius:5px;font-size:12.5px;color:var(--text);background:#fff} .pg:hover{background:var(--grey-soft);text-decoration:none} .pg.on{background:var(--pri);border-color:var(--pri);color:#fff} .pg-dots{color:var(--faint);padding:0 3px} .filters{padding:10px 14px;border-bottom:1px solid var(--line);background:#fafbfc} .filter-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .filter-form .f-search{display:flex;gap:6px;flex:1 1 340px;min-width:250px} .filter-form .f-search .input{flex:1} .f-primary,.f-extra{display:flex;gap:8px 10px;flex-wrap:wrap;align-items:center;width:100%} .f-extra{padding:9px 10px 3px;margin-top:2px;border-top:1px dashed var(--line-strong);background:#f6f8fb;border-radius:6px} .f-extra[hidden]{display:none} .f-more{border-style:dashed;color:var(--pri-dark);background:#fff} .f-more.has-active{border-color:var(--pri);background:var(--pri-soft);font-weight:600} .f-item{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--muted);white-space:nowrap} .f-item>span{flex:none} .f-item select{max-width:150px} .f-item.f-date{gap:3px} .f-item.f-date input{width:auto} .f-item>i{font-style:normal;color:var(--faint)} .f-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px} .f-actions-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0} .f-actions-right{margin-left:auto;display:flex;gap:6px;align-items:center;flex:none} .inline-filters{padding:10px 14px;border-bottom:1px solid var(--line);background:#fafbfc} /* ---------- 工作台 ---------- */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:14px} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1px;color:inherit} .card:hover{border-color:var(--line-strong);text-decoration:none;transform:translateY(-1px);transition:.12s} .card-v{font-size:24px;font-weight:700;letter-spacing:-.5px} .card-l{font-size:12.5px;color:var(--muted)} .card-s{font-size:11.5px;color:var(--faint)} .card-blue .card-v{color:var(--pri)} .card-green .card-v{color:var(--ok)} .card-amber .card-v{color:var(--warn)} .card-red .card-v{color:var(--bad)} .card-violet .card-v{color:var(--violet)} .card-grey .card-v{color:var(--grey)} .cards-sm{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .bars{display:flex;gap:5px;align-items:flex-end;padding:14px;overflow-x:auto;min-height:120px} .bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:34px} .bar-col i{font-style:normal;font-size:10.5px;color:var(--faint);white-space:nowrap} .bar-stack{display:flex;gap:3px;align-items:flex-end;height:90px} .bar{width:11px;border-radius:2px 2px 0 0;display:block} .bar.in{background:#3b82f6} .bar.out{background:#f59e0b} .legend{display:flex;gap:14px;padding:0 14px 12px;font-size:12px;color:var(--muted)} .legend span{display:flex;align-items:center;gap:5px} .dot{width:9px;height:9px;border-radius:2px;display:inline-block} .dot.in{background:#3b82f6} .dot.out{background:#f59e0b} .list-alerts{list-style:none;margin:0;padding:6px 10px} .list-alerts li{display:flex;gap:8px;align-items:center;padding:5px 4px;border-bottom:1px dotted var(--line);font-size:12.5px;flex-wrap:wrap} .list-alerts li:last-child{border:0} .ai{color:var(--muted);font-size:12px} .dist-cols{display:grid;grid-template-columns:1fr;gap:12px;padding:12px 14px} .dist h4{font-size:12px;color:var(--muted);margin-bottom:6px} .dist-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:12px} .dn{flex:0 0 70px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .db{flex:1;height:8px;background:var(--grey-soft);border-radius:4px;overflow:hidden} .db i{display:block;height:100%;background:linear-gradient(90deg,#60a5fa,#1d4ed8)} .dv{flex:0 0 34px;text-align:right;font-family:Consolas,monospace;color:var(--muted)} .mod-chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px} .mod-chip{display:flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:12.5px} .mod-chip:hover{border-color:var(--pri);background:var(--pri-soft);text-decoration:none} .mod-chip small{color:var(--faint)} .sub-title{font-size:13px;color:var(--pri-dark);margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)} /* ---------- 角色/权限矩阵 ---------- */ .role-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px} .role-item{display:flex;flex-wrap:wrap;gap:5px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:8px 10px;cursor:pointer;font-size:12.5px} .role-item:hover{border-color:var(--line-strong)} .role-item.on{border-color:var(--pri);background:var(--pri-soft)} .role-item b{font-size:13px} .role-item code{font-size:11px;color:var(--muted)} .role-item small{flex-basis:100%;color:var(--faint);font-size:11px;line-height:1.4} .scope-tag{font-style:normal;font-size:11px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--muted)} .perm-group{margin-bottom:12px} .perm-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--line)} .perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:5px} .perm{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--line);border-radius:5px;font-size:12.5px;cursor:pointer} .perm:hover{border-color:var(--pri)} .perm.on{background:var(--pri-soft);border-color:#c7d7fe} .perm.off{opacity:.42;background:#fafafa} .perm code{margin-left:auto;font-size:10.5px;color:var(--muted)} .perm-cloud{display:flex;flex-wrap:wrap;gap:4px;padding:4px 0} .perm-cloud code,.perm-mod code{background:#eef2f7;border-radius:3px;padding:1px 5px;font-size:10.5px;color:#334155} .perm-mod{margin-bottom:6px} .perm-mod b{display:block;font-size:11.5px;color:var(--muted);margin-bottom:2px} .matrix-tools{margin-left:auto;display:flex;gap:5px} .member-list{list-style:none;margin:0;padding:0} .member-list li{display:flex;gap:7px;align-items:center;padding:4px 0;border-bottom:1px dotted var(--line);font-size:12.5px} /* ---------- 模块 ---------- */ .mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;padding:14px} .mod-card{border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:#fff} .mod-card.on{border-color:#a7f3d0;background:#f8fdfb} .mod-card.err{border-color:#fecaca;background:#fff8f8} .mod-card.discovered,.mod-card[class*=" err"]{opacity:.95} .mod-top{display:flex;gap:9px;align-items:center;margin-bottom:6px} .mod-ico{font-size:20px} .mod-name{flex:1;min-width:0} .mod-name b{display:block;font-size:14px} .mod-name code{font-size:11px;color:var(--muted)} .mod-desc{color:var(--muted);font-size:12px;margin:0 0 8px;min-height:32px} .mod-meta{list-style:none;margin:0 0 10px;padding:0;font-size:11.5px} .mod-meta li{display:flex;gap:6px;padding:2px 0;border-bottom:1px dotted var(--line)} .mod-meta i{font-style:normal;flex:0 0 66px;color:var(--faint)} .mod-meta span{flex:1;word-break:break-all;color:var(--text)} .mod-meta code{font-size:10.5px;background:#f1f5f9;padding:0 4px;border-radius:3px;margin-right:3px} .mod-meta code.ok{background:var(--ok-soft);color:var(--ok)} .mod-meta code.pending{background:var(--warn-soft);color:var(--warn)} .mod-foot{display:flex;gap:6px} .code-block{background:#0f172a;color:#e2e8f0;padding:11px;border-radius:6px;font-size:11.5px;overflow:auto;line-height:1.7} .code-area{min-height:220px;font-size:12px;line-height:1.6;tab-size:2} .scope-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px;max-height:200px;overflow:auto;border:1px solid var(--line);padding:7px;border-radius:6px} .copyable{background:#fef9c3;padding:2px 6px;border-radius:4px;font-size:13px;cursor:copy;word-break:break-all} .copyable.big{font-size:14px} .hbar-wrap{display:flex;height:10px;border-radius:3px;background:#f1f5f9;overflow:hidden;min-width:110px} .hbar{display:block;height:100%} .hbar-entry{background:#3b82f6} .hbar-leave{background:#f59e0b} .hbar-regular{background:#10b981} .hbar-transfer{background:#8b5cf6} .hbar-salary{background:#ec4899} .hbar-other{background:#94a3b8} .summary-table tfoot td{background:#fafbfc;font-weight:600} .bar-col{min-width:120px} .act{font-size:11px;background:#f1f5f9;padding:1px 5px;border-radius:3px} .reset-form,.pw-form,.user-form{padding:14px} .mod-chip i{font-style:normal} .highlight{background:#fbfcfe;border:1px solid var(--pri-soft);border-radius:6px;margin:14px} /* ---------- 登录页 ---------- */ .page-auth{background:linear-gradient(135deg,#1e3a8a 0%,#312e81 60%,#0f172a 100%);min-height:100vh} .naked{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px} .naked .flash{min-width:340px} .auth-wrap{width:100%;max-width:400px} .auth-card{background:#fff;border-radius:12px;padding:26px 24px;box-shadow:0 18px 40px rgba(2,6,23,.35)} .auth-head{text-align:center;margin-bottom:18px} .auth-logo{font-size:34px;line-height:1} .auth-logo-img{width:78px;height:78px;object-fit:contain;display:block;margin:0 auto} .auth-head h1{font-size:17px;margin:8px 0 4px} .auth-head .sub{color:var(--muted);font-size:12px;margin:0} .auth-form .btn-block{margin-top:8px} .auth-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);color:var(--faint);font-size:11.5px;text-align:center} .auth-tip{color:#cbd5e1;font-size:11.5px;text-align:center;margin-top:14px} /* ---------- 错误页 ---------- */ .page-error{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);padding:20px} .err-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 30px;max-width:520px;text-align:center;box-shadow:var(--shadow)} .err-code{font-size:46px;font-weight:800;color:var(--pri);letter-spacing:-2px;line-height:1} .err-card h1{font-size:17px;margin:6px 0 10px} .err-card p{color:var(--muted);font-size:13px;margin:0 0 8px} .err-acts{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap} .err-tip{font-size:11.5px;color:var(--faint);margin-top:12px!important} /* ---------- 表格粘性表头容器 ---------- */ /* 必须给容器一个视口内的高度上限：.table-wrap 因 overflow-x:auto 本身已是滚动容器， 若不限高则它随内容长高、由整页滚动，thead 的 position:sticky 就永远贴不住。 限高后表格区内部纵向滚动，表头固定在容器顶部。JS 会按容器实际位置精确改写内联 max-height；这里的 calc 仅作无 JS 时的保守兜底。 */ .table-wrap{max-height:calc(100vh - 190px)} .table-wrap::-webkit-scrollbar{height:8px} .table-wrap::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px} /* ---------- 移动端 ---------- */ @media (max-width:820px){ :root{--side-w:0px} .layout{flex-direction:column} .sidebar{width:100%;flex:none;height:auto;position:static} .nav{display:flex;flex-wrap:wrap;padding:6px} .nav-group{width:100%} .nav-sub{display:flex!important;flex-wrap:wrap;margin-left:0;border-left:0} .content{padding:10px} .grid,.grid-2,.grid-3,.detail-grid{grid-template-columns:1fr} .col-ops{width:auto} .topbar{padding:0 8px} .filters .f-item{flex:1 1 46%} } @media print{ .sidebar,.topbar,.foot,.panel-actions,.filters,.pager{display:none!important} .panel{border:0;box-shadow:none} body{background:#fff} } /* ---------- 行操作弹窗（离职 / 人员调整） ---------- */ .has-modal{overflow:hidden} .modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:16px} .modal[hidden]{display:none} .modal-mask{position:absolute;inset:0;background:rgba(17,24,39,.45)} .modal-box{ position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); box-shadow:0 12px 32px rgba(16,24,40,.18);width:min(520px,100%);max-height:90vh;overflow:auto; } .modal-wide .modal-box{width:min(760px,100%)} .modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)} .modal-head h3{font-size:15px} .modal-who{color:var(--muted);font-weight:400;margin-left:6px} .modal-x{border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:4px} .modal-x:hover{background:var(--grey-soft);color:var(--text)} .modal-form{padding:16px} .modal-note{margin:10px 0 0;color:var(--muted);font-size:12.5px;line-height:1.6} .modal-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)} /* 调整前后对照表 */ .adjust-grid{width:100%;border-collapse:collapse;font-size:13.5px} .adjust-grid th,.adjust-grid td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle} .adjust-grid thead th{background:var(--grey-soft);color:var(--muted);font-weight:500;font-size:12.5px} .adjust-grid tbody th{font-weight:500;white-space:nowrap} .adjust-grid .col-fld{width:104px} .adj-before{color:var(--muted);background:#fbfcfe} .adj-auto th,.adj-auto td{background:var(--pri-soft)} .adj-entity{font-weight:600;color:var(--pri-dark)} .adj-entity.is-empty{color:var(--bad);font-weight:500} .adjust-grid .input{width:100%;min-width:150px} .adjust-grid .adj-catrow th{font-weight:600} .adjust-grid .adj-catrow select{max-width:220px} .adjust-grid .adj-check{display:inline-flex;align-items:center;gap:6px} .adjust-grid input[readonly]{background:#f5f7fa;color:var(--muted)} /* ---------- 标题行的分布统计标签（如各项目人数） ---------- */ .stat-strip{ flex:1 1 auto;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end; max-height:54px;overflow-y:auto;scrollbar-width:thin; } .stat-chip{ display:inline-flex;align-items:center;gap:4px;padding:1px 8px; font-size:12px;line-height:1.65;white-space:nowrap; border:1px solid var(--line);border-radius:11px;background:#fbfcfe;color:var(--muted); } .stat-chip:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-soft);text-decoration:none} .stat-chip b{font-weight:600;color:var(--text)} .stat-chip:hover b{color:var(--pri)} /* 当前正在筛的那一项：实心高亮，再点一次即取消 */ .stat-chip.on{border-color:var(--pri);background:var(--pri);color:#fff} .stat-chip.on b{color:#fff} /* ---------- 操作列统一外观 ---------- 之前「调整/离职」是