/* ============================================================
   群鸟业财 · 后台清爽化（console-clean）
   ------------------------------------------------------------
   方向：大量留白 / 弱化边框 / 卡片做减法

   三条规则，后面每条改动都从这三条来：
   1. 分组容器不再画框。原来每个 section 都是一圈 1px 边框 + 灰底，
      里面再套一圈边框的卡片，形成「卡片套卡片」；现在 section 透明，
      只有真正可点的那张卡有视觉。
   2. 边框退到近乎不可见，用留白和底色差表达层级。
   3. 字号回到可读区间：原来 9px 的副标题、8px 的备注在 1440 屏上
      几乎是噪点，不是信息。

   只消费 app.css 已有的淡色/深色主题，不改 DOM、不改 JS 逻辑。
   ============================================================ */

:root,
[data-theme="light"] {
  --cl-line: #eef0f3;        /* 卡片描边：比 --border(#e4e4e7) 更弱 */
  --cl-line-strong: #e4e8ec; /* 需要被看见的分隔线 */
  --cl-surface: #ffffff;
  --cl-gap: 12px;
}

[data-theme="dark"] {
  --cl-line: #26262a;
  --cl-line-strong: #323237;
  --cl-surface: #101012;
}

/* ---------- 1. 内容区：先把呼吸空间还回来 ---------- */

.workbench-content {
  max-width: 1600px;
  padding: 28px 36px 64px;
}

/* 原来 980px 的窄壳之外还有 1192px 的外框，两侧空转 106px；
   现在让内容自己撑开到 1160px，两侧留白由 padding 负责。 */
.workbench-app-shell {
  width: min(100%, 1160px);
  gap: 34px;
  --workbench-top-zone-h: auto;
}

/* ---------- 2. 分组容器：去掉那圈框 ---------- */

.workbench-mobile-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.workbench-function-zone,
.workbench-todo-zone {
  height: auto;
  display: flex;
  flex-direction: column;
}

/* section 头不再是一条压在框里的 40px 条，而是留白之上的一行小标题 */
.workbench-section-head {
  height: auto;
  min-height: 0;
  padding: 0 2px 16px;
}

.workbench-section-title strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.workbench-section-title span:last-child {
  font-size: 10px;
  letter-spacing: 0.08em;
}

.workbench-section-head > .mono {
  font-size: 10px;
  letter-spacing: 0.08em;
}

.workbench-conversation-zone {
  min-height: 0;
}

.workbench-conversation-zone > .workbench-section-head {
  padding: 0 2px 16px;
}

/* ---------- 3. 常用功能：从 6 个挤扁的格子变成 6 张能点的卡 ---------- */

.workbench-app-shell .workbench-quick-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: var(--cl-gap);
  padding: 0;
}

.workbench-app-shell .workbench-quick {
  height: auto;
  min-height: 88px;
  padding: 18px 20px;
  gap: 14px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  border: 1px solid var(--cl-line);
  border-radius: 12px;
  background: var(--cl-surface);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.workbench-app-shell .workbench-quick:hover,
.workbench-app-shell .workbench-quick:focus-visible {
  border-color: var(--accent);
  background: var(--cl-surface);
  box-shadow: 0 2px 14px rgba(59, 130, 246, 0.08);
}

.workbench-quick .quick-icon {
  width: 40px;
  height: 40px;
  max-width: none;
  border-radius: 10px;
  font-size: 20px;
}

.workbench-quick .quick-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.workbench-quick .quick-desc {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--fg-dim);
}

.workbench-quick > .material-symbols-rounded:not(.quick-icon) {
  font-size: 15px;
  color: var(--cl-line-strong);
  transition: color 0.16s ease;
}

.workbench-quick:hover > .material-symbols-rounded:not(.quick-icon) {
  color: var(--accent);
}

/* ---------- 4. 待办通知：两列等宽卡，不再被固定高度压扁 ---------- */

.workbench-todo-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: var(--cl-gap);
  padding: 0;
}

.workbench-todo-list .side-action {
  height: auto;
  min-height: 76px;
  padding: 16px 18px;
  gap: 12px;
  border-radius: 12px;
  border-color: var(--cl-line);
  background: var(--cl-surface);
  font-size: 13px;
  transition: border-color 0.16s ease;
}

