/* 设计 token 唯一 JS 来源在 src/theme/tokens.ts，两处取值保持同步 */
@import 'tailwindcss';

@theme {
  --color-bg: #f5f4ed;
  --color-card: #faf9f5;
  --color-white: #ffffff; /* 语义：输入 / 嵌入面，暗色下为深灰而非纯白 */
  --color-ink: #141413;
  --color-ink-2: #5e5d59;
  --color-ink-3: #87867f;
  --color-line: #e8e6dc;
  --color-line-soft: #f0eee6;
  --color-row-hover: #f1efe8;
  --color-wash: #efede4; /* 侧栏 / 图标按钮悬浮底 */
  --color-wash-deep: #ece9df; /* 侧栏激活 / 头像底 */
  --color-accent: #c96442;
  --color-accent-hover: #ad4f2e;
  --color-chart: #c15f3c;
  --color-ok: #788c5d;
  --color-err: #b53333;
  --color-info: #6a9bcc;
  --color-warn: #a87514;

  --font-sans:
    -apple-system, 'SF Pro Text', 'Helvetica Neue', 'PingFang SC', 'Noto Sans SC', sans-serif;
  --font-serif: Georgia, 'Times New Roman', 'Songti SC', serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* 暗色主题：html.dark 由 stores/app.ts 挂载，色值与 tokens.ts 的 darkTokens 同步 */
html.dark {
  --color-bg: #191817;
  --color-card: #201f1e;
  --color-white: #262524;
  --color-ink: #eceae4;
  --color-ink-2: #a8a69e;
  --color-ink-3: #807e76;
  --color-line: #3a3835;
  --color-line-soft: #2c2b29;
  --color-row-hover: #292825;
  --color-wash: #2b2a27;
  --color-wash-deep: #33312d;
  --color-accent: #d97757;
  --color-accent-hover: #e08b6d;
  --color-chart: #d97757;
  --color-ok: #8fa574;
  --color-err: #d06060;
  --color-info: #7fabd6;
  --color-warn: #c29135;
  color-scheme: dark;
}

html,
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 全局滚动条瘦身：透明轨道 + 细圆角滑块，明暗主题跟随 ink 变量 */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-ink) 22%, transparent) transparent;
}
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: transparent;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-ink) 22%, transparent);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-ink) 38%, transparent);
}

/* 页面标题统一 serif */
.page-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
}

/* 卡片：圆角 8、细边框、whisper 阴影，无渐变；
   overflow hidden 防止内部表格等方角内容溢出圆角 */
.panel {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 20, 19, 0.04);
  min-width: 0;
  overflow: hidden;
}

.mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: -0.2px;
}

/* NDataTable 分页器默认贴表格底边，补出与卡片底部的间隔 */
.n-data-table .n-data-table__pagination {
  padding: 4px 18px 14px;
}

/* 租户下拉双行选项：菜单项上下留白拉开行距，避免相邻两租户挤在一起 */
.n-base-select-option .cfg-tenancy-sub {
  margin-top: 1px;
}
.n-base-select-option__content:has(.cfg-tenancy-sub) {
  padding: 6px 0;
}
/* NSelect 选中框（收起态）只显示别名单行，租户名辅行隐藏 */
.n-base-selection-label .cfg-tenancy-sub {
  display: none;
}

/* AppInputNumber(方案 B 内嵌步进):上下箭头收进右侧独立竖栏——
   竖栏占满框高、border-left 与框体结构化分隔,上下两格中缝分隔线,
   悬停格底 wash;suffix 内 minus / add 恒为最后两个子元素(add 上 minus 下)。 */
.app-input-number .n-input .n-input-wrapper {
  padding-right: 34px; /* 26px 竖栏 + 文本安全间距 */
}
.app-input-number .n-input__suffix {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 26px;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-left: 1px solid var(--color-line-soft);
}
.app-input-number .n-input__suffix > :last-child {
  grid-row: 1; /* add 在上 */
  border-bottom: 1px solid var(--color-line-soft);
  border-top-right-radius: 5px;
}
.app-input-number .n-input__suffix > :nth-last-child(2) {
  grid-row: 2; /* minus 在下 */
  border-bottom-right-radius: 5px;
}
.app-input-number .n-input__suffix .n-button {
  /* 箭头颜色跟随文本弱色而非按钮主题色:NButton 自带 --n-text-color
     内联声明会盖过外层 color,必须直接覆盖变量 */
  --n-icon-size: 9px;
  --n-text-color: var(--color-ink-3);
  --n-text-color-hover: var(--color-ink);
  --n-text-color-pressed: var(--color-ink);
  --n-text-color-focus: var(--color-ink);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  color: var(--color-ink-3);
}
.app-input-number .n-input__suffix .n-button:not(.n-button--disabled):hover {
  background: var(--color-wash);
  color: var(--color-ink);
}

/* useToast 可展开详情:toast 内嵌代码块(标签 + 复制 + 内滚 pre)。
   message 经 teleport 渲染于 body,组件 scoped 样式不可达,故置于全局。 */
.toast-body {
  max-width: 420px;
}
.toast-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.toast-toggle {
  flex: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-accent);
  user-select: none;
}
.toast-toggle:hover {
  text-decoration: underline;
}
.toast-code {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: var(--color-wash);
}
.toast-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-line-soft);
  padding: 4px 8px 4px 10px;
}
.toast-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.toast-tag-error {
  color: var(--color-err);
}
.toast-tag-warning {
  color: var(--color-warn);
}
.toast-copy {
  cursor: pointer;
  border: none;
  background: none;
  padding: 2px 4px;
  font-size: 11px;
  color: var(--color-ink-3);
}
.toast-copy:hover {
  color: var(--color-ink);
}
.toast-code-pre {
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--color-ink-2);
}

/* 全屏页轨道环(FullPageBackdrop 与登录页品牌区共用):
   spin 动画占用 transform,环定位只能用 left/top(calc 同心),不能用 translate。 */
.fpb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--color-line);
  pointer-events: none;
}
.fpb-ring-dash {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--color-line) 70%, var(--color-accent) 30%);
}
@media (prefers-reduced-motion: no-preference) {
  .fpb-spin {
    animation: fpb-spin 52s linear infinite;
  }
  @keyframes fpb-spin {
    to {
      transform: rotate(360deg);
    }
  }
}