:root {
  /* 主数据治理台 design tokens (人与组织 admin-ui) */
  --lay-primary: #5d87ff;
  --lay-primary-soft: rgba(93, 135, 255, 0.18);
  --lay-accent: #18a675;
  --lay-red: #e45a67;
  --lay-orange: #e58a26;
  --lay-blue: #1e9fff;
  --lay-black: #191a23;
  --lay-gray-100: #fafafa;
  --lay-gray-200: #f7f7f7;
  --lay-gray-300: #e8eaf0;
  --lay-gray-400: #d1d1d1;
  --lay-gray-700: #8a8e9d;
  --lay-gray-800: #777777;
  --lay-gray-900: #2b2e3f;
  --lay-border: var(--lay-gray-300);
  --lay-border-accent: var(--lay-gray-400);
  --lay-radius: 8px;
  --lay-shadow: 0 1px 2px 0 rgba(31, 35, 50, 0.05);
  --lay-panel-shadow: 0 1px 4px rgba(31, 35, 50, 0.06);
  --line: #e8eaf0;
  --text: #2b2e3f;
  --radius: 8px;
  --teal: #5d87ff;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: #2b2e3f;
  background: #f5f7fa;
  line-height: 1.6;
}

* { box-sizing: border-box; }

body { margin: 0; }