.workbench-todo-list .side-action:hover,
.workbench-todo-list .side-action:focus-visible {
  border-color: var(--accent);
}

.side-action .side-copy b {
  font-size: 13px;
  font-weight: 600;
}

.side-action small {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
}

.side-action .material-symbols-rounded {
  font-size: 18px;
}

/* ---------- 5. 常用功能图标：一套配色，不再四种花 ---------- */

.workbench-quick .quick-icon,
.workbench-quick.gold .quick-icon,
.workbench-quick.violet .quick-icon,
.workbench-quick.green .quick-icon {
  background: rgba(59, 130, 246, 0.07);
  color: var(--accent);
}

/* 深色下 7% 的蓝底几乎等于没有，单独给一档 */
[data-theme="dark"] .workbench-quick .quick-icon,
[data-theme="dark"] .workbench-quick.gold .quick-icon,
[data-theme="dark"] .workbench-quick.violet .quick-icon,
[data-theme="dark"] .workbench-quick.green .quick-icon {
  background: rgba(59, 130, 246, 0.14);
}

/* ---------- 6. 智能会话：从整屏灰框收成两张干净的卡 ---------- */

/* 原来高度写死 calc(100vh - 106px)，内容少时下方空出半屏 */
.workbench-conversation-zone .workbench-finance-chat .chat-dispatch {
  height: auto;
  min-height: 0;
}

.workbench-app-shell .chat-layout {
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: var(--cl-gap);
  align-items: start;
}

.chat-main,
.chat-drafts {
  border: 1px solid var(--cl-line);
  border-radius: 12px;
  background: var(--cl-surface);
}

.chat-main {
  min-height: 288px;
}

.chat-messages {
  padding: 22px 22px 16px;
  gap: 18px;
}

.chat-msg .bubble {
  font-size: 13px;
  line-height: 1.7;
}

.chat-msg .msg-meta {
  font-size: 11px;
}

.chat-input-bar {
  margin: 0 14px 14px;
  padding: 12px 14px 10px;
  border-radius: 10px;
  border-color: var(--cl-line);
}

.prompt-chip {
  border-color: var(--cl-line-strong);
  border-radius: 8px;
  font-size: 12px;
  padding: 7px 12px;
}

.chat-drafts-head {
  padding: 16px 16px;
  border-bottom-color: var(--cl-line);
}

.chat-drafts-head .h-title {
  font-size: 13px;
}

/* 待办/会话两栏本来一起被拉满，卡片做减法后各自贴合内容 */
.workbench-todo-zone + .workbench-conversation-zone {
  margin-top: 0;
}

/* ---------- 7. 侧边栏与顶栏：同一套呼吸节奏 ---------- */

