/* ================================================================
   消费轨迹系统 — add.css
   记账页：金额展示、日期行、分类网格、数字键盘、折叠区
   移动端优先：金额吸顶，键盘紧贴分类，低频字段默认折叠
   ================================================================ */

/* -----------------------------------------------------------------
   记账页整体容器
   ----------------------------------------------------------------- */
.add-container {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* -----------------------------------------------------------------
   1. 头部区（日期 + 金额，共同吸顶）
   ----------------------------------------------------------------- */
.add-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  padding-bottom: var(--space-xs);
}

/* 金额展示区 */
.add-amount-display {
  text-align: center;
  padding: 2px 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.add-amount__currency {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.add-amount__value {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
}

.add-amount__value--empty {
  color: var(--color-text-tertiary);
}

.add-amount__decimal {
  font-size: 16px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* -----------------------------------------------------------------
   2. 日期行（紧凑可点击，替代两个独立 input）
   ----------------------------------------------------------------- */
.add-date-row {
  text-align: center;
}

.add-date-quick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-divider);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.add-date-quick:hover {
  background: var(--color-border);
}

.add-date-inputs {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  justify-content: center;
}

.add-date-inputs .input {
  width: auto;
  flex: 1;
  max-width: 160px;
}

/* -----------------------------------------------------------------
   3. 分类选择区
   ----------------------------------------------------------------- */
.add-category-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.add-section__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add-required {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
}

/* 选中后摘要行 — 替代分类网格，大幅省空间 */
.add-category-summary {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: #EBF3FC;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.add-category-summary__icon {
  font-size: 18px;
}

.add-category-summary__text {
  flex: 1;
  font-weight: 500;
  color: var(--color-primary);
}

.add-category-summary__edit {
  font-size: 11px;
  color: var(--color-primary);
  background: none;
  border: none;
  padding: 2px 6px;
  cursor: pointer;
}

/* 一级分类网格（4 列） */
.add-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

/* 子分类横向滚动行 */
.add-subcategories {
  padding: var(--space-xs) 0;
}

/* --- 分类按钮 --- */
.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  -webkit-user-select: none;
  text-align: center;
  aspect-ratio: auto;
}

.cat-btn:hover {
  background: var(--color-divider);
  border-color: var(--color-primary-light);
}

.cat-btn--selected {
  border-color: var(--color-primary);
  background: #EBF3FC;
  box-shadow: 0 0 0 1px var(--color-primary);
}

.cat-btn__icon {
  font-size: 24px;
  line-height: 1;
}

.cat-btn__name {
  font-size: 11px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 子分类用横向 chip 风格 */
.cat-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  -webkit-user-select: none;
  min-width: 52px;
  flex-shrink: 0;
}

.cat-chip:hover {
  border-color: var(--color-primary-light);
}

.cat-chip--selected {
  border-color: var(--color-primary);
  background: #EBF3FC;
  color: var(--color-primary);
}

.cat-chip__icon {
  font-size: 18px;
}

.cat-chip__name {
  font-size: 10px;
  white-space: nowrap;
}

/* -----------------------------------------------------------------
   4. 支付方式行（紧凑 chip 行）
   ----------------------------------------------------------------- */
.add-payment-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.add-payment-methods {
  display: flex;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.add-payment-methods::-webkit-scrollbar {
  display: none;
}

/* 支付 chip 在滚动容器内禁止收缩换行 */
.add-payment-methods .chip {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 支付 chip */
.chip--payment {
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
  transition: all var(--transition-fast);
  gap: 0;
}

.chip--payment.chip--active {
  font-weight: 600;
}

/* -----------------------------------------------------------------
   5. 紧凑字段行（地点 / 备注，始终可见）
   ----------------------------------------------------------------- */
.add-compact-fields {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.add-compact-label {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.input--compact {
  flex: 1;
  padding: 4px var(--space-md);
  font-size: var(--font-size-sm);
  height: 28px;
}

/* 地点类型切换（跟在地点输入后面） */
.add-location-type {
  display: flex;
  gap: var(--space-xs);
}

.add-location-type .chip {
  font-size: 10px;
  padding: 1px 6px;
}

/* -----------------------------------------------------------------
   6. 数字键盘
   ----------------------------------------------------------------- */
.add-numpad {
  margin-top: 0;
  flex-shrink: 0;
}

/* 数字键盘按键在记账页更紧凑 */
.add-numpad .numpad__key {
  padding: 10px;
}

/* 保存按钮激活状态 */
.numpad__key--submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}