:root{
  --bg: #f3f5f7;
  --card-bg: #ffffff;
  --muted: #6c757d;
  --primary: #0d6efd;
  --primary-dark: #0b5ed7;
  --accent: #ffc107;
  --danger: #dc3545;
  --surface-border: #e6e9ec;
  --shadow-1: 0 1px 3px rgba(16,24,40,0.06);
  --shadow-2: 0 6px 18px rgba(16,24,40,0.08);
  --radius: 8px;
  /*--max-width: 1400px;*/
  --focus: rgba(13,110,253,0.25);
  --text: #212529;
  --soft: #8b949e;
}
/* Small helpers for inline-widths used in templates */
.width-40 { width:40px; }
.width-50 { width:50px; }
.width-60 { width:60px; }
.width-70 { width:70px; }
.width-80 { width:80px; }
.width-100 { width: 100px; }
.width-120 { width:120px; }
.width-140 { width: 140px; }
.width-160 { width:160px; }
.width-220 { width:220px; }
.width-240 { width:240px; }

/* Page
   IMPORTANT: do not use body { display:flex } here because templates
   include a header and a container; using flex caused them to lay out
   side-by-side. Keep normal flow and center the content with margins. */
html, body {
  height: 100%;
}
body {
  font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background: linear-gradient(180deg, var(--bg), #eef2f6 80%);
  color: var(--text);
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}

/* Keep central column but give a floating card feel */
.container {
  width: 100%;
  max-width: var(--max-width);
  background: var(--card-bg);
  border-radius: calc(var(--radius) - 2px);
  box-shadow: var(--shadow-2);
  padding: 14px;
  box-sizing: border-box;
  margin: 12px auto; /* center the container */
}

/* Header: centered and independent from .container */
header {
  width: 100%;
  max-width: var(--max-width);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto 12px; /* center header and space below */
  padding: 0px 5px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(250,250,250,0.6));
  border-radius: calc(var(--radius) - 2px);
  box-shadow: var(--shadow-1);
  box-sizing: border-box;
}

/* Site title */
.site-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 600;
}
.site-title-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.site-title-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

/* Navigation - make "立体" buttons */
.main-nav {
  display:flex;
  align-items:center;
  gap: 8px;
}
.main-nav a {
text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
  padding: 5px 12px;
  margin-bottom: 8px;
  border-radius: 9px;
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  font-size: 0.95rem;
  display: inline-block;
}
.main-nav a:hover{
  transform: translateY(-3px);
  filter: brightness(1.02);
  box-shadow: 0 8px 18px rgba(13,110,253,0.18), inset 0 -2px 0 rgba(0,0,0,0.04);
}
.main-nav .nav-sep {
  color: var(--soft);
  padding: 0 6px;
  user-select: none;
}