.sidebar {
  padding: 18px 14px 14px;
  border-right: 1px solid var(--cl-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.brand {
  padding: 2px 10px 14px;
  border-bottom: 1px solid var(--cl-line);
}

.nav {
  gap: 3px;
  margin-top: 10px;
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--cl-line-strong) transparent;
}

.nav-group {
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 12px 12px 4px;
}

.nav-item {
  gap: 12px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.sidebar-foot {
  border-top: 1px solid var(--cl-line);
  padding: 14px 8px 2px;
}

.topbar {
  padding: 16px 36px;
  border-bottom: 1px solid var(--cl-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- 8. 移动端：同一套留白，但换成可滚动的自然流 ---------- */

/* 原布局在 ≤620px 是「一屏应用」：shell 用固定 180px 网格行 + height:100%
   + overflow:hidden，卡片被压成 3 列小格子、描述和图标一律隐藏。
   清爽化后卡片要留白就必须放弃这套定高，改成正常文档流。 */
@media (max-width: 620px) {
  .workbench-content {
    padding: 16px 14px 40px;
  }

  .workbench-app-content {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: 24px;
  }

  .workbench-app-shell {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    gap: 24px;
  }

  .workbench-app-shell .workbench-quick-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 10px;
    padding: 0;
  }

  .workbench-app-shell .workbench-quick {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: 11px;
    min-height: 70px;
    padding: 12px 13px;
    text-align: left;
  }

  /* 原规则连图标一起隐藏了，图标是入口的识别锚点，这里放回来 */
  .workbench-app-shell .workbench-quick .quick-icon {
    display: grid;
    width: 36px;
    height: 36px;
    max-width: none;
    font-size: 19px;
    flex-shrink: 0;
  }

  .workbench-app-shell .workbench-quick .quick-title {
    font-size: 12.5px;
    line-height: 1.3;
    white-space: normal;
  }

  .workbench-app-shell .workbench-quick .quick-desc {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    line-height: 1.35;
  }

  .workbench-app-shell .workbench-quick > .material-symbols-rounded:not(.quick-icon) {
    display: none;
  }

  .workbench-todo-list {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 10px;
    padding: 0;
  }

  .workbench-todo-list .side-action {
    min-height: 68px;
    padding: 14px 16px;
  }

  .workbench-section-head {
    padding-bottom: 12px;
  }

  .workbench-section-title span:last-child {
    display: none;
  }

  .workbench-conversation-zone {
    height: auto;
    min-height: 0;
  }

  .workbench-app-shell .chat-main {
    min-height: 300px;
  }

  .workbench-app-shell .chat-messages {
    padding: 16px 14px 12px;
  }
}

/* ============================================================
   9. 管理页公共层
   信息中心 / 银行保险柜 / 用户与权限 / 系统设置 / 结算配置
   ------------------------------------------------------------
   这五页共用同一套积木：.panel 容器、三套各自为政的 tab
   （.tab 12px / .user-admin-tab 12px / .sc-tab 11px）、
   .settings-card、.sc-card。先把积木本身收敛，页面自然就统一了。
   ============================================================ */

/* ---------- 9.1 容器 .panel：去掉玻璃和阴影 ---------- */

.panel {
  border: 1px solid var(--cl-line);
  border-radius: 12px;
  background: var(--cl-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.panel-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--cl-line);
  gap: 14px;
}

.panel-title {
  gap: 10px;
}

.panel-body {
  padding: 22px 24px;
}

/* ---------- 9.2 三套 tab 收敛成一套 ---------- */

.tab,
.user-admin-tab,
.sc-tab {
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--cl-line);
  border-radius: 9px;
  background: var(--cl-surface);
  color: var(--fg-dim);
  font: 500 13px/1.2 var(--font-body);
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tab:hover,
.user-admin-tab:hover,
.sc-tab:hover {
  border-color: var(--accent);
  color: var(--fg);
}

.tab.active,
.user-admin-tab.active,
.sc-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 计数徽标在选中态要跟着换色，否则白底灰字看不见 */
.tab.active .cnt,
.user-admin-tab.active .cnt,
.sc-tab.active .cnt {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* tab 容器去掉外层灰框，只留一排胶囊 */
.user-admin-tabs,
.sc-tabs {
  border: 0;
  background: transparent;
  padding: 0;
  gap: 8px;
  margin-bottom: 20px;
}

.information-center .tabs {
  gap: 8px;
  margin-bottom: 4px;
}

/* ---------- 9.3 卡片类容器统一 ---------- */

.settings-card,
.sc-card {
  border: 1px solid var(--cl-line);
  border-radius: 12px;
  background: var(--cl-surface);
  box-shadow: none;
}

.sc-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--cl-line);
}

.sc-card-body {
  padding: 18px 20px;
}

/* ---------- 9.4 信息中心：表格页，行高是主要矛盾 ---------- */

/* 这一页的原始规则都挂在 .information-center 下（特异性 0,3,0），
   所以覆盖也必须带同样的前缀，否则 .tab.active 那类会被原规则压住。 */

.information-center .tabs {
  gap: 8px;
  margin-bottom: 4px;
}

.information-center .tab {
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--cl-line);
  border-radius: 9px;
  background: var(--cl-surface);
  color: var(--fg-dim);
  font: 500 13px/1.2 var(--font-body);
}

.information-center .tab:hover {
  border-color: var(--accent);
  color: var(--fg);
}

.information-center .tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.information-center .tab .cnt {
  margin-left: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: inherit;
  opacity: 0.75;
}

.information-center .tab.active .cnt {
  opacity: 1;
}

/* 二级 tab（我方主体 / 业务方主体 / 兄弟公司）——原类是 .organization-subtabs */
.organization-subtabs {
  gap: 8px;
  margin: 0 0 22px;
  padding-bottom: 0;
  border-bottom: 0;
}

.organization-subtabs button {
  min-height: 36px;
  padding: 8px 16px;
  border: 1px solid var(--cl-line);
  border-radius: 9px;
  background: var(--cl-surface);
  color: var(--fg-dim);
  font: 500 13px/1.2 var(--font-body);
}

.organization-subtabs button:hover {
  border-color: var(--accent);
  color: var(--fg);
}

.organization-subtabs button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.organization-subtabs button.active span {
  opacity: 0.9;
}

/* 表格外框：原来是一层 8px 圆角 + #f4f4f5 灰底的框，表格自己再画线 */
.info-table-wrap {
  border: 1px solid var(--cl-line);
  border-radius: 12px;
  background: var(--cl-surface);
}

/* 搜索框原来靠 margin-left:auto 推到右边，和右侧按钮组挤在一起 */
.information-center .info-search,
.information-center .partner-search {
  width: 320px;
  margin-left: 0;
}

.info-toolbar {
  justify-content: flex-start;
  gap: 12px;
  padding: 4px 0 18px;
}

.info-toolbar-actions {
  margin-left: auto;
  gap: 8px;
}

/* 表格：表头去灰底改成白底 + 一条线，行高放开 */
.information-center .md-list th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg-mute);
  background: var(--cl-surface);
  border-bottom: 1px solid var(--cl-line-strong);
  padding: 14px 14px;
}

