/*
 * 利丰源内部业务系统：全站唯一的基础样式令牌。
 *
 * 页面样式只负责业务布局；字体、字号、字重、基础配色、间距和圆角从这里取值。
 * 详细规则见 docs/internal-ui-style-guide.md。
 */

/* Numeric values must only change through deliberate typing. */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* 表单里的日期/时间控件内容本身就是纯字母数字，固定用全站等宽字体。 */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  font-family: var(--ui-font-mono);
  letter-spacing: 0;
}

:root {
  color-scheme: light;

  --ui-bg: #f5f5f5;
  --ui-panel: #ffffff;
  --ui-header: #ededed;
  --ui-border: #d0d0d0;
  --ui-border-strong: #b8b8b8;
  --ui-text: #1a1a1a;
  --ui-text-muted: #555555;
  --ui-text-subtle: #888888;
  --ui-accent: #1565c0;
  --ui-accent-hover: #0d47a1;
  --ui-accent-soft: #edf5ff;
  --ui-danger: #c62828;
  --ui-danger-soft: #fbe9e9;
  --ui-success: #2e7d32;
  --ui-success-soft: #e6f4ea;
  --ui-warning: #9a6700;
  --ui-warning-soft: #fff8e8;

  /* Win10 简体中文 + Chrome：拉丁字形用 Segoe UI，汉字逐字回退到微软雅黑。 */
  --ui-font-sans:
    "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", Arial,
    sans-serif;
  /* 全站等宽字体：业务表格里的订单号、账号、日期等纯字母数字内容统一用它。 */
  --ui-font-mono: "Courier New", "Lucida Console", Menlo, monospace;
  --ui-font-size-body: 12px;
  --ui-font-size-title: 16px;
  --ui-font-weight-regular: 400;
  --ui-font-weight-semibold: 600;
  --ui-line-height: 1.5;

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-page-gutter: 16px;
  --ui-radius: 3px;
  --ui-control-height: 30px;
}

html {
  font-family: var(--ui-font-sans);
}

body,
button,
input,
select,
textarea {
  font-family: var(--ui-font-sans);
}

body {
  margin: 0;
  font-size: var(--ui-font-size-body);
  line-height: var(--ui-line-height);
  font-weight: var(--ui-font-weight-regular);
  font-variant-numeric: tabular-nums;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  font-weight: var(--ui-font-weight-semibold);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel);
}

.app-header h1 {
  margin: 0;
  font-size: var(--ui-font-size-title);
  font-weight: var(--ui-font-weight-semibold);
  white-space: nowrap;
}

.app-header h1 a {
  color: var(--ui-text);
  text-decoration: none;
}

.app-header h1 a:hover {
  text-decoration: none;
}

.head-r {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--ui-text-muted);
}

.head-r .user {
  color: var(--ui-text);
}

.head-r .role {
  margin-left: 4px;
  color: var(--ui-text-muted);
  background: #e0e0e0;
}

.head-r .role.admin {
  color: var(--ui-warning);
  background: var(--ui-warning-soft);
}

.head-r .link {
  padding: 0;
  border: 0;
  color: var(--ui-accent);
  background: none;
  cursor: pointer;
  text-decoration: underline;
}

.head-r .link:hover {
  color: var(--ui-accent-hover);
}

.workspace-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  min-height: 36px;
  padding: 0 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel);
}

.workspace-nav-divider {
  flex: 0 0 1px;
  width: 1px;
  margin: 8px 6px;
  background: var(--ui-border-strong);
}

.workspace-tab {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ui-text-muted);
  background: transparent;
  white-space: nowrap;
  text-decoration: none;
}

.workspace-nav a.workspace-tab:hover {
  color: var(--ui-accent);
  text-decoration: none;
}

.workspace-tab.active {
  border-bottom-color: var(--ui-accent);
  color: var(--ui-accent);
  font-weight: var(--ui-font-weight-semibold);
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 8px 12px;
  border-radius: var(--ui-radius);
  color: #fff;
  background: var(--ui-accent);
  transform: translateY(-150%);
  transition: transform 0.15s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .skip-link {
    transition: none;
  }
}

.ui-page-shell {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 12px var(--ui-page-gutter) 20px;
}

/*
 * 不可点击强调（状态/提醒/标签）的全站统一 pill 基线：
 * 无边框、无 hover、无手型，只靠底色与文字色表达强/弱提醒。
 * 业务页面只为各自的语义类补充颜色（如 .ma-status.expired、
 * .status-chip.overdue、.tag.warning），不要重新定义 padding/圆角，
 * 也不要让纯展示元素套用链接/按钮的边框与 hover 形制。
 */
