/*
 * chenci-shared / components.css
 * 核心基础组件（Claude 风格）— 依赖 tokens.css 中的变量。
 * 供全系项目与主域名落地页复用；如需组件化框架，优先用这些变量与结构。
 */

/* ── 基础排版 ─────────────────────────────────────────── */
.cc-body {
  margin: 0;
  font-family: var(--cc-font-sans);
  font-size: var(--cc-fs-base);
  line-height: var(--cc-lh-base);
  color: var(--cc-text);
  background: var(--cc-bg);
  -webkit-font-smoothing: antialiased;
}
.cc-container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--cc-space-5);
  box-sizing: border-box;
}
.cc-muted { color: var(--cc-text-secondary); }
h1, h2, h3, h4 {
  font-weight: var(--cc-fw-bold);
  line-height: var(--cc-lh-tight);
  letter-spacing: var(--cc-ls-tight);
}

/* ── 页头（通用，工具站 hero 在 app.css）────────────────── */
.cc-header {
  padding: var(--cc-space-7) 0 var(--cc-space-6);
  border-bottom: 1px solid var(--cc-border);
}
.cc-header h1 {
  margin: 0;
  font-size: var(--cc-fs-2xl);
  font-weight: 650;
  letter-spacing: var(--cc-ls-tight);
  line-height: var(--cc-lh-tight);
}
.cc-header .cc-subtitle {
  margin-top: var(--cc-space-3);
  color: var(--cc-text-secondary);
  font-size: var(--cc-fs-md);
  line-height: var(--cc-lh-lead);
}

/* ── 卡片 ─────────────────────────────────────────────── */
.cc-card {
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-5);
  transition: border-color 150ms ease, box-shadow 150ms ease,
      transform 150ms ease;
}
a.cc-card { display: block; text-decoration: none; color: inherit; }
.cc-card:hover,
.cc-card:focus-visible {
  border-color: var(--cc-border-strong);
  box-shadow: var(--cc-shadow-lg);
  transform: translateY(-2px);
}
.cc-card:focus-visible {
  outline: var(--cc-ring) solid var(--cc-accent);
  outline-offset: var(--cc-ring-offset);
}
.cc-card-title {
  margin: 0 0 var(--cc-space-2);
  font-size: var(--cc-fs-md);
  font-weight: var(--cc-fw-semibold);
  letter-spacing: var(--cc-ls-tight);
}
.cc-card-desc {
  margin: 0;
  color: var(--cc-text-secondary);
  font-size: var(--cc-fs-sm);
}

/* ── 网格 ─────────────────────────────────────────────── */
.cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--cc-space-4);
}

