/* ===========================
   家計簿アプリ CSS（レスポンシブ / ダークモード）
   v3: カテゴリ別予算進捗 / ダークモード入力視認性 / カード間隔調整
=========================== */

:root{
  --bg: #f6f7fb;
  --panel: #ffffff;
  --text: #121826;
  --muted: #667085;
  --border: #e5e7ef;
  --shadow: 0 8px 18px rgba(16, 24, 40, .10);

  --primary: #2563eb;
  --primary-weak: rgba(37, 99, 235, .12);
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #f59e0b;

  --amt-blue: #2563eb;
  --amt-orange: #f59e0b;
  --amt-red: #dc2626;
  --amt-purple: #7c3aed;
  --amt-gray: #64748b;

  --radius: 14px;
  --focus: 0 0 0 3px rgba(37, 99, 235, .25);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --tableHead: #f2f4ff;
}

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  color: var(--text);
  background: var(--bg);
}

body[data-theme="dark"]{
  --bg: #0b1220;
  --panel: #0f1a2d;
  --text: #e6eaf2;
  --muted: #a0aec0;
  --border: rgba(255,255,255,.10);
  --shadow: 0 10px 22px rgba(0,0,0,.38);

  --primary: #60a5fa;
  --primary-weak: rgba(96, 165, 250, .15);
  --tableHead: rgba(96,165,250,.10);

  --amt-blue: #60a5fa;
  --amt-orange: #fbbf24;
  --amt-red: #fb7185;
  --amt-purple: #a78bfa;
  --amt-gray: #94a3b8;
}

/* 入力欄の視認性（特にダークモード） */
input, select, textarea{ color: var(--text); }
input::placeholder, textarea::placeholder{ color: var(--muted); }

a{ color: inherit; }
.hidden{ display:none !important; }
.small{ font-size: .88rem; }
.muted{ color: var(--muted); }
.right{ text-align: right; }
.wrap{ flex-wrap: wrap; }
.gap-sm{ gap: .5rem; }

.container{ max-width: 1100px; margin: 0 auto; padding: 16px 16px 88px; }

.app-header{
  position: sticky; top: 0; z-index: 30;
  display:flex; align-items:center; justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
body[data-theme="dark"] .app-header{ background: rgba(15, 26, 45, .72); }

.brand{ display:flex; align-items:center; gap: 10px; }
.brand__icon{ width: 38px; height: 38px; border-radius: 12px; display:grid; place-items:center; background: var(--primary-weak); font-size: 20px; }
.brand h1{ margin: 0; font-size: 18px; line-height: 1.15; }
.brand p{ margin: 2px 0 0; }

.header-actions{ display:flex; gap: 8px; align-items:center; }
.footer{ padding: 16px 14px 24px; text-align:center; }

.tabbar{
  position: sticky; top: 64px; z-index: 25;
  display:flex; gap: 6px; padding: 10px 14px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
body[data-theme="dark"] .tabbar{ background: rgba(15, 26, 45, .72); }

.tab{
  flex: 1;
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 10px 10px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 700;
  color: var(--muted);
  transition: transform .04s ease, background .15s ease, color .15s ease;
}
.tab:active{ transform: translateY(1px); }
.tab.is-active{ background: var(--primary-weak); color: var(--text); border-color: rgba(37, 99, 235, .35); }

.screen{ display:none; animation: fadeIn .12s ease both; }
.screen.is-active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px);} to{ opacity:1; transform: translateY(0);} }

.screen-header{ display:flex; justify-content: space-between; align-items: center; margin: 12px 0; }
.screen-header h2{ margin: 0; font-size: 20px; }
.screen-header__right{ display:flex; align-items:center; gap: 8px; }

.pill{ display:inline-flex; align-items:center; gap: .3rem; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); }
.pill-select{ border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text); padding: 6px 10px; font-weight: 700; }

.grid{ display:grid; column-gap: 12px; row-gap: 16px; }
.grid.two{ grid-template-columns: 1fr 1fr; }
.grid.cards{ grid-template-columns: repeat(3, 1fr); }
.cards{ margin-top: 10px; }

.card{ background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); position: relative; isolation: isolate; }
.card__title{ font-weight: 800; margin-bottom: 8px; }
.card__sub{ margin-top: 6px; }

