/* 医療費ログ — アプリ共通スタイル（骨格。デザインは実装フェーズで詰める） */
:root {
  --iryouhi-primary: #2e7d66; /* 深緑（医療・安心のトーン。経費ログの青と区別） */
}

body {
  background: #f6f8f7;
  padding-bottom: 72px; /* ボトムナビぶん */
}

.app-header {
  background: var(--iryouhi-primary);
  position: sticky;
  top: 0;
  z-index: 1020;
}

#appMain {
  max-width: 480px;
  padding-top: 1rem;
}

/* ボトムナビ */
.nav-item-btn {
  flex: 1 1 0;
  border: 0;
  background: none;
  padding: .4rem 0 calc(.4rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #8a9490;
  font-size: .65rem;
}
.nav-item-btn i { font-size: 1.25rem; line-height: 1; }
.nav-item-btn.active { color: var(--iryouhi-primary); font-weight: 600; }

/* ビュー切替のフェードイン（router.jsが付与） */
.view-fade-in { animation: viewFadeIn .18s ease-out; }
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.btn-primary {
  --bs-btn-bg: var(--iryouhi-primary);
  --bs-btn-border-color: var(--iryouhi-primary);
  --bs-btn-hover-bg: #256555;
  --bs-btn-hover-border-color: #256555;
  --bs-btn-active-bg: #1e5546;
  --bs-btn-active-border-color: #1e5546;
}
.btn-outline-primary {
  --bs-btn-color: var(--iryouhi-primary);
  --bs-btn-border-color: var(--iryouhi-primary);
  --bs-btn-hover-bg: var(--iryouhi-primary);
  --bs-btn-hover-border-color: var(--iryouhi-primary);
  --bs-btn-active-bg: var(--iryouhi-primary);
  --bs-btn-active-border-color: var(--iryouhi-primary);
}
.text-primary { color: var(--iryouhi-primary) !important; }
.spinner-border.text-primary { color: var(--iryouhi-primary) !important; }

/* ── 撮影ビュー ─────────────────────────────────── */
.person-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.person-chip {
  border: 1px solid #c6d2cd;
  background: #fff;
  color: #33413c;
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .85rem;
  white-space: nowrap;
}
.person-chip.selected {
  background: var(--iryouhi-primary);
  border-color: var(--iryouhi-primary);
  color: #fff;
  font-weight: 600;
}
.person-chip.add { border-style: dashed; color: #6c7a75; }

#captureCards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.capture-card {
  background: #fff;
  border: 1px solid #e3e9e6;
  border-radius: .5rem;
  overflow: hidden;
}
.capture-card.saved { cursor: pointer; }
.capture-card.error { border-color: #dc3545; }
.capture-thumb {
  height: 84px;
  background: #eef2f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.capture-thumb img { width: 100%; height: 100%; object-fit: cover; }
.capture-body { padding: .4rem .5rem; }

/* ── 明細ビュー ─────────────────────────────────── */
.list-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid #eef2f0;
  cursor: pointer;
}
.list-row:last-child { border-bottom: 0; }
.list-row.missing { box-shadow: inset 3px 0 0 #dc3545; }
.list-date { width: 44px; flex: none; font-size: .85rem; color: #55635e; }
.list-main { flex: 1 1 auto; min-width: 0; }
#listSelectMode.active { background: #e7efec; }

/* ── 累計ビュー（スタットタイル＋メーター） ───────── */
.hero-figure {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.hero-unit { font-size: .45em; font-weight: 500; margin-left: 2px; color: #55635e; }
.meter {
  height: 10px;
  border-radius: 999px;
  background: #d7e6e0; /* 同系のより薄いステップ（トラックも状態を語る） */
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--iryouhi-primary);
  transition: width .3s ease;
}
.meter-fill.reached { background: #1e7f4f; }
.tabular { font-variant-numeric: tabular-nums; }
.summary-table td { border: 0; padding: .25rem 0; }

/* ── 出力ビュー ─────────────────────────────────── */
.export-table th, .export-table td { white-space: nowrap; }
.export-table td:nth-child(3) { white-space: normal; min-width: 9em; }