.information-center .md-list td {
  font-size: 13px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--cl-line);
}

.information-center .md-list td > strong {
  font-size: 14.5px;
  font-weight: 600;
}

.information-center .md-list tr:hover > td {
  background: color-mix(in srgb, var(--accent) 3.5%, transparent);
}

/* sticky 操作列要跟着换底，否则滚动时是一块灰 */
.information-center .md-list:not(.is-readonly) > thead > tr > th:last-child,
.information-center .md-list:not(.is-readonly) > tbody > tr > td:last-child:not([colspan]) {
  background: var(--cl-surface);
  border-left: 1px solid var(--cl-line);
}

.information-center .md-list th:last-child {
  background: var(--cl-surface);
}

/* 工具栏：搜索和按钮组在同一行，左侧不再空一大块 */
.info-toolbar {
  gap: 12px;
  padding: 4px 0 18px;
}

.info-icon-button {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

/* 一级 tab（群鸟通用户 / 财务后台用户 / …）保持实心蓝；
   二级 tab（内部用户 / 外部用户 / …）是同一套 class，靠父容器区分层级，
   退成浅蓝底蓝字，两级才看得出谁在上面。 */
.user-admin-panel .user-admin-tabs {
  margin-bottom: 18px;
}

.user-admin-panel .user-admin-tabs .user-admin-tab {
  min-height: 34px;
  padding: 7px 14px;
  font-size: 12.5px;
}

.user-admin-panel .user-admin-tabs .user-admin-tab.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--cl-surface));
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  color: var(--accent-strong);
}

[data-theme="dark"] .user-admin-panel .user-admin-tabs .user-admin-tab.active {
  color: var(--accent-2);
}

/* ---------- 9.5 用户与权限 ---------- */

/* 表格容器 .table-wrap 是通用积木：原来 1px 边框 + #f4f4f5 灰底，
   表格再往里画一层线，看起来像嵌套的灰盒子 */
.table-wrap {
  border: 1px solid var(--cl-line);
  border-radius: 12px;
  background: var(--cl-surface);
}

.md-list thead th {
  background: var(--cl-surface);
  border-bottom: 1px solid var(--cl-line-strong);
}

.md-list tbody td {
  border-bottom: 1px solid var(--cl-line);
}

