/*
 * 立替アプリ の見た目。
 *
 * 配色・角丸・文字の決めごとは Android 版 docs/UI_DESIGN.md をそのまま持ってきている。
 * 落ち着いた深緑を基調に、金額の正負が一目で分かることを両立させる。
 *
 * **色だけで情報を伝えない。** 差額には必ず符号（+ / - / ±）も併記する。
 */

:root {
  /* ── 基本色（ライト）───────────────────────────── */
  --primary: #2f6f5e;
  --on-primary: #ffffff;
  --primary-container: #cfe9e0;
  --on-primary-container: #10352b;
  --secondary: #7a5c3e;
  --secondary-container: #f0e0cd;
  --on-secondary-container: #3a2a17;
  --tertiary-container: #dfe3f2;
  --on-tertiary-container: #2a2f45;

  --background: #f7f5f2;
  --surface: #ffffff;
  --surface-variant: #eceae6;
  --surface-high: #f1efeb;
  --on-surface: #1b1c1b;
  --on-surface-variant: #4c534f;
  --outline: #d5d2cd;

  /* ── 意味色 ────────────────────────────────────
   * plus  … 多く払っている / minus … 立替えてもらっている */
  --plus: #1b6b45;
  --minus: #b3261e;
  --neutral: #4c534f;
  --error-container: #fbdad7;
  --on-error-container: #6b1610;
  --warn-container: #fdf0d5;
  --on-warn-container: #58421a;

  /* ── 角丸（UI_DESIGN.md の shapes）──────────────── */
  --r-tag: 8px;
  --r-small: 12px;
  --r-card: 16px;
  --r-dialog: 24px;

  --max-width: 760px;
  --nav-height: 60px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #7fd3bc;
    --on-primary: #063428;
    --primary-container: #1f4d41;
    --on-primary-container: #cfe9e0;
    --secondary: #e4c29b;
    --secondary-container: #4b3826;
    --on-secondary-container: #f0e0cd;
    --tertiary-container: #333a52;
    --on-tertiary-container: #dfe3f2;

    --background: #14171a;
    --surface: #1d2125;
    --surface-variant: #272c31;
    --surface-high: #232830;
    --on-surface: #e3e3e0;
    --on-surface-variant: #bfc5c1;
    --outline: #3a4046;

    --plus: #79d6a5;
    --minus: #ffb4ab;
    --neutral: #bfc5c1;
    --error-container: #5b1c17;
    --on-error-container: #ffdad6;
    --warn-container: #4a3a18;
    --on-warn-container: #f6e0b5;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--background);
  color: var(--on-surface);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP',
    'Yu Gothic UI', Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* 金額には等幅数字を効かせる。
   プロポーショナル数字だと桁がずれ、縦に並べたときに読み比べられない */
.num,
.amount,
td.num,
th.num {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
}

button {
  font: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ══════════════════════════ 骨組み ══════════════════════════ */

#app {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 12px calc(var(--nav-height) + 24px);
}

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  margin: -12px -12px 8px;
  padding-left: 16px;
  padding-right: 16px;
  background: var(--background);
  border-bottom: 1px solid var(--outline);
}

.appbar h1 {
  flex: 1;
  font-size: 17px;
}

.appbar .who {
  font-size: 12px;
  color: var(--on-surface-variant);
}

/* 画面下のナビゲーション。3 枚を常設する */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  height: var(--nav-height);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--outline);
}

.nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: none;
  color: var(--on-surface-variant);
  font-size: 12px;
}

.nav button .dot {
  width: 44px;
  height: 26px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

/* 「選ばれている色」は緑ひとつに揃える。
   2 系統あると、どれがいま選ばれているのか読み取れなくなる */
.nav button[aria-current='page'] {
  color: var(--primary);
  font-weight: 600;
}

.nav button[aria-current='page'] .dot {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

/* ══════════════════════════ 部品 ══════════════════════════ */

.card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  padding: 14px;
  margin-bottom: 12px;
}

/* カードの見出しには細い縦棒を添える。
   カードを縦に積む画面なので、これがないと 1 枚の切れ目を目で追えない */
.card > h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 10px;
}

.card > h2::before {
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--primary);
}

.hint {
  font-size: 12px;
  line-height: 1.7;
  color: var(--on-surface-variant);
  margin: 4px 0 0;
}

.field {
  margin-bottom: 14px;
}

.field > label,
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

input[type='text'],
input[type='password'],
input[type='number'],
input[type='date'],
input[type='month'],
input[type='search'],
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--outline);
  border-radius: var(--r-small);
  background: var(--surface);
  min-height: 44px;
}