/* Footer — keep centered like header (but inside templates/footer it's inside container) */
.site-footer{
  text-align:center;
  margin-top:18px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Flash messages
   Constrain width and center them so they don't span the whole viewport.
   They appear above the .container and should match its max-width. */
.flash {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--max-width);
  margin: 14px auto;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 500;
  box-shadow: var(--shadow-1);
}
.flash-success { background: linear-gradient(180deg,#ecffef,#e6fff0); border: 1px solid #c6efcf; color:#0b6a2b; }
.flash-warning { background: linear-gradient(180deg,#fff8e6,#fff6e0); border:1px solid #f3e0a6; color:#6b4b00; }
.flash-danger { background: linear-gradient(180deg,#ffecec,#ffe6e6); border:1px solid #f0b6b6; color:#701818; }

/* Alert panel - more prominent */
.alert-panel{
  background: linear-gradient(180deg, #fff6e8, #fff3d9);
  border: 1px solid rgba(255,200,50,0.35);
  padding: 22px;
  border-radius: 10px;
  margin: 18px 0;
  box-shadow: 0 6px 18px rgba(40,40,40,0.05);
}
.alert-panel h3 { margin:0 0 8px 0; color:#7a4f00; font-size:1.05rem; }
.alert-panel p { margin:6px 0; color:#5e4520; }

/* Tables: cleaner and slightly compact */
table {
  width:100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
thead tr { background: linear-gradient(180deg,#f8f9fb,#f1f3f6); }
th, td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-border);
  text-align: left;
  vertical-align: middle;
  font-size: 0.95rem;
}
tbody tr:hover { background: rgba(13,110,253,0.03); }
tbody tr:nth-child(odd) { background: rgba(0,0,0,0.01); }

/* Buttons
   Set consistent font-size & sizing so "保存" / "削除" match other buttons */
a.button, button.button {
  white-space:nowrap;
  display: inline-block;
  padding: 8px 12px;
  background: linear-gradient(180deg,var(--primary),var(--primary-dark));
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(13,110,253,0.12);
  transition: transform .12s ease, box-shadow .12s ease;
  font-weight:600;
  font-size: 14px; /* ← 明示的に統一 */
  line-height: 1.2; /* 縦中央揃えのため */
}
a.button:hover, button.button:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(13,110,253,0.14); }

/* Danger button (削除) */
.btn-danger, button.btn-danger {
  background: linear-gradient(180deg,var(--danger), #b31b2e);
  color: #fff;
  box-shadow: 0 6px 18px rgba(220,53,69,0.12);
  font-size: 14px; /* 確実に同じサイズ */
  font-weight:600;
}

/* Green variant for "フォルダーを開く" */
a.button.btn-green, button.btn-green {
  background: linear-gradient(180deg, #28a745, #218838);
  color: #fff;
  box-shadow: 0 6px 18px rgba(40,167,69,0.12);
  font-size: 14px;
  font-weight:600;
}
a.button.btn-green:hover, button.btn-green:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(40,167,69,0.14);
}

/* Accent (yellow) button */
a.button.btn-accent, button.btn-accent {
  background: linear-gradient(180deg, var(--accent), #e6a800);
  color: #111;
  box-shadow: 0 6px 18px rgba(255,193,7,0.10);
  font-size: 14px;
  font-weight:600;
}
a.button.btn-accent:hover, button.btn-accent:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(255,193,7,0.12);
  filter: brightness(0.98);
}

/* Muted text */
.muted { color: var(--muted); font-size: 0.95rem; }

/* Inline helpers */
form.inline { display:inline; margin:0; padding:0; }

/* Spacing utilities */
.mt-6 { margin-top:6px !important; }
.mt-12 { margin-top:12px !important; }
.mt-16 { margin-top:16px !important; }
.ml-8 { margin-left:8px !important; }

/* Inputs */
.input-wide { width:100%; max-width:600px; padding:10px; border-radius:8px; border:1px solid var(--surface-border); box-sizing:border-box; transition: box-shadow .12s ease, border-color .12s ease; }
.input { padding:8px; border-radius:6px; border:1px solid var(--surface-border); transition: box-shadow .12s ease, border-color .12s ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 6px 18px var(--focus); outline: none; border-color: var(--primary); }


/* Responsive adjustments */
@media (max-width: 820px) {
  header { flex-direction:column; gap:8px; align-items:flex-start; padding:12px; }
  .main-nav { gap:6px; flex-wrap:wrap; }
  table, th, td { font-size:0.92rem; }
  .input-wide { max-width:100%; }
}
/* Breadcrumb styles (add to your styles.css; merge if you already have breadcrumbs rules) */
.breadcrumbs { font-size: 0.95rem; color: var(--soft); }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.breadcrumbs .crumb a { color: var(--primary); text-decoration: none; padding: 4px 6px; border-radius: 6px; }
.breadcrumbs .crumb a:hover { text-decoration: underline; box-shadow: var(--shadow-1); }
.breadcrumbs .crumb-sep { color: var(--soft); margin: 0 4px; }
.breadcrumbs .crumb-current { color: var(--muted); font-weight: 600; }

/* -- 追加部分: レスポンシブなカード・リスト用スタイル -- */
/* cards-grid: folder cards */
.cards-grid {
  display: ruby;
  /*grid-template-columns: repeat(3, 1fr);*/
  gap: 14px;
  margin: 10px;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--surface-border);
  background: linear-gradient(180deg, #fff, #fbfdff);
  box-shadow: var(--shadow-1);
}
.card_payyer {
	width:350px;
	margin: 5px;
	background: antiquewhite;
}
.card_folder {
	width:350px;
	margin: 5px;
    background: ghostwhite;
}
.card_setup {
	width:400px;
	margin: 5px;
    background: whitesmoke;
}
.card-title { margin: 0 0 6px 0; font-size:1.05rem; }
.card-main .small { font-size:0.92rem; }
.card-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.meta-item { text-align:center; }
.meta-label { font-size:0.8rem; color:var(--muted); }
.meta-value { font-weight:700; font-size:1.1rem; }

/* list-rows: receipts as horizontal rows */
.list-rows { display:flex; flex-direction:column; gap:10px; }
.list-row {
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--surface-border);
  background:#fff;
  box-shadow: var(--shadow-1);
}
.row-left { flex:1 1 40%; min-width: 0; }
.row-middle { flex:1 1 30%; min-width:0; }
.row-right { flex:0 0 260px; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }

/* items list */
.form-row { display:flex; gap:8px; flex-wrap:wrap; align-items:end; }
.form-row label { display:flex; flex-direction:column; gap:6px; font-size:0.9rem; }
.form-actions { display:flex; align-items:center; }
.items-list { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.item-row { display:flex; gap:12px; padding:10px; border-radius:8px; border:1px solid var(--surface-border); background:#fff; }
.item-left { flex:1; }
.item-right { flex:0 0 360px; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }

/* smaller screens */
@media (max-width: 980px) {
  /*.cards-grid { grid-template-columns: repeat(2, 1fr); }*/
  .row-right { flex-basis: 220px; }
  .item-right { flex-basis: 260px; }
}
@media (max-width: 640px) {
  /*.cards-grid { grid-template-columns: 1fr; }
  .list-row { flex-direction: column; align-items:flex-start; }*/
  .row-right { align-items:flex-start; width:100%; }
  .item-row { flex-direction:column; }
  .item-right { width:100%; align-items:flex-start; }
  .form-row { flex-direction:column; align-items:stretch; }
  .row-middle { order: 3; }
}

/* Add these rules (or merge) into static/styles.css to make the layout more compact
   and support the inline label / compact forms used above. */

.card.card-compact {
  padding: 10px;
  border-radius: 8px;
  box-shadow: var(--shadow-1);
}

/* make input and compact classes smaller/tighter */
.input.compact {
  padding: 6px 8px;
  font-size: 0.92rem;
  border-radius: 6px;
}

/* reduce overall card vertical spacing */
.card-title {
  font-size: 1.2rem;
  margin-bottom: 6px;
}



/* Inline label style: label next to field */
.label-inline {
  display: inline-flex;
  white-space:nowrap;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  margin: 0;
}

/* compact form row spacing */
.form-inline-compact .label-inline + .label-inline {
  margin-left: 8px;
}

/* receipt list compact styling */
.receipt-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.receipt-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--surface-border);
  font-size: 0.95rem;
}
.receipt-date {
  /*width: 90px;*/
  color: var(--muted);
  font-size: 0.9rem;
}
.receipt-store {
  flex: 1;
  font-weight: 600;
}
.receipt-amount {
  /*width: 100px;*/
  text-align: right;
  font-weight: 600;
}

/* store link visual */
.store-link {
  color: inherit;
  text-decoration: none;
}
.store-link:hover {
  text-decoration: underline;
}


/* make buttons slightly smaller vertically */
.button {
  padding: 6px 10px;
  font-size: 13.5px;
}

/* responsive: collapse grid on narrow screens */
@media (max-width: 780px) {
  .receipt-date { width: 80px; }
  .receipt-amount { width: 90px; }
  /* stack columns */
  .grid-stack-mobile {
    grid-template-columns: 1fr !important;
  }
}


/* Add or merge these rules into static/styles.css */

/* Make the entire receipt row clickable and preserve compact layout */
.receipt-list { list-style:none; padding:0; margin:0; }
.receipt-item {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--surface-border);
}
.receipt-item.selected {
  background: #e0e0e0; /* darker gray - change this hex to taste (e.g. #d6d6d6 or #cfcfcf) */
}

/* Anchor wraps the full row */
.receipt-row-link {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

/* Individual columns */
.receipt-date {
  /*width: 90px;*/
  color: var(--muted);
  font-size: 0.9rem;
  flex-shrink: 0;
}
.receipt-store {
  flex: 1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.receipt-amount {
  /*width: 100px;*/
  text-align: right;
  font-weight: 600;
  flex-shrink: 0;
}

/* Hover/focus styles for clickable row */
.receipt-row-link:hover,
.receipt-row-link:focus {
  background: rgba(0,0,0,0.02);
  text-decoration: none;
}

/* When selected, keep the anchor's background consistent */
.receipt-item.selected .receipt-row-link {
  background: transparent;
}

/* Responsive tweaks */
@media (max-width: 780px) {
  .receipt-date { width: 80px; }
  .receipt-amount { width: 90px; }
  .receipt-store { font-size: 0.95rem; }
}

.receipt-list-container {
  /* 高さは画面に合わせて調整してください。
     calc() を使うとヘッダ等を考慮できます。ここは例です。 */
  max-height: calc(100vh - 220px); /* ヘッダや上部パディングの分を差し引いた高さの例 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px; /* スクロールバー分の余白（レイアウト崩れ防止） */
}

/* optional: スクロールバーの見た目（Chrome, Edge, Safari） */
.receipt-list-container::-webkit-scrollbar {
  width: 10px;
}
.receipt-list-container::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 6px;
}
.receipt-list-container::-webkit-scrollbar-track {
  background: transparent;
}