.ma-status,
.ma-completeness,
.status-chip,
.tag,
.term-badge,
.issue-chip,
.ok-chip,
.ma-default-tag,
.readonly-badge,
.head-r .role {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: var(--ui-line-height);
  white-space: nowrap;
}

/*
 * 全站统一 hover tooltip（替代原生 title 提示）。
 * 气泡由 frontend-utils.js 惰性挂到 <body> 下，position:fixed，
 * 因此不受表格容器 overflow:hidden/auto 的裁剪。
 */
.ui-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: min(380px, calc(100vw - 16px));
  padding: 4px 8px;
  border-radius: var(--ui-radius);
  color: #fff;
  background: #2a2a2a;
  font-size: var(--ui-font-size-body);
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 90ms ease,
    visibility 0s linear 90ms;
  pointer-events: none;
}

.ui-tooltip.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 90ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .ui-tooltip,
  .ui-tooltip.show {
    transition: none;
  }
}

/*
 * UnifiedDataTable 的全站唯一主题。
 * 业务页只提供列定义、状态色和业务事件，不允许再覆盖表头、行高、单元格、
 * 筛选器、分页或分组样式。
 */
.ui-data-table.tabulator {
  width: 100%;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel);
  color: var(--ui-text);
  font-family: var(--ui-font-sans);
  font-size: var(--ui-font-size-body);
}

.ui-data-table.tabulator .tabulator-header {
  border-bottom: 1px solid var(--ui-border-strong);
  background: var(--ui-accent);
  color: #ffffff;
  font-weight: var(--ui-font-weight-regular);
}

.ui-data-table.tabulator .tabulator-header .tabulator-col {
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  background: var(--ui-accent);
}

.ui-data-table.tabulator .tabulator-col-title {
  color: #ffffff;
  font-weight: var(--ui-font-weight-regular);
}

.ui-data-table.tabulator
  .tabulator-headers
  .tabulator-col.tabulator-sortable:hover {
  background: var(--ui-accent-hover);
}

.ui-data-table.tabulator .tabulator-col-sorter .tabulator-arrow {
  border-top-color: rgba(255, 255, 255, 0.65);
  border-bottom-color: rgba(255, 255, 255, 0.65);
}

.ui-data-table.tabulator
  .tabulator-col-sorter.tabulator-col-sorter-element
  .tabulator-arrow:hover {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

.ui-data-table.tabulator .tabulator-row {
  border-bottom: 1px solid var(--ui-border);
  cursor: default;
}

/* 普通数据行没有行级点击行为；覆盖 Tabulator 的 selectable 手型提示。 */
.ui-data-table.tabulator .tabulator-row.tabulator-selectable:hover {
  cursor: default;
}

.ui-data-table.tabulator .tabulator-row.tabulator-row-even {
  background: var(--ui-panel);
}

.ui-data-table.tabulator .tabulator-row:hover {
  background: #f7f9fc;
}

.ui-data-table.tabulator .tabulator-row .tabulator-cell {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 5px 8px;
  border-right: 1px solid var(--ui-border);
  cursor: default;
  overflow-wrap: anywhere;
  white-space: normal;
}

/*
 * 铺满型宽表（fitDataGrow / fitDataFill）把列收进可用视口。保持滚动容器
 * 的横向溢出被裁掉作为最后一道防线，单元格规则用折行保留完整内容。
 * 档案/列表类表格不走这条路径，而是用下面的 ui-data-table-pack：
 * 列宽由内容决定、整表收缩靠左，内容超宽时在表格区域内横向滚动。
 */
.ui-data-table.tabulator .tabulator-tableholder {
  overflow-x: hidden !important;
}

/*
 * 内容自适应表格（配合 UnifiedDataTable 的 fitContent: true 使用）：
 * - 表格本体 display:inline-block + width:auto，宽度只跟内容走并靠左，
 *   最宽不超过容器（max-width: 100%）；
 * - 内容比容器宽时，滚动发生在表格内部，冻结列仍贴在左侧；
 * - 列宽完全由 fitDataTable 布局模式按内容测量，剩余空间不再分给任何列。
 */
.ui-data-table.tabulator.ui-data-table-pack {
  display: inline-block;
  width: auto;
  max-width: 100%;
  vertical-align: top;
}

.ui-data-table.tabulator.ui-data-table-pack .tabulator-tableholder {
  overflow-x: auto !important;
  /* 表格确实超宽时给出可见的横向滚动条（Chromium/Firefox 都会常显），
     避免系统自动隐藏滚动条时用户以为右列被裁掉。 */
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-strong) transparent;
}