input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

input.amount-input {
  font-size: 24px;
  font-weight: 600;
  text-align: right;
  padding: 8px 12px;
}

.row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.grow {
  flex: 1;
  min-width: 0;
}

/* ボタン */
.btn {
  border: 1px solid transparent;
  border-radius: var(--r-small);
  padding: 10px 16px;
  min-height: 44px;
  background: var(--surface-variant);
  color: var(--on-surface);
}

.btn.primary {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}

.btn.outline {
  background: transparent;
  border-color: var(--outline);
}

.btn.text {
  background: none;
  padding: 8px 10px;
  color: var(--primary);
}

.btn.danger {
  background: transparent;
  border-color: var(--minus);
  color: var(--minus);
}

/* 「押せば済む近道」は銅で目立たせる（実支払のクイックボタン） */
.btn.quick {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 40px;
  font-size: 13px;
}

.btn.block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* チップ（項目・種別） */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  border: 1px solid var(--outline);
  background: var(--surface);
  border-radius: var(--r-small);
  padding: 8px 14px;
  min-height: 40px;
  font-size: 14px;
}

.chip[aria-pressed='true'] {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-color: transparent;
  font-weight: 600;
}

/* 種別切替（セグメンテッドボタン） */
.segmented {
  display: flex;
  border: 1px solid var(--outline);
  border-radius: var(--r-small);
  overflow: hidden;
}

.segmented button {
  flex: 1;
  border: 0;
  background: var(--surface);
  padding: 10px;
  min-height: 44px;
}

.segmented button[aria-pressed='true'] {
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-weight: 600;
}

/* タグ。下地は種類ごとに変える。同じ色だと並んだとき区別が付かない */
.tag {
  display: inline-block;
  border-radius: var(--r-tag);
  padding: 1px 7px;
  font-size: 11px;
  line-height: 1.7;
  white-space: nowrap;
  background: var(--surface-variant);
  color: var(--on-surface-variant);
}

.tag.fixed {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.tag.settlement {
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
}

.tag.editing {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

/* 参考 / ◯月分 は枠線のみ */
.tag.ref {
  background: transparent;
  border: 1px solid var(--outline);
  color: var(--on-surface-variant);
}

/* 注意帯 */
.notice {
  border-radius: var(--r-small);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 12px;
}

.notice.warn {
  background: var(--warn-container);
  color: var(--on-warn-container);
}

.notice.error {
  background: var(--error-container);
  color: var(--on-error-container);
}

.notice.info {
  background: var(--surface-variant);
  color: var(--on-surface-variant);
}

/* 金額の正負 */
.plus {
  color: var(--plus);
}

.minus {
  color: var(--minus);
}

.zero {
  color: var(--neutral);
}

/* スイッチ */
.switch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}

.switch input {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
}

/* 横スクロールする場所。メンバーが増えると帯も表も画面幅に収まらない */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════ 立替金額の帯 ══════════════════════════ */

.balance-bar {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.balance-bar .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.balance-bar .head h2 {
  font-size: 13px;
}

.balance-bar .head .as-of {
  font-size: 11px;
  color: var(--on-surface-variant);
}

.balance-cards {
  display: flex;
  gap: 8px;
}

.balance-cards .who {
  flex: 1 0 auto;
  min-width: 118px;
  background: var(--surface-variant);
  border-radius: var(--r-small);
  padding: 8px 10px;
}

.balance-cards .who .name {
  font-size: 12px;
  color: var(--on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.balance-cards .who .value {
  font-size: 19px;
  font-weight: 700;
}

.balance-bar .unrecorded {
  margin-top: 8px;
  font-size: 12px;
  color: var(--minus);
}

/* ══════════════════════════ 表 ══════════════════════════ */

table.member-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.member-table th,
table.member-table td {
  padding: 6px 8px;
  text-align: right;
  white-space: nowrap;
}

table.member-table th:first-child,
table.member-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--surface);
}

table.member-table thead th {
  font-size: 12px;
  color: var(--on-surface-variant);
  font-weight: 600;
  border-bottom: 1px solid var(--outline);
}

/* 1 行おきに下地を敷く。推移は 14 行並ぶので、これがないと隣の月の数字を読む */
table.member-table tbody tr:nth-child(odd) td {
  background: var(--surface-high);
}

table.member-table tbody tr:nth-child(odd) td:first-child {
  background: var(--surface-high);
}

table.member-table tfoot td {
  border-top: 1px solid var(--outline);
  font-weight: 600;
}

/* ══════════════════════════ 明細 ══════════════════════════ */

.entry-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.entry {
  border: 1px solid var(--outline);
  border-radius: var(--r-small);
  background: var(--surface);
  overflow: hidden;
}

/* 総差額 ≠ 0 の行は左端に赤い縦線（Web 版の .bad に相当） */
.entry.bad {
  border-left: 3px solid var(--minus);
}

.entry.is-settlement {
  background: var(--surface-variant);
}

.entry > .summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 10px 12px;
  min-height: 48px;
}

.entry .date {
  font-size: 12px;
  color: var(--on-surface-variant);
  width: 40px;
  flex: none;
}

.entry .title {
  flex: 1;
  min-width: 0;
}

.entry .title .name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
}