/* ── 按钮 ─────────────────────────────────────────────── */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  padding: var(--cc-space-2) var(--cc-space-4);
  border-radius: var(--cc-radius-md);
  border: 1px solid transparent;
  font-size: var(--cc-fs-sm);
  font-weight: var(--cc-fw-medium);
  line-height: var(--cc-lh-tight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.cc-btn:focus-visible {
  outline: var(--cc-ring) solid var(--cc-accent);
  outline-offset: var(--cc-ring-offset);
}
.cc-btn-primary {
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  box-shadow: var(--cc-shadow-sm);
}
.cc-btn-primary:hover { background: var(--cc-accent-hover); }
.cc-btn-ghost { background: transparent; color: var(--cc-text); border-color: var(--cc-border-strong); }
.cc-btn-ghost:hover { background: var(--cc-bg-muted); }

/* ── 链接 ─────────────────────────────────────────────── */
.cc-link { color: var(--cc-accent); text-decoration: none; font-weight: var(--cc-fw-medium); }
.cc-link:hover { text-decoration: underline; color: var(--cc-accent-hover); }

/* ── 表单控件（可复用）──────────────────────────────────── */
.panel {
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  padding: var(--cc-space-4);          /* was space-5 (24px) */
  margin-bottom: var(--cc-space-4);
}
.field { margin-bottom: var(--cc-space-3); }   /* was space-4 (16px) */
.field:last-child { margin-bottom: 0; }
.field label {
  display: block;
  margin-bottom: var(--cc-space-2);
  font-size: var(--cc-fs-sm);
  font-weight: var(--cc-fw-semibold);
  color: var(--cc-text-secondary);
}
.input, .select, .textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--cc-space-2) var(--cc-space-3);  /* was space-3(12)/space-4(16) */
  font-size: var(--cc-fs-sm);                    /* was fs-base(16) → 14px; calmer control */
  font-family: var(--cc-font-sans);
  color: var(--cc-text);
  background: var(--cc-bg);
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-md);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.textarea { min-height: 76px; resize: vertical; line-height: var(--cc-lh-base); }   /* was 90px */
.input::placeholder, .textarea::placeholder { color: var(--cc-text-tertiary); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 var(--cc-ring) var(--cc-accent-soft);
}
.input.invalid, .select.invalid, .textarea.invalid {
  border-color: var(--cc-danger);
  box-shadow: 0 0 0 var(--cc-ring) #F7DDDB;   /* 浅红柔和光环 */
}
.row { display: flex; gap: var(--cc-space-3); flex-wrap: wrap; align-items: center; }
.row > * { flex: 0 0 auto; }
.row .grow { flex: 1 1 160px; }

/* ── 分段控件（segmented control）────────────────────────── */
.segment {
  display: inline-flex;
  padding: var(--cc-space-1);
  gap: var(--cc-space-1);
  background: var(--cc-bg-muted);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-full);
  margin-bottom: var(--cc-space-3);                           /* was space-4 (16px) */
}
.segment button {
  border: none;
  background: transparent;
  color: var(--cc-text-secondary);
  padding: var(--cc-space-2) var(--cc-space-4);
  font-size: var(--cc-fs-sm);
  font-weight: var(--cc-fw-medium);
  border-radius: var(--cc-radius-full);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.segment button:hover { color: var(--cc-text); }
.segment button.active {
  background: var(--cc-bg);
  color: var(--cc-text);
  box-shadow: var(--cc-shadow-sm);
}
.segment button:focus-visible {
  outline: var(--cc-ring) solid var(--cc-accent);
  outline-offset: var(--cc-ring-offset);
}

/* ── 结果 / 键值 ────────────────────────────────────────── */
.result {
  margin-top: var(--cc-space-3);                              /* was space-4 (16px) */
  padding: var(--cc-space-3) var(--cc-space-4);               /* was space-4 all around */
  background: var(--cc-bg-subtle);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
}
.result .label { font-size: var(--cc-fs-xs); color: var(--cc-text-tertiary); margin-bottom: var(--cc-space-1); }
.result .value { font-size: var(--cc-fs-md); font-weight: var(--cc-fw-semibold); color: var(--cc-text); }
.result .value.mono { font-family: var(--cc-font-mono); font-weight: var(--cc-fw-medium); font-size: var(--cc-fs-base); }
.kv { display: grid; grid-template-columns: minmax(96px, 1fr) 2fr; gap: var(--cc-space-2) var(--cc-space-4); }
.kv dt { color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); }
.kv dd { margin: 0; font-size: var(--cc-fs-base); color: var(--cc-text); }