.card__value{ font-size: 28px; font-weight: 900; letter-spacing: .02em; }
.card__value.positive{ color: var(--success); }
.card__value.negative{ color: var(--danger); }

.amt-blue{ color: var(--amt-blue) !important; }
.amt-orange{ color: var(--amt-orange) !important; }
.amt-red{ color: var(--amt-red) !important; }
.amt-purple{ color: var(--amt-purple) !important; }
.amt-gray{ color: var(--amt-gray) !important; }

.row{ display:flex; align-items:center; }
.row-between{ display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.row.gap-sm{ gap: .5rem; }

.form{ display:flex; flex-direction: column; gap: 12px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label{ display:block; font-weight: 800; margin-bottom: 6px; }
.field input, .field select{
  width: 100%; box-sizing: border-box;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.75);
  color: var(--text);
  outline: none;
}
body[data-theme="dark"] .field input, body[data-theme="dark"] .field select{ background: rgba(0,0,0,.20); }
.field input:focus, .field select:focus{ box-shadow: var(--focus); border-color: rgba(37, 99, 235, .55); }
.field.inline{ display:flex; flex-direction: column; }
.field-error{ margin: 6px 0 0; color: var(--danger); font-size: .88rem; min-height: 1.1em; }
.form-actions{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: .4rem;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor:pointer;
  font-weight: 800;
  transition: transform .04s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
  user-select:none;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--primary); border-color: rgba(0,0,0,.0); color: #fff; }
.btn-outline{ background: transparent; border-color: rgba(37, 99, 235, .35); }
.btn-ghost{ background: transparent; }
.btn-danger{ background: var(--danger); color:#fff; border-color: rgba(0,0,0,.0); }
.btn[disabled]{ opacity: .55; cursor: not-allowed; }
.filelike{ display:inline-flex; align-items:center; }

/* アコーディオン */
.accordion{ padding: 0; }
.accordion__summary{ list-style: none; cursor: pointer; display:flex; align-items:center; justify-content: space-between; padding: 14px; user-select: none; }
.accordion summary::-webkit-details-marker{ display:none; }
.accordion__summary-left{ display:flex; align-items:center; gap: 10px; }
.accordion__caret{ font-weight: 900; transform: rotate(0deg); transition: transform .15s ease; }
.accordion[open] .accordion__caret{ transform: rotate(180deg); }
.accordion__title{ display:flex; align-items:center; gap: 10px; font-weight: 900; }
.accordion__body{ padding: 0 14px 14px; border-top: 1px solid var(--border); }

.filters{ display:flex; flex-direction: column; gap: 12px; }
.filters-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.filter-actions{ display:flex; gap: 8px; }
.segmented{ display:flex; gap: 6px; }
.seg{ border: 1px solid var(--border); background: var(--panel); padding: 8px 10px; border-radius: 999px; cursor:pointer; font-weight: 800; color: var(--muted); }
.seg.is-active{ background: var(--primary-weak); color: var(--text); border-color: rgba(37, 99, 235, .35); }

.report-subtabs{ display:flex; gap: 6px; margin: 10px 0; }

.table-wrap{ overflow:auto; border-radius: 12px; border: 1px solid var(--border); }
.table{ width: 100%; border-collapse: collapse; min-width: 860px; }
.table thead th{ background: var(--tableHead); padding: 10px; text-align:left; font-size: .88rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table tbody td{ padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }

.badge{ display:inline-flex; align-items:center; padding: 4px 8px; border-radius: 999px; font-weight: 900; font-size: .8rem; border: 1px solid var(--border); }
.badge.expense{ color: var(--danger); background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.25); }
.badge.income{ color: var(--success); background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.25); }

.inline-actions{ display:flex; gap: 8px; justify-content: flex-end; }
.icon-btn{ border: 1px solid var(--border); background: transparent; border-radius: 10px; padding: 6px 8px; cursor:pointer; }

.list{ list-style: none; padding: 0; margin: 12px 0 0; display:flex; flex-direction: column; gap: 10px; }
.list-item{ display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.55); }
body[data-theme="dark"] .list-item{ background: rgba(0,0,0,.18); }
.list-item .left{ display:flex; align-items:center; gap: 10px; }
.list-item input{
  width: 220px;
  max-width: 40vw;
  box-sizing: border-box;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.75);
  color: var(--text);
  outline: none;
}
body[data-theme="dark"] .list-item input{
  background: rgba(0,0,0,.20);
}
.list-item input:focus{
  box-shadow: var(--focus);
  border-color: rgba(37, 99, 235, .55);
}

