/* ==========================================================
   个人记账 —— 样式表（手机优先：先写手机样式，再用 min-width 扩展到电脑）
   不使用外部字体、CDN 或框架。
   ========================================================== */

/* ---------- 1. 全局：颜色、圆角、间距变量与基础规则 ---------- */
:root {
  --color-bg: #f4f1ea;          /* 浅米白页面背景 */
  --color-card: #ffffff;        /* 白色卡片 */
  --color-text: #1f2a24;        /* 深色正文 */
  --color-muted: #5b665f;       /* 辅助文字（与白底对比度足够） */
  --color-border: #dcd7cb;      /* 细边框 */
  --color-primary: #1e5a3c;     /* 深绿：主要按钮、重点金额 */
  --color-primary-dark: #154329;
  --color-primary-soft: #e6f0ea;
  --color-danger: #b3261e;      /* 红色：负数与错误 */
  --color-danger-soft: #fbeceb;
  --color-warning: #8a5a00;     /* 警告文字 */
  --color-warning-soft: #fdf3dc;
  --color-success-soft: #e6f0ea;

  --radius: 12px;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --shadow: 0 1px 3px rgba(31, 42, 36, 0.08);
  --font-main: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-number: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after {
  box-sizing: border-box;   /* 宽度包含内边距和边框，避免控件撑出屏幕 */
}

/* 带 hidden 属性的元素必须保持隐藏：后面任何 display 规则都不能把它显示出来 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.5;
}

.login-card { width: min(440px, calc(100% - 32px)); margin: 8vh auto; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0; }
.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-danger { background: var(--color-danger); color: white; }
progress { width: 100%; height: 1rem; accent-color: var(--color-primary); }
.category-item { margin-bottom: 0.8rem; }
.category-item span { display: block; font-size: 0.9rem; overflow-wrap: anywhere; }
.chart-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
.chart-grid svg { width: 100%; height: auto; }
dialog { width: min(680px, calc(100% - 24px)); max-height: 90vh; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 12px; padding: 1.25rem; }
dialog::backdrop { background: rgba(0,0,0,0.4); }
details { margin-top: 1rem; }
summary { cursor: pointer; padding: 0.75rem 0; font-weight: 600; }
li { margin-bottom: 0.7rem; overflow-wrap: anywhere; }
.filters { margin-bottom: 1rem; }
@media (min-width: 700px) { .chart-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

h1, h2 {
  margin: 0 0 var(--space-2);
  line-height: 1.25;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }

p { margin: 0 0 var(--space-2); }

.hint {
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* ---------- 2. 页面布局 ---------- */
/* 页头：标题在左，刷新按钮在右 */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.header-row h1 { margin: 0; }

.page-header,
.layout {
  max-width: 1100px;        /* 限制桌面内容宽度，左右留白 */
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.page-header {
  padding-top: var(--space-4);
  padding-bottom: var(--space-2);
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* minmax(0,…)：内容太宽时不撑开网格 */
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}

.card {
  min-width: 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
}

/* ---------- 3. 表单 ---------- */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.form-subgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

label {
  font-weight: 600;
  font-size: 0.95rem;
}

input,
select {
  width: 100%;
  min-height: 44px;            /* 触摸高度 */
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 1rem;             /* 至少 16px，避免 iOS 聚焦时自动放大页面 */
  color: var(--color-text);
  background: #fff;
  border: 1px solid #9aa39d;
  border-radius: 8px;
}

input::placeholder {
  color: #7d867f;
}

input:hover:not(:disabled),
select:hover:not(:disabled) {
  border-color: var(--color-primary);
}

/* 键盘焦点：保留清楚的轮廓，而不是移除 */
input:focus-visible,
select:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

input:disabled,
select:disabled {
  background: #eceae4;
  color: var(--color-muted);
  cursor: not-allowed;
}

/* 错误字段：由以后的 app.js 设置 aria-invalid="true"（不在用户还没填写时就变红） */
input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--color-danger);
  border-width: 2px;
}

.form-actions {
  display: flex;
}

