/* ─────────────────────────────────────────────────────────────
   PMA · AT 设计系统(Anthropic-style)
   暖白底 + 衬线大标题 + 陶土橙强调色
   ───────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.cn/css2?family=Newsreader:wght@400;500;600&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* 让原生表单控件/滚动条按当前主题渲染:浅色模式字段底为浅,暗色为深。
     不声明时浏览器默认按浅色画原生字段底 → 暗色下透明输入框会露白底 */
  color-scheme: light;

  /* Surfaces */
  --bg-page:      #FAF9F5;
  --bg-elev:      #FFFFFF;
  --bg-sunk:      #F2EFE6;
  --bg-hover:     #F0EDE3;
  --bg-active:    #EAE6D6;

  /* Ink */
  --ink:          #1F1E1B;
  --ink-2:        #4A4842;
  --ink-3:        #76746B;
  --ink-4:        #9C9A8F;

  /* Lines */
  --line-soft:    #F0EDDF;
  --line:         #E5E1D3;
  --line-2:       #D9D4C4;

  /* Accent (terracotta) */
  --accent:       #C15F3C;
  --accent-2:     #D97757;
  --accent-soft:  #F2DCCC;
  --accent-tint:  #FBF1E9;

  /* Status */
  --success:      #2F7155;
  --success-soft: #E0EDE5;
  --warn:         #B8742E;
  --warn-soft:    #F4E2CD;
  --info:         #2A5F8F;
  --info-soft:    #DDE6F1;
  --danger:       #A23B3B;
  --danger-soft:  #F0DAD8;

  /* Typography stacks */
  --font-serif:   "Newsreader", "Source Serif 4", "Songti SC", "STSong", serif;
  --font-sans:    "Inter Tight", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius-sm:    4px;
  --radius:       8px;
  --radius-lg:    12px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-page:      #191714;
  --bg-elev:      #221F1A;
  --bg-sunk:      #100E0C;
  --bg-hover:     #28241E;
  --bg-active:    #2F2B23;

  --ink:          #F2EFE6;
  --ink-2:        #C9C5B8;
  --ink-3:        #908C81;
  --ink-4:        #696558;

  --line-soft:    #25221C;
  --line:         #322D25;
  --line-2:       #443E33;

  --accent:       #E08A6C;
  --accent-2:     #D97757;
  --accent-soft:  #3A2519;
  --accent-tint:  #2A1B12;

  --success:      #6BAE8B;
  --success-soft: #1E2E25;
  --warn:         #D89855;
  --warn-soft:    #332515;
  --info:         #7CA9D8;
  --info-soft:    #1A2632;
  --danger:       #D67878;
  --danger-soft:  #321E1E;
}

/* Density */
:root[data-density="compact"]  { --row-h: 40px; --pad-y: 10px; --gap: 20px; }
:root[data-density="standard"] { --row-h: 52px; --pad-y: 14px; --gap: 28px; }
:root[data-density="cozy"]     { --row-h: 64px; --pad-y: 18px; --gap: 40px; }

/* 整页限定 AT 风格（避免影响现有 tw 页面） */
body.at-page {
  font-family: var(--font-sans);
  font-size: 14px;
  font-feature-settings: "cv11", "ss03", "ss01";
  color: var(--ink);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  margin: 0;
}

body.at-page button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
/* 所有 input/textarea/select 强制 border-box,避免 width:100% + padding/border 溢出父容器 */
body.at-page input,
body.at-page textarea,
body.at-page select { font: inherit; color: inherit; box-sizing: border-box; max-width: 100%; }
/* 浏览器自动填充:默认会强制白底,暗色模式下浅色 --ink 文字落白底看不清 ——
   统一用 --ink 文字色 + 主题背景 inset 阴影覆盖,保证明暗模式都可读 */
body.at-page input:-webkit-autofill,
body.at-page input:-webkit-autofill:hover,
body.at-page input:-webkit-autofill:focus,
body.at-page textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elev) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}
body.at-page a { color: inherit; text-decoration: none; }
body.at-page table { border-collapse: collapse; }

.at-serif    { font-family: var(--font-serif); font-feature-settings: "ss01"; }
.at-mono     { font-family: var(--font-mono); }
.at-tab-num  { font-variant-numeric: tabular-nums; }
.at-muted    { color: var(--ink-3); }
.at-dim      { color: var(--ink-4); }
.at-no-wrap  { white-space: nowrap; }
.at-hairline { background: var(--line); height: 1px; width: 100%; }

/* Subtle scrollbar */
body.at-page * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
body.at-page *::-webkit-scrollbar { width: 10px; height: 10px; }
body.at-page *::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 5px;
}
body.at-page *::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; }

/* 大标题字体切换 — sans 时用 sans 替换 serif */
body.at-page[data-headline-font="sans"] .at-serif {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* at_input 通用样式:focus 用主题色边框替代浏览器默认蓝框;有值时显示 X 清除按钮 */
.at-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(218, 130, 30, 0.14));
}
/* 高德 / Google Maps autocomplete 下拉默认 z-index 太低,会被 modal(z=200)盖住 */
.amap-sug-result, .pac-container { z-index: 99999 !important; }