.ui-data-table.tabulator.ui-data-table-pack
  .tabulator-tableholder::-webkit-scrollbar {
  height: 10px;
}

.ui-data-table.tabulator.ui-data-table-pack
  .tabulator-tableholder::-webkit-scrollbar-track {
  background: transparent;
}

.ui-data-table.tabulator.ui-data-table-pack
  .tabulator-tableholder::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 5px;
  background: var(--ui-border-strong);
  background-clip: padding-box;
}

.ui-data-table.tabulator.ui-data-table-pack
  .tabulator-tableholder::-webkit-scrollbar-thumb:hover {
  background: var(--ui-text-muted);
  background-clip: padding-box;
}

.ui-data-table.tabulator
  .tabulator-header
  .tabulator-col
  .tabulator-col-content
  .tabulator-col-title {
  overflow-wrap: anywhere;
  white-space: normal;
}

.ui-data-table.tabulator .tabulator-row .tabulator-cell > * {
  min-width: 0;
  max-width: 100%;
}

/*
 * 数据单元格一律不加粗：需要强调时只使用颜色（见 internal-ui-style-guide.md
 * 的表格规范）。这一条同时覆盖原生 <table> 数据行，防止后续在单元格里用
 * strong/b 标签重新引入加粗。
 */
table td strong,
table td b,
.ui-data-table.tabulator .tabulator-row .tabulator-cell,
.ui-data-table.tabulator .tabulator-row .tabulator-cell strong,
.ui-data-table.tabulator .tabulator-row .tabulator-cell b {
  font-weight: var(--ui-font-weight-regular);
}

.ui-data-table.tabulator .tabulator-row .tabulator-cell .ma-relation-link {
  overflow-wrap: anywhere;
  white-space: normal;
}

/*
 * 不折行列：表头用深一档底色作为暗号，hover 有解释；
 * 单元格单行显示，超出部分省略号截断。
 */
.ui-data-table.tabulator .tabulator-header .tabulator-col.ui-col-nowrap {
  background: var(--ui-accent-hover);
}

.ui-data-table.tabulator
  .tabulator-header
  .tabulator-col.ui-col-nowrap
  .tabulator-col-title {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-data-table.tabulator
  .tabulator-header
  .tabulator-col.ui-col-nowrap.tabulator-sortable:hover {
  background: #0a3470;
}

.ui-data-table.tabulator .tabulator-row .tabulator-cell.ui-col-nowrap {
  overflow: hidden;
  white-space: nowrap;
}

.ui-data-table.tabulator .tabulator-row .tabulator-cell.ui-col-nowrap > * {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.ui-data-table.tabulator
  .tabulator-row
  .tabulator-cell.ui-col-nowrap
  .ui-cell-nowrap {
  display: block;
  text-overflow: ellipsis;
}

.ui-table-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  width: max-content;
  white-space: nowrap;
}

.ui-table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  background: var(--ui-panel);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.ui-table-action .ui-icon {
  display: block;
  width: 14px;
  height: 14px;
}

.ui-table-action:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

.ui-table-action:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 1px;
}

.ui-table-action.danger {
  border-color: #d9a5a5;
  color: var(--ui-danger);
}

.ui-table-action.danger:hover {
  border-color: var(--ui-danger);
  color: var(--ui-danger);
  background: var(--ui-danger-soft);
}

/*
 * 金额单元格全站默认右对齐 + 等宽数字：
 * - Tabulator 列声明 amount: true 后由 unified-data-table.js 统一补上
 *   hozAlign、表头右对齐和 amount 类，这里兜底样式；
 * - 手写的 hozAlign: "right" 列由 unified-data-table.js 补 ui-align-right
 *   类，同样在这里处理；
 * - 手写表格的金额列在表头和数据单元格上加 .amount（或沿用的 .money）。
 * 单元格是 inline-flex，text-align 只影响文本本身，必须同时给
 * justify-content: flex-end，包含 span 等内容时才能真正贴右。
 */
.ui-data-table.tabulator .tabulator-cell.amount,
.ui-data-table.tabulator .tabulator-cell.ui-align-right {
  justify-content: flex-end;
}

.ui-data-table.tabulator .tabulator-cell.amount,
.ui-data-table.tabulator .tabulator-cell.ui-align-right,
td.amount,
td.money,
th.amount,
th.money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ui-data-table.tabulator
  .tabulator-header
  .tabulator-col.amount
  .tabulator-col-title,
.ui-data-table.tabulator
  .tabulator-header
  .tabulator-col.ui-align-right
  .tabulator-col-title {
  text-align: right;
}

.ui-data-table.tabulator .tabulator-cell.mono {
  font-family: var(--ui-font-mono);
  font-size: var(--ui-font-size-body);
  letter-spacing: 0;
}

