/* 整体审视后的交互样式：字号层级在workbench统一，此处只维护可达性与阅读布局。 */
.filter-hint {
  color: var(--muted);
  font-size: 12px;
  margin-top: 12px;
}
.filter-panel .form-error:empty {
  display: none;
}
.filter-panel .form-error {
  margin-top: 10px;
}
[aria-invalid="true"] {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 2px var(--red-soft);
}
.form-error:focus {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}
.log-output:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
}
.table-scroll {
  isolation: isolate;
}
.modal-backdrop {
  grid-template-columns: minmax(0, 1fr);
}
.modal {
  width: min(510px, 100%);
  min-width: 0;
  justify-self: center;
}
/* 数据列横向滚动时操作仍可见，避免把编辑和删除藏在桌面/手机的表格边缘。 */
.table-scroll th.actions,
.table-scroll td.actions {
  position: sticky;
  right: 0;
  z-index: 1;
  min-width: 138px;
  background: var(--paper);
  box-shadow: -1px 0 0 var(--line);
}
.table-scroll thead th.actions {
  background: var(--canvas);
}
.table-scroll tr:hover td.actions {
  background: var(--hover);
}
.system-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.system-settings .detail-list > div {
  align-items: center;
  gap: 16px;
}
.system-settings .detail-list dt {
  min-width: 0;
  flex: 1;
  color: var(--ink);
}
.system-settings .config-key {
  display: block;
  margin-top: 4px;
  font-size: 12px !important;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.system-settings .detail-list dd {
  flex: 0 1 45%;
}
.system-settings .detail-wide {
  flex-wrap: wrap;
}
.system-settings .detail-wide dt {
  flex-basis: 100%;
}
.system-settings .detail-wide dd {
  flex-basis: 100%;
  max-width: 100%;
  text-align: left;
}
.settings-panel > h2 {
  display: flex;
  align-items: center;
  gap: 7px;
}
.settings-form input {
  font-size: 14px;
}
.badge {
  font-size: 12px;
}
.chart-legend,
.chart-foot,
.panel-footer,
.field-help,
.data-note {
  line-height: 1.7;
}

@media (max-width: 900px) {
  .system-settings {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  /* 手机输入使用16px防止系统聚焦缩放，按钮与导航保留至少44px触达高度。 */
  input,
  select,
  .settings-form input,
  .modal-body input,
  .modal-body select,
  .custom-range input,
  .filter-panel select,
  .search-input input,
  .logs-toolbar select,
  .logs-toolbar input[type="search"],
  .login-form input,
  #login-form input {
    font-size: 16px;
  }
  .button,
  .icon-button,
  .icon-button.small,
  .period-group button,
  .sidebar nav a,
  .theme-toggle,
  .account-link,
  .text-button,
  .name-link {
    min-height: 44px;
  }
  .button,
  .text-button,
  .sidebar nav a,
  .period-group button {
    font-size: 13px;
  }
  .icon-button,
  .icon-button.small {
    min-width: 44px;
  }
  .theme-toggle {
    min-width: 44px;
  }
  .topbar {
    gap: 8px;
  }
  .topbar-actions {
    gap: 4px;
  }
  .topbar .brand {
    gap: 7px;
  }
  .topbar .brand-mark {
    width: 28px;
    height: 28px;
  }
  .topbar .brand {
    font-size: 16px;
  }
  .topbar #logout {
    padding: 6px;
    min-width: 44px;
  }
  .topbar #logout span {
    display: none;
  }
  .table-scroll th.actions,
  .table-scroll td.actions {
    min-width: 154px;
  }
  .modal {
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
  }
  .modal-body input,
  .modal-body select,
  .settings-form input,
  .filter-panel select,
  .custom-range input,
  .logs-toolbar select,
  .logs-toolbar input[type="search"] {
    min-height: 44px;
  }
  .modal form {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .modal-body {
    overflow-y: auto;
  }
  .modal footer {
    flex-shrink: 0;
  }
  .logs-toolbar {
    align-items: stretch;
  }
  .logs-toolbar label:first-child {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .logs-toolbar select {
    width: 100%;
    max-width: none;
  }
  .logs-toolbar input[type="search"] {
    flex: 1;
    min-width: 0;
  }
  .settings-form .form-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.table-scroll:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.table-scroll-hint {
  display: none;
}
.panel-footer:has(.table-scroll-hint) {
  display: block;
}
.panel:has(.table-scroll[data-overflow="true"]) .table-scroll-hint {
  display: block;
  margin-bottom: 4px;
}
/* 用户范围以身份控件呈现；弹层可搜索，普通用户只显示本人。 */
.scope-banner { display:flex; align-items:center; gap:16px; margin:0 0 24px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); font-size:13px; min-width:0; }
.scope-picker { position:relative; flex:0 1 300px; min-width:190px; }
.scope-trigger { display:flex; align-items:center; gap:11px; width:100%; padding:7px 10px; border:1px solid transparent; border-radius:8px; background:var(--canvas); text-align:left; min-height:50px; }
.scope-trigger:hover,.scope-trigger[aria-expanded="true"] { border-color:var(--blue); background:var(--blue-soft); }
.scope-avatar { width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:var(--blue-soft); color:var(--blue); font-size:14px; font-weight:600; flex-shrink:0; }
.scope-avatar svg { width:18px; height:18px; }
.scope-identity { flex:1; min-width:0; }
.scope-kicker { display:block; color:var(--muted); font-size:11px; letter-spacing:.5px; line-height:1.5; }
.scope-identity strong,.scope-personal strong { display:block; font-weight:600; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.scope-chevron { width:15px; height:15px; color:var(--muted); transition:transform .16s ease; }
.scope-trigger[aria-expanded="true"] .scope-chevron { transform:rotate(180deg); }
.scope-description { color:var(--muted); font-size:12px; flex:1; min-width:0; overflow-wrap:anywhere; }
.scope-manage { display:inline-flex; gap:6px; align-items:center; white-space:nowrap; font-size:12px; }
.scope-manage svg { width:14px; height:14px; }
.scope-popover { position:absolute; top:calc(100% + 9px); left:0; width:360px; max-width:calc(100vw - 64px); z-index:12; border:1px solid var(--line); border-radius:12px; background:var(--paper); box-shadow:var(--shadow); padding:10px; }
.scope-popover[hidden] { display:none; }
.scope-search { display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid var(--line); border-radius:7px; background:var(--canvas); }
.scope-search:focus-within { border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-soft); }
.scope-search svg { width:15px; height:15px; color:var(--muted); }
.scope-search input { width:100%; min-width:0; height:38px; border:0!important; background:transparent; color:var(--ink); padding:0; box-shadow:none!important; font-size:13px; }
.scope-options { margin-top:8px; max-height:300px; overflow:auto; overscroll-behavior:contain; }
.scope-option { display:flex; align-items:center; gap:10px; width:100%; border:0; border-radius:7px; background:transparent; text-align:left; padding:10px; min-height:58px; }
.scope-option > span:nth-child(2) { flex:1; min-width:0; }
.scope-option strong { display:block; font-size:13px; font-weight:550; overflow-wrap:anywhere; }
.scope-option small { display:block; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.scope-option:hover { background:var(--hover); }
.scope-option.selected { background:var(--blue-soft); }
.scope-option > svg { width:16px; height:16px; color:var(--blue); }
.scope-popover-foot { font-size:11px; color:var(--muted); padding:10px 8px 2px; border-top:1px solid var(--line); margin-top:8px; }
.scope-deleted { font-size:10px; font-weight:400; color:var(--muted); background:var(--hover); border-radius:4px; padding:2px 4px; }
.scope-no-match { text-align:center; padding:10px; font-size:12px; color:var(--muted); }
.scope-personal { padding:14px 20px; }
[data-admin][hidden] { display:none!important; }
/* 轻量反馈用于操作和导航，不对周期数据刷新执行整页入场动画。 */
.button,.icon-button,.sidebar nav a,.scope-trigger,.scope-option,.text-button { transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease; }
.button:active { transform:translateY(1px); }
.sidebar nav a.active { box-shadow:inset 3px 0 0 var(--blue); }
.panel { border-radius:12px; }
.number,[data-metric],.stat-value { font-variant-numeric:tabular-nums; }
@media(max-width:600px) {
  .scope-banner { gap:10px; padding:10px; flex-wrap:wrap; }
  .scope-picker { flex:1; min-width:0; }
  .scope-description { flex-basis:100%; order:3; padding:0 4px; }
  .scope-manage { padding:0 4px; }
  .scope-popover { max-width:calc(100vw - 60px); }
  .scope-search input { height:44px; font-size:16px; }
  .scope-personal .scope-description { padding:0; }
  .scope-personal .badge { margin-left:auto; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; transition:none!important; } .button:active { transform:none; } }

/* 用户管理的动作分组与遮蔽密码输入，共用现有主题和焦点样式。 */
.user-toolbar-meta { display:flex; align-items:center; gap:10px; }
.user-toolbar-meta .icon-button { width:32px; height:32px; border:1px solid var(--line); }
.user-toolbar-meta .icon-button:hover { border-color:var(--blue); color:var(--blue); }
.users-panel th, .users-panel td { padding-left:14px; padding-right:14px; }
.user-actions { display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap; min-width:260px; }
.login-state { display:flex; align-items:center; gap:6px; }
.login-state span { width:6px; height:6px; border-radius:50%; background:currentColor; }
.login-state.enabled { color:var(--green); }
.login-state.disabled { color:var(--muted); }
.password-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.password-heading strong { font-size:13px; }
.password-heading .text-button { display:flex; align-items:center; gap:6px; }
.password-heading svg { width:14px; height:14px; }
.password-entry { display:flex; align-items:center; position:relative; }
.password-entry input { padding-right:48px; }
.password-entry .icon-button { position:absolute; right:5px; width:36px; height:36px; }
.password-status { display:block; line-height:1.6; }
@media (max-width:600px) { .user-actions { gap:8px; } .user-actions .text-button { min-height:40px; } }

.password-field { margin-bottom:17px; }
.modal-body .password-heading label { margin:0; }
.modal-body .field-help { display:block; margin-top:4px; font-weight:400; }
.password-status { font-size:12px; }

/* 中窄屏以卡片完整展示账户，避免固定操作列遮挡统计和登录时间。 */
.user-cards { display:none; }
/* 所有业务表共用分页区；计数与页码在窄屏自然换行。 */
.table-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; padding:12px 20px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.panel[data-page-section] { scroll-margin-top:76px; }
.page-summary { font-variant-numeric:tabular-nums; }
.page-controls,.page-size,.page-buttons,.page-jump,.page-jump label { display:flex; align-items:center; gap:7px; }
.page-controls { margin-left:auto; flex-wrap:wrap; gap:8px 14px; }
.table-pagination select,.page-jump input { height:34px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); font-size:13px; }
.table-pagination select { min-width:58px; padding:4px 7px; }
.page-jump input { width:60px; padding:4px 7px; font-variant-numeric:tabular-nums; }
.page-jump .button { min-height:34px; }
.page-buttons .icon-button { width:34px; height:34px; border:1px solid var(--line); }
.page-buttons .icon-button svg { width:15px; height:15px; }
.page-buttons .icon-button:disabled { opacity:.4; cursor:not-allowed; background:transparent; }
.page-position { min-width:78px; text-align:center; white-space:nowrap; color:var(--ink); font-variant-numeric:tabular-nums; }
.table-pagination:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
@media (max-width:1100px) {
  .users-panel .table-scroll { display:none; }
  .user-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .user-card { display:flex; flex-direction:column; padding:18px 16px; border-top:1px solid var(--line); }
  .user-card:nth-child(odd) { border-right:1px solid var(--line); }
  .user-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .user-card h2 { font-size:15px; margin:0 0 4px; overflow-wrap:anywhere; }
  .user-card small { font-size:12px; overflow-wrap:anywhere; }
  .user-card .login-state { margin-top:10px; font-size:12px; }
  .user-card dl { display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; margin:18px 0; }
  .user-card dt { color:var(--muted); font-size:11px; margin-bottom:5px; }
  .user-card dd { margin:0; font-size:12px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  .user-card footer { border-top:1px solid var(--line); padding-top:10px; margin-top:auto; }
  .user-card .user-actions { min-width:0; gap:4px 14px; justify-content:flex-start; }
  .user-card .user-actions .icon-button { margin-left:auto; }
}
@media (max-width:860px) {
  .user-cards { grid-template-columns:minmax(0,1fr); }
  .user-card:nth-child(odd) { border-right:0; }
}
@media (max-width:600px) {
  .panel[data-page-section] { scroll-margin-top:124px; }
  .table-pagination { padding:12px 16px; }
  .page-controls { width:100%; margin-left:0; justify-content:space-between; }
  .page-buttons { width:100%; justify-content:space-between; }
  .page-buttons .icon-button { width:44px; height:44px; }
  .table-pagination select,.page-jump input { height:44px; font-size:16px; }
  .page-jump .button { min-height:44px; }
}