.entry .title .note {
  font-size: 12px;
  color: var(--on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry .money {
  font-weight: 600;
  white-space: nowrap;
}

.entry .detail {
  border-top: 1px solid var(--outline);
  padding: 10px 12px;
}

.entry .detail .parts {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--on-surface-variant);
}

.entry .detail .parts li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}

/* ══════════════════════════ 項目別の出費（横棒） ══════════════════════════ */

.bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bars .bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  font-size: 13px;
}

.bars .track {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 4px;
  background: var(--surface-variant);
  overflow: hidden;
}

.bars .fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
}

/* ══════════════════════════ ダイアログ ══════════════════════════ */

dialog {
  border: 0;
  border-radius: var(--r-dialog);
  padding: 0;
  width: min(440px, calc(100vw - 32px));
  background: var(--surface);
  color: var(--on-surface);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

dialog .dialog-body {
  padding: 20px;
}

dialog h2 {
  font-size: 16px;
  margin-bottom: 10px;
}

/* 確認ダイアログの本文は縦スクロールさせる。
   長い確認文が小さい画面で末尾が切れると、同意すべき内容が読めない */
dialog .scroll {
  max-height: min(46vh, 380px);
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-wrap;
}

dialog .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ══════════════════════════ 通知 ══════════════════════════ */

.snackbar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + 16px);
  transform: translateX(-50%);
  z-index: 40;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  border-radius: var(--r-small);
  background: var(--on-surface);
  color: var(--surface);
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.snackbar.error {
  background: var(--minus);
  color: #fff;
}

/* ══════════════════════════ ログイン ══════════════════════════ */

.auth {
  max-width: 380px;
  margin: 48px auto;
  padding: 0 16px;
}

.auth h1 {
  font-size: 20px;
  margin-bottom: 4px;
}

/* ══════════════════════════ はじめての案内 ══════════════════════════ */

.guide-card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.guide-card .head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.guide-card .dots {
  display: flex;
  gap: 6px;
  flex: 1;
  align-items: center;
}

.guide-card .dots i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-variant);
}

.guide-card .dots i.done {
  background: var(--primary);
}

.guide-card .dots i.now {
  width: 16px;
}

.guide-card .step-no {
  font-size: 12px;
  color: var(--on-surface-variant);
}

.guide-card .close {
  border: 0;
  background: none;
  color: var(--on-surface-variant);
  font-size: 18px;
  line-height: 1;
  padding: 6px 8px;
}

.guide-card h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

/* ══════════════════════════ 設定 ══════════════════════════ */

.menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 14px;
  min-height: 60px;
}

.menu button .label {
  font-weight: 600;
  font-size: 15px;
}

.menu button .summary {
  display: block;
  font-size: 12px;
  color: var(--on-surface-variant);
}

/* メンバーの合計と保存は画面下に固定する。
   100 人ぶん送ってから保存ボタンを探すことにならないように */
.sticky-actions {
  position: sticky;
  bottom: calc(var(--nav-height) + 8px);
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  padding: 10px 12px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.member-row {
  border: 1px solid var(--outline);
  border-radius: var(--r-small);
  padding: 10px;
  margin-bottom: 8px;
}

.member-row .top {
  display: flex;
  gap: 8px;
  align-items: center;
}

.member-row .percent {
  width: 92px;
  flex: none;
}

dl.terms {
  margin: 0;
}

dl.terms dt {
  font-weight: 600;
  font-size: 14px;
  margin-top: 12px;
}

dl.terms dd {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--on-surface-variant);
  line-height: 1.8;
}

.muted {
  color: var(--on-surface-variant);
}

.empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--on-surface-variant);
  font-size: 13px;
}

.hidden {
  display: none !important;
}