:root {
  --ma-blue: var(--ui-accent);
  --ma-blue-dark: var(--ui-accent-hover);
  --ma-blue-soft: var(--ui-accent-soft);
  --ma-green: var(--ui-success);
  --ma-green-soft: var(--ui-success-soft);
  --ma-red: var(--ui-danger);
  --ma-red-soft: var(--ui-danger-soft);
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ma-blue);
  outline-offset: 1px;
}

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

.ma-dialog-head h2 {
  margin: 0;
  font-size: var(--ui-font-size-title);
  font-weight: var(--ui-font-weight-semibold);
  line-height: 1.25;
}

.ma-btn {
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--panel);
  cursor: pointer;
}

.ma-btn:hover {
  border-color: var(--ma-blue);
  color: var(--ma-blue);
}

.ma-btn.primary {
  border-color: var(--ma-blue);
  color: #fff;
  background: var(--ma-blue);
}

.ma-btn.primary:hover {
  background: var(--ma-blue-dark);
}

.ma-btn.danger {
  border-color: #d9a5a5;
  color: var(--ma-red);
}

.ma-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ma-form-section label {
  display: grid;
  gap: 4px;
  color: var(--muted);
}

.ma-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 0 6px;
  color: var(--muted);
}

.ma-results-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.ma-column-menu-anchor {
  position: relative;
}

.ma-column-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  width: 220px;
  max-height: 420px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.ma-column-menu-head {
  padding: 4px 8px 6px;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 600;
}

.ma-column-menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}

.ma-column-menu label:hover {
  background: var(--blue-soft);
}

.ma-column-menu input {
  flex: none;
}

.ma-message {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #e1b0b0;
  color: var(--ma-red);
  background: var(--ma-red-soft);
}

/*
 * 档案面板只负责摆放表格，不再自带边框/底色/裁切：
 * 内容自适应后 Tabulator 本体自带边框并按内容收缩、靠左，
 * 面板保持页面级宽度但留白只在表格右侧的页面背景上。
 */
.ma-table-panel {
  width: 100%;
  min-width: 0;
}

.ma-table-panel[hidden] {
  display: none;
}

.ma-subtle {
  margin-top: 2px;
  color: var(--subtle);
}

.ma-mono {
  font-family: var(--ui-font-mono);
  letter-spacing: 0;
}

.ma-relation-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* 关联列逐项竖排：每个可点击 chip 独占一行（如商户表的“关联合同/
   关联资产”），列宽只取单项最宽值，不再被同一行铺多个 chip 撑宽。 */
.ma-relation-links.stacked {
  flex-direction: column;
  align-items: flex-start;
}

/* 可点击的关联 chip：样式整体限定在 <a> 上，带边框与 hover 反馈。
   纯展示/状态内容请用 .ma-status（无边框、无 hover、无手型）。 */
a.ma-relation-link {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

a.ma-relation-link:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent-hover);
}

a.ma-relation-link:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