/* Shell: fixed dark sidebar + white top bar (主数据治理台 style) */
.shell { display: flex; min-height: 100vh; }
.side-nav {
  flex: 0 0 236px;
  background: var(--lay-black);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  color: #b8bac3;
  border-right: 1px solid rgba(255,255,255,.04);
}
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top-bar {
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--lay-border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.top-spacer { flex: 1; }
.crumb { font-size: 13px; color: var(--lay-gray-700); }
.crumb b { color: #4a4e60; font-weight: 550; }
.user-chip { display: flex; align-items: center; gap: 9px; padding-left: 10px; border-left: 1px solid var(--lay-border); }
.user-chip > div { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: #496fcf; border-radius: 7px; font-size: 12px; }
.user-chip > span { display: flex; flex-direction: column; min-width: 0; }
.user-chip strong { font-size: 12px; font-weight: 600; }
.user-chip small { max-width: 140px; margin-top: 2px; overflow: hidden; color: var(--lay-gray-700); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

/* Sidebar brand + grouped nav */
.side-brand {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  background: var(--lay-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(93, 135, 255, 0.28);
}
.brand-title { font-size: 16px; font-weight: 650; color: #fff; }
.brand-sub { font-size: 10px; letter-spacing: .9px; color: #777b8b; font-weight: 600; }
.side-nav > nav { display: block; padding: 12px; }
.nav-group {
  font-size: 11px;
  color: #747786;
  padding: 8px 12px 0;
  margin-top: 12px;
  height: 28px;
  white-space: nowrap;
}
.nav-group:first-child { margin-top: 0; }
.side-nav nav button {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  border-radius: 7px;
  height: 44px;
  line-height: 44px;
  padding: 0 12px;
  margin-bottom: 4px;
  text-align: left;
  font-size: 14px;
  color: #b8bac3;
  background: none;
  position: relative;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.side-nav nav button::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #858895;
  margin-right: 10px;
}
.side-nav nav button:hover { color: #f1f2f4; background: rgba(255,255,255,.055); }
.side-nav nav button.selected {
  background: var(--lay-primary-soft);
  color: #fff;
}
.side-nav nav button.selected::after {
  content: "";
  position: absolute;
  left: -12px;
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: #7b9cff;
}
.side-nav nav button.selected::before { background: #7b9cff; }
.side-nav nav.area-nav { display: block; padding: 0 12px 4px; margin-top: -2px; }
.side-nav nav.area-nav button { padding-left: 28px; height: 34px; line-height: 34px; font-size: 12px; color: rgba(255,255,255,.55); border-radius: 6px; margin-bottom: 2px; }
.side-nav nav.area-nav button::before { width: 4px; height: 4px; }
.side-nav nav.area-nav button.selected { color: #fff; }
.side-nav nav.area-nav button.selected::after { left: 0; }

h1 { font-size: 22px; margin: 0; color: #fff; font-weight: 500; letter-spacing: 1px; }
h2 { font-size: 18px; margin: 0 0 8px; font-weight: 700; color: #333; }
h3 { font-size: 15px; margin: 0 0 8px; font-weight: 700; color: #333; }
h4 { font-size: 14px; margin: 16px 0 8px; font-weight: 700; color: #333; }

.eyebrow {
  font-size: 12px;
  color: var(--lay-primary);
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
}

main { flex: 1; margin: 0; padding: 22px 24px 28px; background: #f5f7fa; }

footer {
  margin: 0 20px 24px;
  color: var(--lay-gray-700);
  font-size: 13px;
}

/* Status banner — lay-panel-window style with top accent */
#message {
  background: #fff;
  border: 1px solid var(--lay-border);
  border-top: 3px solid var(--lay-primary);
  border-radius: var(--lay-radius);
  color: var(--lay-gray-900);
  padding: 10px 15px;
  margin: 0 0 15px;
}

/* Content column under the fixed dark sidebar */
.workspace-body { display: flex; gap: 15px; align-items: flex-start; }
.workspace-main { flex: 1; min-width: 0; }

/* View panels — lay-card containers */
.workspace-main > section {
  background: #fff;
  border: 1px solid var(--lay-border);
  border-radius: var(--lay-radius);
  box-shadow: var(--lay-shadow);
  padding: 15px;
  margin: 0 0 15px;
}

/* Nested work-area panels — lay-panel */
section section {
  position: relative;
  background: #fff;
  border: 1px solid var(--lay-border);
  border-radius: var(--lay-radius);
  box-shadow: var(--lay-panel-shadow);
  color: var(--lay-gray-900);
  padding: 15px;
  margin: 15px 0;
}

section section > h3:first-child,
section section > h4:first-child {
  margin: -15px -15px 15px;
  padding: 10px 15px;
  border-bottom: 1px solid #f8f8f8;
  border-radius: var(--lay-radius) var(--lay-radius) 0 0;
}

/* Controls — lay-input / lay-btn metrics */
button, input, select, textarea {
  font: inherit;
  border: 1px solid var(--lay-border);
  border-radius: var(--lay-radius);
  color: rgba(0, 0, 0, 0.85);
  background: #fff;
  outline: 0;
}

input, select {
  height: 38px;
  line-height: 1.3;
  padding: 0 10px;
  min-width: 0;
  max-width: 100%;
}

select[multiple] { height: auto; min-height: 120px; padding: 6px 10px; }

textarea { padding: 6px 10px; min-height: 100px; max-width: 100%; resize: vertical; line-height: 20px; }

input:hover, textarea:hover { border-color: var(--lay-border-accent); }
input:focus, select:focus, textarea:focus {
  border-color: var(--lay-accent);
  box-shadow: 0 0 0 3px rgba(22, 183, 119, 0.08);
}
input[disabled], textarea[disabled] { background: var(--lay-gray-100); }

/* Buttons — lay-btn (default ghost like lay-btn-primary) */
button {
  display: inline-block;
  height: 38px;
  line-height: 36px;
  padding: 0 18px;
  border-color: var(--lay-border-accent);
  background: none;
  color: var(--lay-gray-900);
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: border-color .2s, color .2s, opacity .2s;
}
button:hover { border-color: var(--lay-primary); color: #333; }
button:disabled {
  border-color: var(--lay-border) !important;
  background: #fbfbfb !important;
  color: var(--lay-gray-400) !important;
  cursor: not-allowed;
}

/* Primary actions — solid primary */
form button:not([type]), #login {
  background: var(--lay-primary);
  border-color: transparent;
  color: #fff;
}
form button:not([type]):hover, #login:hover { opacity: .8; color: #fff; }
#logout { color: var(--lay-gray-700); border-color: var(--lay-border-accent); background: #fff; }
#logout:hover { border-color: var(--lay-primary); color: var(--lay-primary); }

label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #5f5f5f; }

/* Forms — lay-form item spacing */
form, .toolbar, nav { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
form {
  margin: 15px 0;
  padding: 15px;
  background: var(--lay-gray-100);
  border: 1px solid var(--lay-border);
  border-radius: var(--lay-radius);
}
form label { flex: 1; min-width: 160px; }
.toolbar label { min-width: 200px; }
.toolbar { align-items: center; }

/* Top-level workspace filter bar */
#workspace > .toolbar {
  background: #fff;
  border: 1px solid var(--lay-border);
  border-radius: var(--lay-radius);
  box-shadow: var(--lay-shadow);
  padding: 10px 15px;
  margin: 0 0 15px;
}

/* Sidebar menu — lay-nav-tree dark vertical nav */
/* legacy sidebar rules removed — see .side-nav above */

/* Cards — lay-card */
.card {
  padding: 10px 15px;
  margin: 0 0 15px;
  border: 1px solid var(--lay-border);
  border-radius: var(--lay-radius);
  overflow-wrap: anywhere;
  background: #fff;
  box-shadow: var(--lay-shadow);
}
.card h3 {
  margin: -10px -15px 10px;
  padding: 10px 15px;
  border-bottom: 1px solid #f8f8f8;
  font-size: 14px;
  font-weight: 700;
  color: #333;
}
.card > button {
  margin: 8px 10px 0 0;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.muted { color: var(--lay-gray-800); font-size: 14px; }

/* Badge — lay-badge-rim outline style */
.badge {
  display: inline-block;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  border: 1px solid var(--lay-border);
  border-radius: var(--lay-radius);
  background: #fff;
  color: var(--lay-gray-900);
  font-size: 12px;
  margin-right: 8px;
}

.warning {
  background: rgba(255, 184, 0, 0.08);
  border: 1px solid rgba(255, 184, 0, 0.35);
  padding: 10px 15px;
  border-radius: var(--lay-radius);
  color: #8a6d00;
}

/* Expandable blocks — lay-collapse */
details {
  margin: 12px 0;
  border: 1px solid var(--lay-border);
  border-radius: var(--lay-radius);
  background: #fff;
}
details > summary {
  cursor: pointer;
  padding: 0 15px;
  height: 42px;
  line-height: 42px;
  background: var(--lay-gray-100);
  color: #333;
  font-size: 14px;
}
details[open] > summary { border-bottom: 1px solid var(--lay-border); }
details > *:not(summary) { margin-left: 15px; margin-right: 15px; }
details > *:last-child:not(summary) { margin-bottom: 12px; }

.pager { display: flex; gap: 12px; align-items: center; margin: 12px 0; }
.pager span { color: var(--lay-gray-700); font-size: 13px; }

[hidden] { display: none !important; }

@media (max-width: 600px) {
  .shell { display: block; }
  .side-nav { position: static; height: auto; width: 100%; }
  .side-nav > nav { display: flex; flex-wrap: wrap; padding: 4px 8px; }
  .side-nav nav button { width: auto; padding: 0 12px; }
  .top-bar { padding: 0 12px; }
  main { padding: 0 12px; }
  .workspace-body { display: block; }
  .workspace-main > section { padding: 12px; }
  section section { padding: 12px; }
  section section > h3:first-child,
  section section > h4:first-child { margin: -12px -12px 12px; }
  .toolbar label { min-width: 0; flex: 1; flex-basis: 100%; }
  form label { min-width: 100%; flex-basis: 100%; }
}

/* 人员/权限运营视图：左列表右详情双栏、表格与权限组块 */
.split { display: flex; gap: 16px; align-items: flex-start; }
.split-side { flex: 0 0 300px; min-width: 0; }
.split-main { flex: 1; min-width: 0; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 8px 10px; border-bottom: 1px solid var(--lay-border); text-align: left; }
.table thead th { color: #666; font-weight: 600; background: #fafafa; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: #f5f9fa; }
.table tbody tr.selected { background: #e6f2f3; outline: 1px solid var(--lay-primary, #16baaa); }
.table tbody tr.primary td:first-child { font-weight: 600; }
.authz-table tbody tr { cursor: default; }
.app-block { border: 1px solid var(--lay-border); border-radius: var(--lay-radius); padding: 12px; margin-bottom: 14px; }
.app-block > h4 { margin: 0 0 10px; }
#person-detail .card { margin-bottom: 12px; }
.positions h4 { margin: 4px 0 8px; }
@media (max-width: 600px) {
  .split { display: block; }
  .split-side { margin-bottom: 12px; }
}

/* 人员/权限视图细节统一 */
#persons > .toolbar, #authorizations > .toolbar {
  background: var(--lay-gray-100);
  border: 1px solid var(--lay-border);
  border-radius: var(--lay-radius);
  padding: 12px 15px;
  margin-bottom: 15px;
}
#persons > .toolbar label, #authorizations > .toolbar label { flex: 1; min-width: 220px; }
#persons-search, #authz-search, #authz-submit {
  background: var(--lay-primary);
  border-color: transparent;
  color: #fff;
}
#persons-search:hover, #authz-search:hover, #authz-submit:hover { opacity: .8; color: #fff; }
.split-side, .split-main {
  background: #fff;
  border: 1px solid var(--lay-border);
  border-radius: var(--lay-radius);
  padding: 15px;
}
.split-main > h3 { margin-top: 0; }
#authz-panel > .toolbar {
  background: var(--lay-gray-100);
  border: 1px solid var(--lay-border);
  border-radius: var(--lay-radius);
  padding: 12px 15px;
  margin-top: 15px;
}
#authz-panel > .toolbar label { min-width: 160px; flex: 1; }

/* 双栏等高 + 栏内工具栏 */
.split { min-height: 60vh; }
.split-side, .split-main { display: flex; flex-direction: column; }
.split-side > .toolbar, .split-main > .toolbar {
  background: none; border: none; padding: 0; margin: 0 0 12px;
}
.split-side > .toolbar label { min-width: 0; flex: 1; }

/* 权限表格中已授权高亮显示 */
#authz-grid table tr.has-grant { background: #e6f7f3; }
#authz-grid input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); }

/* 金蝶风格工具栏 / 快速过滤 / 数据网格 / 页脚 */
.kd-toolbar {
  display: flex; gap: 2px; align-items: center;
  padding: 3px 4px; margin-bottom: 0;
  background: #f5f7fa; border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.kd-toolbar button {
  padding: 3px 14px; font-size: 12px;
  background: transparent; border: 1px solid transparent;
  color: var(--text); box-shadow: none;
}
.kd-toolbar button:hover { background: #e3edf7; border-color: #c6d6e6; }
.kd-toolbar button:first-child { color: #5d87ff; font-weight: 600; }
.kd-spacer { flex: 1; }
.kd-filter {
  display: flex; gap: 6px; align-items: center;
  padding: 5px 8px; font-size: 12px; color: #606266;
  background: #fff; border: 1px solid var(--line); margin-bottom: 0;
}
.kd-filter input, .kd-filter select { padding: 4px 8px; font-size: 12px; width: auto; min-width: 160px; }
.kd-filter button { padding: 4px 12px; font-size: 12px; }
.kd-scroll {
  max-height: calc(100vh - 360px); min-height: 300px; overflow: auto;
  border: 1px solid var(--line); background: #fff;
}
#authz-persons.kd-scroll { max-height: calc(100vh - 320px); }
table.kd-grid { width: 100%; border-collapse: collapse; font-size: 12px; }
table.kd-grid th {
  position: sticky; top: 0; z-index: 1;
  padding: 6px 8px; background: #f5f7fa; border: 1px solid #e4e7ed;
  color: #606266; font-weight: 600; text-align: left;
}
table.kd-grid td { padding: 5px 8px; border: 1px solid #e4e7ed; color: #303133; }
table.kd-grid tbody tr:hover { background: #f2f5ff; }
table.kd-grid tbody tr.selected { background: rgba(93,135,255,.13); }
table.kd-grid td.kd-check, table.kd-grid th.kd-check { width: 28px; text-align: center; }
table.kd-grid td.kd-code { color: #5d87ff; font-family: Consolas, monospace; }
table.kd-grid td.state-granted { color: #16a34a; font-weight: 600; }
table.authz-table tbody tr { cursor: pointer; }
.kd-footer {
  display: flex; gap: 12px; align-items: center;
  padding: 4px 8px; font-size: 12px; color: #606266;
  background: #f5f7fa; border: 1px solid var(--line); border-top: none;
}
.kd-footer button {
  padding: 2px 10px; font-size: 12px;
  background: transparent; border: none; color: #5d87ff; box-shadow: none;
}
.kd-footer button:disabled { color: #c0c4cc; }
.kd-footer select { padding: 2px 4px; font-size: 12px; width: auto; display: inline-block; }
.kd-footer input[type=number] { width: 44px; padding: 2px 4px; font-size: 12px; text-align: center; display: inline-block; }
.authz-params { margin-top: 8px; padding: 8px; }
.split-side .kd-filter input[type=search] { flex: 1; min-width: 0; }