/* ============================================================
   养车记账 · 样式表
   HTML 只管「页面上有什么」，这个文件管「长什么样」
   ============================================================ */

/* ===== 1. 全站配色 =====
   下面这些叫「CSS 变量」。把 --primary 换成别的颜色，整页按钮会一起变色，
   不用一个个去找。新手改代码从这里开始最安全。 */
:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #1a1a1a;
  --muted: #888888;
  --primary: #2f6fed;
  --danger: #d93025;
  --border: #e5e7eb;
  --radius: 12px;
}

* { box-sizing: border-box; }

/* 兜底：保证 JS 里写 el.hidden = true 时一定藏得住 */
[hidden] { display: none !important; }

/* 横竖屏切换时字号不突然变大 */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  padding: 16px;
  /* env(safe-area-inset-*) 只有在 HTML 里写了 viewport-fit=cover 才生效。
     作用：给刘海、状态栏、底部 Home 指示条让出位置。老浏览器会当成 0，不会出错。 */
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* 电脑上预览时收成手机宽度，看起来和 iPhone 上一致 */
@media (min-width: 600px) {
  body { max-width: 480px; margin: 0 auto; }
}

.page-header { padding: 8px 4px 16px; }
.page-header h1 { margin: 0; font-size: 24px; }
.page-header p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.card h2 { margin: 0 0 16px; font-size: 17px; }

/* ===== 2. 表单 ===== */
.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.optional { color: var(--muted); font-weight: 400; }

/* 关键：iOS Safari 里输入框字号小于 16px 时，点一下整页会自动放大，
   而且全屏模式下缩不回来。所以这里硬性写 16px。 */
input, select, button {
  font-family: inherit;
  font-size: 16px;
  touch-action: manipulation; /* 去掉双击缩放的延迟 */
}

input, select {
  width: 100%;
  min-height: 44px;           /* Apple 建议手指点击区域至少 44×44 */
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}

input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* JS 校验不通过时会给控件加上 aria-invalid="true" */
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--danger);
}

.amount-row { display: flex; align-items: center; gap: 8px; }
.amount-row .currency { color: var(--muted); font-size: 16px; }
.amount-row input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }

.error {
  min-height: 1.2em;          /* 预留高度，报错出现时页面不跳动 */
  margin: 0 0 10px;
  color: var(--danger);
  font-size: 14px;
}

.btn-primary {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:active { opacity: 0.85; }

/* ===== 3. 费用列表 =====
   用 Flex 小卡片，不用 <table>：窄屏上表格会被挤得看不清。 */
.empty-hint { margin: 0; color: var(--muted); font-size: 14px; }
.warning {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff4e5;
  color: #8a5300;
  font-size: 14px;
}

.expense-list { list-style: none; margin: 0; padding: 0; }
.expense-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.expense-item:last-child { margin-bottom: 0; }

.row-top, .row-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.row-bottom { margin-top: 6px; }

.expense-date { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.expense-category { font-weight: 600; font-size: 15px; }
.expense-amount {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums; /* 数字等宽，上下金额对齐 */
}
.btn-delete {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
}
.expense-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  word-break: break-word;
}