/**
 * Travel Assistant — 账本页（MVP2 记账模块）样式
 *
 * 与 trip.css 对仗：main.css 为全局基础组件，trip.css 为行程页，本文件为账本页。
 * 颜色沿用 AI Studio 原型"暖色账本"风格（--color-expense-* token）。
 */

/* ========== 账本页头部（.page-header/.page-eyebrow 共用 main.css，暖色用 modifier） ========== */

/* 记一笔账按钮：账本黄（原型 #fdd669），区别于行程蓝；尺寸统一走 .btn 基础类 */
.btn-expense {
  background: var(--color-expense-accent);
  color: #241a00;
}
.btn-expense:hover { background: #e8c358; }

/* 记账弹窗的保存按钮：账本暗金主色（--color-expense-primary #745b00），
   与账本页 FAB / 导航高亮同色系，区别于行程页的蓝色 btn-primary */
.btn-expense-primary {
  background: var(--color-expense-primary);
  color: #fff;
}
.btn-expense-primary:hover { background: #5d4a00; }
.btn-expense-primary:active { background: #4a3c00; }

.ledger-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

/* ---- 行程 chips（倒角圆角，与原型 rounded-lg 一致） ---- */
.ledger-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.ledger-chips::-webkit-scrollbar { display: none; }
.ledger-chip {
  padding: 5px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
  background: #fff;
  border: 1px solid var(--color-border);
  white-space: nowrap;
  flex-shrink: 0;
}
.ledger-chip.active {
  background: var(--color-expense-primary);
  color: #fff;
  border-color: var(--color-expense-primary);
}

/* ---- 开支明细 / 分类统计 切换（带 icon） ---- */
.ledger-viewswitch {
  display: flex;
  background: var(--color-container-low);
  border-radius: 10px;
  padding: 2px;
  align-self: flex-start;
}
.ledger-viewswitch button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
}
.ledger-viewswitch button svg { width: 14px; height: 14px; color: var(--color-expense-primary); }
.ledger-viewswitch button.active {
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ---- 顶部汇总卡 ---- */
.summary-card {
  position: relative;
  background: #fffdf7;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
.summary-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.summary-label { font-size: 11px; color: var(--color-text-secondary); }
.summary-amount { font-size: 22px; font-weight: 800; color: var(--color-text); margin-top: 2px; }
.summary-home {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-expense-primary);
  background: rgba(253, 214, 105, 0.25);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  margin-top: 4px;
}
.summary-budget { text-align: right; padding-right: 30px; } /* 给右上角 ⋮ 菜单留位，避免与金额重合 */
.summary-budget-val { font-size: 14px; font-weight: 700; color: var(--color-text); margin-top: 2px; }
.summary-more {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--color-expense-primary);
}
.summary-more .three-dots-btn { padding: 4px; border-radius: 6px; display: flex; }
.budget-bar-wrap { margin-top: 12px; }
.budget-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.budget-bar {
  width: 100%;
  height: 10px;
  background: var(--color-container-low);
  border-radius: 999px;
  overflow: hidden;
}
.budget-bar-fill {
  height: 100%;
  background: var(--color-expense-primary);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.budget-bar-fill.danger { background: var(--color-danger); }

/* ---- 开支明细 ---- */
.ledger-catfilters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.ledger-catfilters::-webkit-scrollbar { display: none; }
.chip {
  padding: 5px 10px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  background: #fff;
  border: 1px solid var(--color-border);
  white-space: nowrap;
  flex-shrink: 0;
}
.chip.active {
  background: var(--color-expense-primary);
  color: #fff;
  border-color: var(--color-expense-primary);
}
.ledger-group { margin-bottom: 14px; }
.ledger-group-date {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-expense-primary);
  margin-bottom: 6px;
  padding-left: 2px;
}
.ledger-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  /* 不用 overflow:hidden（会裁掉行内 ⋮ 菜单的绝对定位下拉），改为首尾行圆角 */
}
.expense-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  transition: background 0.15s;
  cursor: pointer;  /* 整行可点击进入编辑 */
}
.expense-row:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.expense-row:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.expense-row:hover { background: var(--color-expense-bg); }
.expense-row + .expense-row { border-top: 1px solid var(--color-border); }
.expense-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(253, 214, 105, 0.3); /* 原型黄底 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.expense-row-icon svg { width: 16px; height: 16px; }
.expense-row-body { flex: 1; min-width: 0; }
.expense-row-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.expense-row-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-secondary);
  background: var(--color-container-low);
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}
.expense-row-sub {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.expense-row-amount { text-align: right; flex-shrink: 0; }
.expense-row-val { font-size: 13px; font-weight: 800; color: var(--color-text); }
.expense-row-home { font-size: 10px; font-weight: 600; color: var(--color-expense-primary); }
/* 每行右侧 ⋮ 菜单（修改/删除），与金额之间留一点间距 */
.expense-row .three-dots { margin-left: 4px; }
.expense-row .three-dots-btn { padding: 4px; border-radius: 6px; display: flex; color: var(--color-text-tertiary); }