/* ── 输出区 / 提示 / 错误 ───────────────────────────────── */
.output {
  margin-top: var(--cc-space-3);                              /* was space-4 (16px) */
  padding: var(--cc-space-3) var(--cc-space-4);               /* was space-4 all around */
  background: var(--cc-bg-subtle);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-sm);
  line-height: var(--cc-lh-base);
  color: var(--cc-text);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 260px;                                          /* was 320px */
  overflow: auto;
}
.inline-actions { display: flex; gap: var(--cc-space-2); margin-top: var(--cc-space-3); flex-wrap: wrap; }
.alert {
  margin-top: var(--cc-space-4);
  padding: var(--cc-space-3) var(--cc-space-4);
  border-radius: var(--cc-radius-md);
  border-left: 3px solid;   /* 状态强调边 */
  font-size: var(--cc-fs-sm);
  line-height: var(--cc-lh-base);
}
.alert.error { background: #FBEDEB; border-color: #E7B9B2; color: var(--cc-danger); }
.alert.ok { background: #EAF4EE; border-color: #BFDCCB; color: var(--cc-success); }
.hint { color: var(--cc-text-tertiary); font-size: var(--cc-fs-sm); margin-top: var(--cc-space-2); }
.muted { color: var(--cc-text-secondary); }

/* ── 日期选择（紧凑 · 可输入 · 快速跳转）────────────────── */
.dp { position: relative; }

/* 触发器：字段容器（承载可编辑输入），不再是无输入能力的按钮 */
.dp-trigger {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);                          /* 8px */
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 0 var(--cc-space-2) 0 var(--cc-space-3); /* R8 L12 */
  background: var(--cc-bg);
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-md);              /* 12px */
  cursor: text;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.dp-trigger:focus-within {
  outline: none;
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 var(--cc-ring) var(--cc-accent-soft);
}

.dp-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--cc-font-sans);
  font-size: var(--cc-fs-sm);                      /* 14px */
  color: var(--cc-text);
  outline: none;                                    /* ring handled by :focus-within */
}
.dp-input::placeholder { color: var(--cc-text-tertiary); }

.dp-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: none;
  background: transparent;
  color: var(--cc-text-secondary);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.dp-toggle:hover { background: var(--cc-bg-muted); color: var(--cc-text); }
.dp-toggle:focus-visible {
  outline: var(--cc-ring) solid var(--cc-accent);
  outline-offset: var(--cc-ring-offset);
}
.dp-toggle svg { display: block; }

/* 弹层：更窄、内边距小、更精致的圆角 */
.dp-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 218px;
  box-sizing: border-box;
  padding: var(--cc-space-2);                      /* 8px */
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);              /* 12px */
  box-shadow: var(--cc-shadow-lg);
}

/* 头：左右上/下月小箭头（次要）+ 中间月份下拉 & 可编辑年份（主要跳转） */
.dp-head {
  display: flex;
  align-items: center;
  gap: var(--cc-space-1);                          /* 4px */
  margin-bottom: var(--cc-space-2);
}
.dp-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border: none;
  background: transparent;
  color: var(--cc-text-tertiary);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.dp-step:hover { background: var(--cc-bg-muted); color: var(--cc-accent); }
.dp-step:focus-visible {
  outline: var(--cc-ring) solid var(--cc-accent);
  outline-offset: var(--cc-ring-offset);
}
.dp-step svg { display: block; }

.dp-select {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  padding: 0 var(--cc-space-1);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-bg);
  color: var(--cc-text);
  font-family: var(--cc-font-sans);
  font-size: var(--cc-fs-xs);                      /* 12px */
  cursor: pointer;
}
.dp-select:focus { outline: none; border-color: var(--cc-accent); }

.dp-year {
  flex: 0 0 46px;
  width: 46px;
  height: 26px;
  padding: 0 var(--cc-space-1);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-bg);
  color: var(--cc-text);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);                      /* 12px */
  text-align: center;
  cursor: text;
}
.dp-year:focus { outline: none; border-color: var(--cc-accent); }