.btn {
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

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

.btn-secondary:hover:not(:disabled) {
  background: var(--color-primary-soft);
}

.btn:disabled {
  background: #e3e0d8;
  color: #6b736d;
  border-color: #cfcabd;
  cursor: not-allowed;
}

/* ---------- 4. 预算卡片 ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.stat {
  min-width: 0;
  padding: var(--space-2);
  background: #faf8f3;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.stat dt {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.stat dd {
  margin: 0.15rem 0 0;
}

/* 金额：等宽数字，过长时允许换行，不撑宽页面 */
.amount {
  font-family: var(--font-number);
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* “可自由支配金额”最醒目：占满一行，深绿色大字 */
.stat-main {
  grid-column: 1 / -1;
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.stat-main dt {
  color: var(--color-primary-dark);
  font-size: 0.95rem;
  font-weight: 600;
}

.stat-main .amount {
  color: var(--color-primary);
  font-size: 2rem;
}

/* 当前设置：每项一行，名称在左、值在右 */
.settings-list {
  margin: 0;
}

.settings-list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}

.settings-list > div:last-child {
  border-bottom: 0;
}

.settings-list dt {
  color: var(--color-muted);
}

.settings-list dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ---------- 5. 交易记录 ---------- */
/* 表格太宽时只在这个容器里横向滚动，不撑宽整个页面 */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th, td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: anywhere;      /* 长描述、长汇率来源自动换行 */
}

thead th {
  background: #faf8f3;
  color: var(--color-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.num {
  text-align: right;
  font-family: var(--font-number);
  font-variant-numeric: tabular-nums;
}

th.num {
  font-family: inherit;
}

/* 表格单元格里的次要说明（汇率日期、来源等） */
.sub-line {
  display: block;
  color: var(--color-muted);
  font-family: var(--font-main);
  font-size: 0.8rem;
  text-align: right;
}

/* 空状态与加载中 */
td.empty,
.empty {
  padding: var(--space-4) var(--space-3);
  text-align: center;
  color: var(--color-muted);
}

/* ---------- 6. 状态：提示、收入/支出、负数 ---------- */
/* 提示框：没有内容时自动隐藏（:empty），有内容后由 JavaScript 加上状态 class */
.notice {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-left-width: 5px;
  border-radius: 8px;
  background: #fff;
}

.notice:empty {
  display: none;
}

.notice-success,
.is-success {
  background: var(--color-success-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.notice-error,
.is-error {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.notice-warning,
.is-warning {
  background: var(--color-warning-soft);
  border-color: #c58a00;
  color: var(--color-warning);
}

.is-loading {
  color: var(--color-muted);
}

/* 收入、支出、负数（用在金额或表格行上；除颜色外还应有文字或符号说明） */
.is-income { color: var(--color-primary); }
.is-expense { color: var(--color-text); }
.is-negative { color: var(--color-danger); }
.stat-main .amount.is-negative { color: var(--color-danger); }

/* ---------- 7. 响应式：平板与电脑 ---------- */
@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-subgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-wide,
  .form-actions {
    grid-column: 1 / -1;       /* 占满整行 */
  }

  .btn-primary {
    width: auto;
    min-width: 160px;
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-header,
  .layout {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* 电脑：两列。记账表单在左，当前设置在右；预算、首次设置、记录占满整行 */
  .layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-4);
    align-items: start;
  }

  .card-full {
    grid-column: 1 / -1;
  }

  .card {
    padding: var(--space-4);
  }

  .stat-main {
    grid-column: span 3;
  }
}

/* 用户在系统里选择了“减少动态效果”：关闭所有过渡与动画 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 语言与演示标识是界面设置，金额和用户输入不随语言改写。 */
.language-bar { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:.5rem; max-width:1200px; margin:.6rem auto; padding:0 1rem; }
.language-bar button { min-height:40px; padding:.35rem .7rem; background:white; border:1px solid #abc0b5; border-radius:8px; color:#183c2a; cursor:pointer; }
.language-bar button[aria-pressed="true"] { background:#1e5a3c; color:white; }
.section-nav { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:.8rem; }
.section-nav a { color:inherit; text-underline-offset:3px; }
.demo-banner { max-width:1168px; margin:.5rem auto; padding:1rem; background:#fff0d1; border:2px solid #b97800; border-radius:12px; color:#593600; }
.demo-banner p { margin:.3rem 0 0; }
.period-controls { align-items:flex-end; flex-wrap:wrap; }
.period-controls .field { flex:1; min-width:170px; }
#period-summary-body td { white-space:nowrap; }
#ai-session-list { overflow-wrap:anywhere; }
@media (max-width:600px) { .demo-banner { margin:.5rem .7rem; } .period-controls { gap:.5rem; } .period-controls .field { order:-1; flex-basis:100%; } }

@media (max-width:600px) {
  #period-summary-table { min-width:0; width:100%; display:block; }
  #period-summary-table thead { display:none; }
  #period-summary-table tbody { display:block; }
  #period-summary-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid #d8e2dc; border-radius:10px; margin:.5rem 0; padding:.5rem; }
  #period-summary-table td { display:block; white-space:normal; border:0; padding:.35rem; overflow-wrap:anywhere; }
  #period-summary-table td::before { content:attr(data-label); display:block; color:#52655b; font-size:.75rem; margin-bottom:.15rem; }
  #period-summary-table td:first-child { grid-column:1/-1; font-weight:600; }
}
/* 长英文标题和AI状态在手机上换行，不能把整个页面撑宽。 */
.header-row { flex-wrap:wrap; }
.header-row h1 { flex:1 1 auto; }
#instance-ai-state { order:10; flex-basis:100%; margin:0; }

.advice-card { border-left:3px solid #96b1a0; padding:.7rem .8rem; margin:.8rem 0; background:#f7faf8; border-radius:8px; }
.advice-references { list-style:none; padding:0; margin:.6rem 0; }
.reference-button { display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; width:100%; min-height:44px; padding:.65rem; border:1px solid #c9d8cf; border-radius:8px; background:white; color:#213b2c; text-align:left; white-space:normal; cursor:pointer; }
.reference-button span { overflow-wrap:anywhere; max-width:100%; }
#reference-details p,#plan-estimate-output p { overflow-wrap:anywhere; }
#plan-list li .btn { margin:.25rem .5rem .25rem 0; }

/* 预测场景分开呈现，单件方案是替代选择，不能叠加资金。 */
.forecast-scenario { border:1px solid #d5e0d9; border-radius:8px; padding:.85rem; margin:.8rem 0; overflow-wrap:anywhere; }

#ai-price-basis, #ai-history-estimate, #ai-total-reestimate, #ai-end-summary { overflow-wrap:anywhere; }