/* 空状态原来 48px 上下内距，一块空白占掉半屏 */
.empty {
  padding: 32px 20px;
  font-size: 13px;
}

.user-admin-panel {
  margin-bottom: 20px;
}

.feishu-person-avatar {
  width: 34px;
  height: 34px;
}

.pill-mini {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
}

.user-admin-panel .hint,
.user-admin-panel .text-mute {
  font-size: 12.5px;
  line-height: 1.65;
}

/* ---------- 9.6 系统设置：卡片内字段留白 ---------- */

/* 顶部 tab 原来是下划线 + 彩色圆点，和别页的胶囊 tab 是两套语言。
   这组是无 JS 的 radio 切换，选中态靠 #cfg-tab-*:checked，所以覆盖
   必须照抄 id 组合，否则特异性压不住。 */

.cfg-tab-bar {
  gap: 8px;
  border-bottom: 0;
  margin-bottom: 20px;
}

.cfg-tab-bar label {
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--cl-line);
  border-radius: 9px;
  background: var(--cl-surface);
  color: var(--fg-dim);
  font: 500 13px/1.2 var(--font-body);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cfg-tab-bar label:hover {
  border-color: var(--accent);
  color: var(--fg);
}

.cfg-tab-bar label .cfg-tab-dot {
  display: none;
}

#cfg-tab-llm:checked ~ .cfg-tab-bar label[for="cfg-tab-llm"],
#cfg-tab-syncflow:checked ~ .cfg-tab-bar label[for="cfg-tab-syncflow"],
#cfg-tab-feishu:checked ~ .cfg-tab-bar label[for="cfg-tab-feishu"],
#cfg-tab-wechat:checked ~ .cfg-tab-bar label[for="cfg-tab-wechat"],
#cfg-tab-storage:checked ~ .cfg-tab-bar label[for="cfg-tab-storage"],
#cfg-tab-help:checked ~ .cfg-tab-bar label[for="cfg-tab-help"] {
  background: var(--accent);
  border-color: var(--accent);
  border-bottom-color: var(--accent);
  color: #fff;
}

.settings-card {
  padding: 22px 24px;
}

.settings-model-grid {
  gap: 12px;
}

.settings-card .field label,
.settings-card .row2 {
  font-size: 13px;
}

.settings-card .hint {
  font-size: 12px;
  line-height: 1.65;
  color: var(--fg-mute);
}

/* 多模型角色配置那块原来是淡紫底 + 紫边，是全页唯一的异色 */
.settings-model-grid,
.settings-card .settings-model-block {
  border-color: var(--cl-line);
  background: color-mix(in srgb, var(--accent) 3%, var(--cl-surface));
  border-radius: 10px;
}

/* ---------- 9.7 结算配置：复选框卡片是信息最密的一块 ---------- */

.sc-check-grid {
  gap: 10px;
}

.sc-check {
  padding: 12px 14px;
  border-radius: 10px;
  border-color: var(--cl-line);
  background: var(--cl-surface);
  font-size: 12.5px;
  line-height: 1.5;
}

.sc-check:hover {
  border-color: var(--accent);
}

.sc-category-group {
  border-radius: 10px;
}

.sc-category-leaf-row {
  padding-top: 8px;
  padding-bottom: 8px;
}

.sc-flow-section {
  border-radius: 10px;
}

.sc-check small {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.5;
}

/* 信息中心工具栏统一样式见 app.css；沿用本文件的 --cl-* 主题变量。 */

/* ===== 报销工作台：填写方式切换按钮紧凑化 =====
   原来是「标签模式 / 列表模式」两个带全称按钮，占掉工具栏一半宽度；
   现在缩成「标签 / 预览」，图标 15px，并在窄屏只留图标。 */
.st-editor-view-switch{gap:1px;padding:2px;border-radius:7px}
.st-editor-view-switch button{gap:4px;padding:4px 7px;font:500 11px var(--font-body);border-radius:5px}
.st-editor-view-switch .material-symbols-rounded{font-size:15px}
@media (max-width:900px){
  .st-editor-view-switch .st-mode-label{display:none}
  .st-editor-view-switch button{padding:5px 6px}
}