/* ---- 分类统计 ---- */
.analytics-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}
.analytics-title { font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 10px; }
.analytics-count { font-size: 11px; font-weight: 500; color: var(--color-text-secondary); margin-left: 6px; }
.analytics-donut-wrap { position: relative; width: 150px; height: 150px; margin: 0 auto 14px; }
.donut { width: 100%; height: 100%; border-radius: 50%; }
.donut-center {
  position: absolute;
  inset: 25px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--color-text-secondary);
}
.donut-center div:last-child { font-size: 15px; font-weight: 800; color: var(--color-text); }
.analytics-legend { display: flex; flex-direction: column; gap: 8px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legend-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.legend-count { color: var(--color-text-secondary); font-weight: 500; }
.legend-val { text-align: right; flex-shrink: 0; }
.legend-main { display: block; font-weight: 800; color: var(--color-text); }
.legend-home { display: block; font-size: 10px; font-weight: 700; color: var(--color-expense-primary); }
.cat-bar-row { padding: 8px 0; }
.cat-bar-row + .cat-bar-row { border-top: 1px solid var(--color-container-low); }
.cat-bar-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 4px;
}
.cat-bar-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--color-text);
}
.cat-bar-name svg { width: 15px; height: 15px; color: var(--color-expense-primary); }
.cat-bar-val { text-align: right; font-weight: 800; color: var(--color-text); }
.cat-bar { width: 100%; height: 8px; background: var(--color-container-low); border-radius: 999px; overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.analytics-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pay-row { padding: 6px 0; }
.pay-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}
.pay-bar { width: 100%; height: 6px; background: var(--color-container-low); border-radius: 999px; overflow: hidden; }
.pay-bar-fill { height: 100%; border-radius: 999px; }
.top-card { background: var(--color-expense-bg); border-color: var(--color-expense-accent); }
.top-title { font-size: 15px; font-weight: 800; color: var(--color-text); margin-bottom: 2px; }
.top-sub { font-size: 11px; color: var(--color-text-secondary); }
.top-meta { font-size: 11px; color: var(--color-text-secondary); margin: 6px 0; }
.top-amount { font-size: 18px; font-weight: 800; color: var(--color-expense-primary); }
.top-home { font-size: 11px; font-weight: 700; color: var(--color-expense-primary); }

/* ---- 记账弹窗：本币 / 汇率 / 本币金额 行 ----
   无背景（与其他行一致），三个控件等高（44px），
   本币金额只读、窄一点、字小一点，把空间留给前面两个可编辑框 */
.rate-field {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.rate-field > div { min-width: 0; }
.rate-field select,
.rate-field input,
.rate-field .expense-home-amount {
  height: 44px;
  box-sizing: border-box;
  font-size: 12px;
  padding: 0 10px;
}
.rate-field select { width: 100%; }
.rate-field .expense-home-amount {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-expense-primary);
  background: var(--color-container-low);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}