/* 强制清除 Tailwind Forms 插件对 input focus 的蓝色边框/外发光 */
.at-input-wrap input:focus,
.at-input-wrap input:focus-visible,
.at-ss-display:focus,
.at-ss-display:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
}
/* X 清除按钮 — input 非空时显示(:placeholder-shown 反逻辑,跟用户输入实时同步) */
.at-input-wrap:has(input:not(:placeholder-shown)) button[data-at-input-clear] {
  display: inline-flex !important;
}

/* ── 分段开关(segmented control)──
   仪表板周期切换(本月/本季/本年)与配置页数据范围等公用;
   用法:<div class="at-seg"><button class="on">A</button><button>B</button></div>
   禁用整组:加 .at-seg-off。 */
.at-seg { display:inline-flex; gap:4px; padding:3px; background:var(--bg-page); border-radius:7px; }
/* 注意:必须带 body.at-page 前缀压过全局按钮重置(body.at-page button{color:inherit}),
   否则未选中态的灰色会被 inherit 吃掉,开/关文字失去区分。 */
body.at-page .at-seg > button { padding:4px 10px; font:inherit; font-size:11.5px; font-weight:500;
                   border-radius:5px; border:0; cursor:pointer; color:var(--ink-3);
                   background:transparent; white-space:nowrap; transition:all 120ms; }
body.at-page .at-seg > button:hover { color:var(--ink); }
body.at-page .at-seg > button.on { background:var(--bg-elev); color:var(--ink); font-weight:600;
                      box-shadow:0 1px 2px rgba(31,30,27,0.06); }
.at-seg.at-seg-off { opacity:0.35; pointer-events:none; }

/* ── 行级「恢复继承」图标按钮 ──
   at-target-sheet / at-perm-sheet 个人覆盖页公用:纯图标(history),title 提示语义。 */
body.at-page .at-revert-btn { display:inline-flex; align-items:center; justify-content:center;
                   border:0; background:transparent; padding:3px; border-radius:5px;
                   cursor:pointer; color:var(--ink-3); line-height:0; transition:all 120ms; }
body.at-page .at-revert-btn:hover { color:var(--accent); background:var(--bg-hover); }

/* ── AT 组合输入框(at_grouped_select):前半分组下拉 + 后半文本输入 ── */
.at-gsi { display:flex; align-items:stretch; box-sizing:border-box; height:34px; border:1px solid var(--line-2);
          border-radius:7px; background:var(--bg-page); position:relative; }
.at-gsi:focus-within { border-color:var(--accent); }
/* 带 body.at-page 前缀压过全局按钮重置(body.at-page button{padding:0}) */
body.at-page .at-gsi-trigger { display:flex; align-items:center; gap:7px; height:100%; padding:0 14px;
                  border:0; border-right:1px solid var(--line-2); background:transparent; cursor:pointer;
                  font:inherit; font-size:13px; color:var(--ink); border-radius:7px 0 0 7px;
                  flex-shrink:0; white-space:nowrap; }
body.at-page .at-gsi-trigger:hover { background:var(--bg-hover); }
.at-gsi-sep { display:none; }
.at-gsi-input { flex:1; min-width:0; height:100%; border:0; background:transparent; font:inherit;
                font-size:13px; color:var(--ink); outline:none; padding:0 14px; }
.at-gsi-menu { position:absolute; top:calc(100% + 4px); left:0; min-width:210px; z-index:40;
               background:var(--bg-elev); border:1px solid var(--line); border-radius:8px;
               box-shadow:0 12px 32px rgba(0,0,0,0.12); padding:5px; max-height:280px; overflow-y:auto; }
.at-gsi-grp { font-size:10.5px; letter-spacing:0.06em; color:var(--ink-4); padding:7px 10px 2px; }
.at-gsi-item { padding:7px 12px; border-radius:6px; cursor:pointer; font-size:13px; color:var(--ink); }
.at-gsi-item:hover { background:var(--bg-hover); }

/* ── AT 时间选择器(at_time_picker):小时 + 分钟两列 ── */
.at-tp { position:relative; width:100%; }
body.at-page .at-tp-trigger { display:flex; align-items:center; gap:7px; width:100%; box-sizing:border-box;
                  height:34px; padding:0 11px; border:1px solid var(--line-2); border-radius:7px;
                  background:var(--bg-page); cursor:pointer; font:inherit; font-size:13px; color:var(--ink); }
body.at-page .at-tp-trigger:hover { border-color:var(--line-2); }
.at-tp:focus-within .at-tp-trigger { border-color:var(--accent); }
.at-tp-ph { color:var(--ink-4); }
.at-tp-menu { position:absolute; top:calc(100% + 4px); left:0; z-index:40;
              background:var(--bg-elev); border:1px solid var(--line); border-radius:8px;
              box-shadow:0 12px 32px rgba(0,0,0,0.12); padding:5px; }