/* 防御的CSS：data-action 等が ::before で出てしまうケースを潰す */
.list-item button::before,
.list-item button::after,
.inline-actions button::before,
.inline-actions button::after{ content: none !important; }

.inline-form{ display:flex; gap: 8px; }
.inline-form input{ flex: 1; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.75); color: var(--text); }
body[data-theme="dark"] .inline-form input{ background: rgba(0,0,0,.20); }

.settings-grid{ display:grid; gap: 12px; }

/* 予算表示 */
.budget-box{ display:flex; flex-direction: column; gap: 10px; }
.progress{ width:100%; height: 12px; border-radius: 999px; background: rgba(102,112,133,.18); overflow: hidden; border: 1px solid var(--border); }
.progress > div{ height: 100%; background: var(--primary); width: 0%; }
.progress.over > div{ background: var(--danger); }
.budget-kpis{ display:flex; gap: 12px; flex-wrap: wrap; }
.kpi{ padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.55); }
body[data-theme="dark"] .kpi{ background: rgba(0,0,0,.18); }

.budget-by-cat{ display:flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.budget-row{ display:grid; grid-template-columns: 1fr 140px; gap: 10px; align-items:center; }
.budget-row input{ padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.75); color: var(--text); }
body[data-theme="dark"] .budget-row input{ background: rgba(0,0,0,.20); }

/* カテゴリ別予算 進捗表示 */
.budget-cats{ margin-top: 12px; display:flex; flex-direction: column; gap: 10px; }
.budget-cat{ padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.55); }
body[data-theme="dark"] .budget-cat{ background: rgba(0,0,0,.18); }
.budget-cat__head{ display:flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.budget-cat__name{ font-weight: 900; }
.budget-cat__nums{ font-family: var(--mono); font-weight: 800; }
.budget-cat__nums.over{ color: var(--danger); }
.budget-mini{ margin-top: 8px; height: 10px; border-radius: 999px; background: rgba(102,112,133,.18); overflow:hidden; border: 1px solid var(--border); }
.budget-mini > div{ height: 100%; background: var(--primary); width: 0%; }
.budget-mini.over > div{ background: var(--danger); }

.mom-box{ display:flex; flex-direction: column; gap: 8px; }
.mom-line{ display:flex; justify-content: space-between; gap: 10px; }
.mom-line strong{ font-family: var(--mono); }

.subreport{ margin-top: 8px; display:flex; flex-direction: column; gap: 8px; }
.subreport .rowline{ display:flex; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.55); }
body[data-theme="dark"] .subreport .rowline{ background: rgba(0,0,0,.18); }

.rules{ display:flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.rule-row{ display:grid; grid-template-columns: 1fr 160px 110px; gap: 10px; align-items:center; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.55); }
body[data-theme="dark"] .rule-row{ background: rgba(0,0,0,.18); }
.rule-row input, .rule-row select{ padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.75); color: var(--text); }
body[data-theme="dark"] .rule-row input, body[data-theme="dark"] .rule-row select{ background: rgba(0,0,0,.20); }

.toast{ position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 80; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(0,0,0,.80); color: #fff; opacity: 0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; }
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(-2px); }

.dialog::backdrop{ background: rgba(0,0,0,.45); }
.dialog-box{ border: 1px solid var(--border); border-radius: 16px; padding: 14px; background: var(--panel); min-width: min(520px, 92vw); }
.dialog-actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 12px; }

.hide-sm{ display:inline; }

@media (max-width: 860px){
  .grid.cards{ grid-template-columns: 1fr; }
  .grid.two{ grid-template-columns: 1fr; }
  .filters-row{ grid-template-columns: 1fr 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .hide-sm{ display:none; }
  .tabbar{ top: 62px; }
  .rule-row{ grid-template-columns: 1fr 1fr; }
  .rule-row .rule-actions{ grid-column: 1 / -1; }
}


/* 画面内のブロック間（上下の詰まりを解消） */
.screen > :where(.card, details.card, .grid) + :where(.card, details.card, .grid){
  margin-top: 14px;
}