/*
 * 表格等宽内容统一入口：
 * - .mono：手写表格 / Tabulator 列里显式标记的字段；
 * - .ma-mono：档案页沿用名；
 * - .ui-ascii-mono：frontend-utils.js 自动给“整格内容全是英文字母/数字/符号”
 *   的数据单元格打的类（含中文的单元格不打，避免中英混排割裂）。
 */
.mono,
.ma-mono,
.ui-ascii-mono {
  font-family: var(--ui-font-mono);
  letter-spacing: 0;
}

/*
 * 系统自动填充的“无值”占位符：
 * - 只有数据为 null / 空字符串等“没有值”时，渲染代码才包上本类；
 * - 用户自己录入的“—”是真实数据，保持普通正文样式，从而和系统占位区分；
 * - 等宽字体与字号沿用表格编码/账号列的 --ui-font-mono / --ui-font-size-body；
 * - 颜色取功能红（--ui-danger）：表格里出现“—”即表示该字段缺失，
 *   与正常正文的灰黑区分开，便于扫视需要补录的位置。
 * 页面和脚本只引用本类，不要各自复制字体与颜色定义。
 */
.ui-empty-mark {
  color: var(--ui-danger);
  font-family: var(--ui-font-mono);
  font-size: var(--ui-font-size-body);
  font-weight: var(--ui-font-weight-regular);
  letter-spacing: 0;
}

.ui-data-table.tabulator .tabulator-header .tabulator-calcs-holder,
.ui-data-table.tabulator
  .tabulator-header
  .tabulator-calcs-holder
  .tabulator-row,
.ui-data-table.tabulator .tabulator-row.tabulator-calcs {
  border-color: var(--ui-accent-hover) !important;
  background: var(--ui-accent) !important;
  font-weight: var(--ui-font-weight-regular);
}

.ui-data-table.tabulator .tabulator-calcs-holder .tabulator-cell {
  cursor: text;
  user-select: text;
}

.ui-data-table.tabulator
  .tabulator-header
  .tabulator-calcs-holder
  .tabulator-cell,
.ui-data-table.tabulator .tabulator-row.tabulator-calcs .tabulator-cell {
  color: #ffffff;
}

.ui-data-table.tabulator .tabulator-footer {
  border-top: 1px solid var(--ui-border-strong);
  background: var(--ui-panel);
  font-weight: var(--ui-font-weight-regular);
}

.ui-data-table.tabulator .tabulator-page.active {
  border-color: var(--ui-accent);
  color: #ffffff;
  background: var(--ui-accent);
}

.ui-data-table.tabulator .tabulator-header-filter input,
.ui-data-table.tabulator .tabulator-header-filter select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 24px;
  padding: 3px 6px;
  /* 筛选框位于蓝色表头内，业务页普遍让 input 继承 color；不显式指定时
   * 会把表头的白字带进白底输入框，打字完全看不见。这里统一盖回正文色。 */
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  background: var(--ui-panel);
  font: inherit;
}

.ui-data-table.tabulator .tabulator-header-filter input:focus,
.ui-data-table.tabulator .tabulator-header-filter select:focus {
  outline: none;
  border-color: var(--ui-accent-hover);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.ui-data-table.tabulator .tabulator-header-filter input::placeholder {
  color: var(--ui-text-subtle);
  opacity: 1;
}

.ui-data-table.tabulator .tabulator-group {
  padding: 6px 10px;
  border-bottom: 1px solid var(--ui-border);
  background: #f3f3f3;
}

.ui-data-table.tabulator .tabulator-row.tabulator-group {
  font-weight: var(--ui-font-weight-regular);
}

.ui-data-table.tabulator .tabulator-group .group-meta {
  margin-left: 8px;
  color: var(--ui-text-muted);
}

.ui-data-table.tabulator .tabulator-group.tabulator-group-level-1 {
  padding-left: 24px;
  background: #f8f8f8;
}

.ui-data-table.tabulator
  .tabulator-placeholder
  .tabulator-placeholder-contents {
  color: var(--ui-text-subtle);
  font-size: var(--ui-font-size-body);
  font-weight: var(--ui-font-weight-regular);
}

body .tabulator-edit-list {
  font-family: var(--ui-font-sans);
  font-size: var(--ui-font-size-body);
  font-weight: var(--ui-font-weight-regular);
  max-height: 320px;
}

@media (max-width: 760px) {
  :root {
    --ui-page-gutter: 12px;
  }

  .app-header,
  .workspace-nav {
    padding-left: 12px;
    padding-right: 12px;
  }
}