.ma-relation-meta {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

a.ma-relation-link.status-expired,
a.ma-relation-link.status-terminated,
a.ma-relation-link.status-void {
  border-color: #d9a5a5;
  color: var(--ma-red);
  background: var(--ma-red-soft);
}

a.ma-relation-link.status-expired:hover,
a.ma-relation-link.status-terminated:hover,
a.ma-relation-link.status-void:hover {
  border-color: var(--ma-red);
  color: var(--ma-red);
}

a.ma-relation-link.status-draft {
  border-color: var(--ui-border-strong);
  color: var(--ui-text-muted);
  background: var(--ui-surface-muted, #f0f0f0);
}

a.ma-relation-link.status-draft:hover {
  border-color: var(--ui-text-subtle);
  color: var(--ui-text-muted);
}

.ma-relation-links.nowrap {
  flex-wrap: nowrap;
}

/* “还有 N 项”只是弱提醒，不是可展开按钮：去掉虚线边框避免误认为可点。 */
.ma-relation-more {
  flex: none;
  min-height: 20px;
  padding: 1px 7px;
  border: 0;
  border-radius: 999px;
  color: var(--ui-text-muted);
  background: var(--ui-surface-muted, #f0f0f0);
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
}

.ma-contact-line {
  display: flex;
  gap: 6px;
  margin-bottom: 2px;
}

.ma-contact-line span {
  min-width: 38px;
  color: var(--subtle);
}

.ma-space-link {
  margin-bottom: 4px;
  padding-left: 8px;
  border-left: 2px solid #bbd2ee;
}

.ma-space-link:last-child {
  margin-bottom: 0;
}

/*
 * 不可点击的状态/提醒 pill：无边框、无 hover、无手型，只靠底色与文字色
 * 表达语义（红=强提醒/异常，琥珀=待办/提醒，绿=已完成/正常，灰=弱提醒/只读）。
 * 需要跳转或触发的交互一律用按钮或 .ma-relation-link（<a>）。
 * 形状基线（padding/圆角/折行）由 ui-system.css 的共享 pill 规则提供。
 */
.ma-status.muted {
  color: var(--ui-text-muted);
  background: var(--ui-surface-muted, #f0f0f0);
}

.ma-status.active,
.ma-completeness.complete {
  color: var(--ma-green);
  background: var(--ma-green-soft);
}

.ma-status.inactive,
.ma-completeness.incomplete {
  color: var(--ma-red);
  background: var(--ma-red-soft);
}

.ma-status.frozen {
  color: var(--ui-warning);
  background: var(--ui-warning-soft);
}

.ma-status.archived {
  color: var(--muted);
  background: var(--ui-surface-muted, #f0f0f0);
}

.ma-status.unavailable {
  color: var(--ui-warning);
  background: var(--ui-warning-soft);
}

.ma-status.broken {
  color: var(--ma-red);
  background: var(--ma-red-soft);
}

.ma-status.expired,
.ma-status.terminated,
.ma-status.void,
.ma-status.rejected {
  color: var(--ma-red);
  background: var(--ma-red-soft);
}

.ma-status.verified {
  color: var(--ma-green);
  background: var(--ma-green-soft);
}

.ma-status.draft,
.ma-status.sold,
.ma-status.self_use,
.ma-status.facility {
  color: var(--muted);
  background: var(--ui-surface-muted, #f0f0f0);
}

.ma-status.available,
.ma-status.occupied {
  color: var(--ma-green);
  background: var(--ma-green-soft);
}

.ma-status.occupied_unverified,
.ma-status.unknown,
.ma-status.unverified {
  color: var(--ui-warning);
  background: var(--ui-warning-soft);
}

/*
 * “签约身份类型”窄图标列：单元格里只放一个内联 SVG，悬停/键盘聚焦时
 * 由全站 data-tooltip 引擎显示“身份证 / 公司营业执照”全文；Excel 导出
 * 仍导出完整中文文字。图标不承担颜色语义，只靠形状区分。
 */
.ma-signing-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-text);
}

.ma-signing-icon svg {
  display: block;
}

.ui-table-action.candidate {
  border-color: #d9b45a;
  color: var(--ui-warning);
}

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

.ma-detail-status-row,
.ma-detail-block-head,
.ma-import-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ma-detail-status-row {
  justify-content: flex-start;
}

.ma-detail-company-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.ma-company-detail-content,
.ma-company-import-content {
  padding: 16px 18px 20px;
  background: var(--bg);
}

.ma-detail-block {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.ma-detail-block h3 {
  margin: 0;
  font-size: var(--ui-font-size-body);
}

.ma-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 12px 0 0;
}

.ma-detail-grid div.wide {
  grid-column: 1 / -1;
}

.ma-detail-grid dt,
.ma-detail-grid dd {
  margin: 0;
}

.ma-detail-grid dt {
  color: var(--muted);
  font-size: 12px;
}

.ma-detail-grid dd {
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.ma-detail-default-account {
  margin: 10px 0 0;
}

.ma-company-detail-dialog {
  width: min(720px, calc(100vw - 24px));
}

.ma-company-import-dialog {
  width: min(720px, calc(100vw - 24px));
}

.ma-default-tag {
  margin-left: 8px;
}

.ma-import-summary {
  align-items: flex-start;
  flex-direction: column;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.ma-import-list {
  max-height: 360px;
  overflow: auto;
  margin-top: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.ma-import-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}

.ma-import-row:last-child {
  border-bottom: 0;
}

.ma-import-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.ma-import-action {
  min-width: 54px;
  color: var(--ma-blue);
  font-size: 12px;
  font-weight: var(--ui-font-weight-semibold);
}

.ma-import-row.rename .ma-import-action {
  color: #9a6a00;
}

.ma-import-row.conflict .ma-import-action,
.ma-company-import-error {
  color: var(--ma-red);
}

.ma-empty {
  padding: 32px !important;
  color: var(--subtle);
  text-align: center !important;
}

.ma-dialog,
#ma-dialog {
  width: min(850px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}

#ma-password-dialog {
  width: min(480px, calc(100vw - 24px));
}

.ma-dialog::backdrop,
#ma-dialog::backdrop {
  background: rgb(0 0 0 / 28%);
}

.ma-help {
  margin: 0 0 10px;
  color: var(--muted);
}

.ma-detail-status-row .ma-help {
  margin: 0;
}

.ma-form-section input,
.ma-form-section select,
.ma-form-section textarea {
  width: 100%;
}

.ma-form-section label.ma-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: end;
  gap: 8px;
  min-height: 30px;
}

.ma-form-section label.ma-check[hidden] {
  display: none;
}

.ma-form-section label.ma-check input {
  width: auto;
}

.ma-dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.ma-dialog-close {
  width: 32px;
  height: 32px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}

.ma-form-section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.ma-form-section h3 {
  margin: 0 0 9px;
  font-size: var(--ui-font-size-body);
  font-weight: var(--ui-font-weight-semibold);
}

.ma-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.ma-form-grid .wide {
  grid-column: 1 / -1;
}

.ma-form-section label > span {
  margin-left: 3px;
  color: var(--ma-red);
}

.ma-form-section select[multiple] {
  min-height: 128px;
}

.ma-form-section :disabled {
  color: var(--subtle);
  background: #f1f1f1;
}

.ma-dialog-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  background: var(--panel);
}

#ma-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  max-width: min(420px, calc(100vw - 36px));
  padding: 9px 12px;
  border-radius: 3px;
  color: #fff;
  background: #333;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: 0.15s ease;
}

#ma-toast.show {
  opacity: 1;
  transform: translateY(0);
}

#ma-toast.error {
  background: var(--ma-red);
}

@media (max-width: 760px) {
  .ma-shell {
    padding: 12px var(--ui-page-gutter) 20px;
  }

  .ma-form-grid {
    grid-template-columns: 1fr;
  }

  .ma-form-grid .wide {
    grid-column: auto;
  }

  .ma-detail-grid {
    grid-template-columns: 1fr;
  }

  .ma-detail-grid div.wide {
    grid-column: auto;
  }
}