.at-tp-list { width:104px; max-height:220px; overflow-y:auto; }
.at-tp-item { padding:7px 14px; text-align:center; border-radius:6px; cursor:pointer; font-size:13px;
              color:var(--ink); font-variant-numeric:tabular-nums; }
.at-tp-item:hover { background:var(--bg-hover); }
body.at-page .at-tp-item.on { background:var(--accent); color:#fff; }

/* ── AT 日期选择器(at_date_picker):弹出月历 ── */
.at-dp { position:relative; display:inline-flex; }
body.at-page .at-dp-trigger { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 11px;
                  border:1px solid var(--line-2); border-radius:7px; background:var(--bg-page); cursor:pointer;
                  font:inherit; font-size:13px; color:var(--ink); }
.at-dp-ph { color:var(--ink-4); }
.at-dp-menu { position:absolute; top:calc(100% + 4px); left:0; z-index:50; width:268px; background:var(--bg-elev);
              border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,0.14); padding:12px; }
.at-dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
              font-size:13.5px; font-weight:600; color:var(--ink); }
.at-dp-nav { display:inline-flex; gap:2px; }
body.at-page .at-dp-nav button { width:26px; height:26px; border-radius:6px; display:inline-flex;
                  align-items:center; justify-content:center; color:var(--ink-2); }
body.at-page .at-dp-nav button:hover { background:var(--bg-hover); }
.at-dp-wk { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; }
.at-dp-wk span { text-align:center; font-size:11px; color:var(--ink-4); padding:4px 0; }
.at-dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
body.at-page .at-dp-day { height:32px; border-radius:6px; font-size:12.5px; color:var(--ink); cursor:pointer; border:0; background:transparent; }
body.at-page .at-dp-day:hover { background:var(--bg-hover); }
.at-dp-day.other { color:var(--ink-4); }
.at-dp-day.today { color:var(--accent); font-weight:600; }
body.at-page .at-dp-day.on { background:var(--accent); color:#fff; }
.at-dp-foot { display:flex; justify-content:flex-end; margin-top:8px; }
body.at-page .at-dp-foot button { font-size:12px; color:var(--ink-2); border:1px solid var(--line-2);
                  border-radius:6px; padding:4px 12px; }
body.at-page .at-dp-foot button:hover { background:var(--bg-hover); }

/* ── 内联日期/时间行(wi-dtrow):无框 + 加粗大字(仿日程头部) ── */
.wi-dtrow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.wi-dtrow .at-dp, .wi-dtrow .at-tp { width:auto; }
body.at-page .wi-dtrow .at-dp-trigger,
body.at-page .wi-dtrow .at-tp-trigger { border:0; background:transparent; height:auto; padding:4px 7px;
                  font-size:15px; font-weight:600; width:auto; border-radius:6px; }
body.at-page .wi-dtrow .at-dp-trigger:hover,
body.at-page .wi-dtrow .at-tp-trigger:hover { background:var(--bg-hover); }
.wi-dtrow .at-tp-trigger svg { display:none; }
.wi-dtrow .at-dp-ph, .wi-dtrow .at-tp-ph { font-weight:400; }
.wi-dt-dash { color:var(--ink-3); font-weight:600; margin:0 10px; }

/* ── AT 人员多选(at_people_select):chips + 可搜索分组下拉 ── */
.at-ps { position:relative; }
.at-ps-box { display:flex; flex-wrap:wrap; align-items:center; gap:6px; box-sizing:border-box; min-height:34px; padding:4px 8px;
             border:1px solid var(--line-2); border-radius:7px; background:var(--bg-page); cursor:text; }
.at-ps:focus-within .at-ps-box { border-color:var(--accent); }
.at-ps-input { flex:1; min-width:120px; border:0; background:transparent; outline:none; font:inherit;
               font-size:13px; color:var(--ink); height:24px; }
.at-ps-input::placeholder { color:var(--ink-4); }
.at-ps-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 4px 2px 2px; border-radius:14px;
              background:var(--bg-sunk); font-size:12.5px; color:var(--ink); }
body.at-page .at-ps-chip button { color:var(--ink-4); font-size:13px; line-height:1; padding:0 2px; }
body.at-page .at-ps-chip button:hover { color:var(--danger); }
.at-ps-av { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
            border-radius:50%; background:var(--accent-tint); color:var(--accent); font-size:10.5px; font-weight:600; flex-shrink:0; }
.at-ps-menu { position:absolute; top:calc(100% + 4px); left:0; min-width:240px; max-width:340px; z-index:50;
              background:var(--bg-elev); border:1px solid var(--line); border-radius:8px;
              box-shadow:0 12px 32px rgba(0,0,0,0.12); padding:5px; max-height:300px; overflow-y:auto; }
.at-ps-grp { font-size:10.5px; letter-spacing:0.06em; color:var(--ink-4); padding:7px 10px 2px; }
.at-ps-item { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:6px; cursor:pointer;
              font-size:13px; color:var(--ink); }
.at-ps-item:hover { background:var(--bg-hover); }
.at-ps-item.on { background:var(--accent-tint); }
.at-ps-check { color:var(--accent); font-weight:600; }