/* 周：7 列固定 28px → 内容宽 202px + 16px 内边距 = 218px 弹层 */
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 28px);
  gap: 1px;
}
.dp-dow {
  text-align: center;
  font-size: var(--cc-fs-xs);                      /* 12px */
  color: var(--cc-text-tertiary);
  padding: var(--cc-space-1) 0;
}
.dp-cell {
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cc-fs-xs);                      /* 12px */
}
.dp-blank { visibility: hidden; }
.dp-day {
  border: none;
  background: transparent;
  color: var(--cc-text);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.dp-day:hover:not(:disabled) { background: var(--cc-bg-muted); }
.dp-day.is-today { font-weight: var(--cc-fw-semibold); color: var(--cc-accent); }
.dp-day.is-sel  { background: var(--cc-accent); color: var(--cc-on-accent); }
.dp-day:disabled { opacity: .35; color: var(--cc-text-tertiary); cursor: not-allowed; }
.dp-day:focus-visible:not(.is-sel) {
  outline: var(--cc-ring) solid var(--cc-accent);
  outline-offset: var(--cc-ring-offset);
  background: var(--cc-bg-muted);
}

/* 脚：今天 / 清除 */
.dp-foot {
  display: flex;
  gap: var(--cc-space-1);
  justify-content: flex-end;
  margin-top: var(--cc-space-2);
  padding-top: var(--cc-space-2);
  border-top: 1px solid var(--cc-border);
}
.dp-foot-btn {
  border: none;
  background: transparent;
  color: var(--cc-text-secondary);
  font-size: var(--cc-fs-xs);                      /* 12px */
  cursor: pointer;
  padding: var(--cc-space-1) var(--cc-space-2);
  border-radius: var(--cc-radius-sm);
}
.dp-foot-btn:hover { background: var(--cc-bg-muted); color: var(--cc-text); }
.dp-foot-btn:focus-visible {
  outline: var(--cc-ring) solid var(--cc-accent);
  outline-offset: var(--cc-ring-offset);
}
/* ── 暗色模式组件修正（手工 data-theme 或系统跟随）──────────────── */
[data-theme="dark"] .alert.error { background: rgba(224,107,90,.14); border-color: rgba(224,107,90,.45); color: var(--cc-danger); }
[data-theme="dark"] .alert.ok    { background: rgba(79,165,124,.15); border-color: rgba(79,165,124,.45); color: var(--cc-success); }
[data-theme="dark"] .input.invalid, [data-theme="dark"] .select.invalid, [data-theme="dark"] .textarea.invalid { box-shadow: 0 0 0 var(--cc-ring) rgba(224,107,90,.22); }
[data-theme="dark"] .segment button.active { background: var(--cc-bg); box-shadow: var(--cc-shadow-sm); border: 1px solid var(--cc-border-strong); }
[data-theme="dark"] .dp-pop { border-color: var(--cc-border-strong); box-shadow: var(--cc-shadow-lg); }
[data-theme="dark"] .dp-select, [data-theme="dark"] .dp-year { background: var(--cc-bg); border-color: var(--cc-border-strong); }
/* 系统暗色时 html 无 data-theme 属性，故媒体查询下也需覆盖（否则弹层/提醒保持浅色） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .alert.error { background: rgba(224,107,90,.14); border-color: rgba(224,107,90,.45); color: var(--cc-danger); }
  :root:not([data-theme="light"]) .alert.ok    { background: rgba(79,165,124,.15); border-color: rgba(79,165,124,.45); color: var(--cc-success); }
  :root:not([data-theme="light"]) .input.invalid, :root:not([data-theme="light"]) .select.invalid, :root:not([data-theme="light"]) .textarea.invalid { box-shadow: 0 0 0 var(--cc-ring) rgba(224,107,90,.22); }
  :root:not([data-theme="light"]) .segment button.active { background: var(--cc-bg); box-shadow: var(--cc-shadow-sm); border: 1px solid var(--cc-border-strong); }
  :root:not([data-theme="light"]) .dp-pop { border-color: var(--cc-border-strong); box-shadow: var(--cc-shadow-lg); }
  :root:not([data-theme="light"]) .dp-select, :root:not([data-theme="light"]) .dp-year { background: var(--cc-bg); border-color: var(--cc-border-strong); }
}