/* 配信されるのは public/app.css。client/styles/app.css と同じ内容に保つこと */
/* hono で追加した部品の補助スタイルだけを置く。
   本番デザインは public/forest.css (Rails の _style.html.erb と同一) が担うため、
   body / a / .main / gnav / footer などの既存クラスはここで上書きしないこと。 */

/* Stripe Elements */
.stripe-card-element, .stripe-payment-element { padding: 12px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.cc-form, .purchase-payment { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.purchase-payment button, .cc-form button { padding: 12px; border: 0; border-radius: 6px; font-size: 16px; cursor: pointer; }
.purchase-payment button[type="submit"], .cc-form button[type="submit"] { background: #5c7339; color: #fff; }
.purchase-payment button:disabled { opacity: .6; cursor: default; }
.btn-cancel { background: #eee; color: #333; }
.purchase-summary { margin: 12px 0; }
.purchase-price { font-size: 22px; font-weight: 700; }

/* 絞り込みリンク (マーケットの「すべて / 販売中のみ」、管理画面のフィルタ等)。
   Rails では画面ごとのスコープ (.transaction-list .sort-nav 等) にしか定義が無いため汎用版を用意 */
.sort-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.sort-nav .nav { padding: 4px 12px; border: 1px solid #5c7339; border-radius: 999px; color: #5c7339; font-size: 13px; }
.sort-nav .nav.current { background: #5c7339; color: #fff; }

/* 管理画面 (hono で追加した一覧・詳細・フォーム) */
#admin-page .admin-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
#admin-page .admin-table th, #admin-page .admin-table td { padding: 8px 10px; border-bottom: 1px solid #e5e5e5; text-align: left; vertical-align: middle; }
#admin-page .admin-table thead th { background: #f5f5f0; font-weight: bold; }
#admin-page .admin-dl { display: grid; grid-template-columns: 10em 1fr; gap: 6px 16px; background: #fff; padding: 16px; }
#admin-page .admin-dl dt { font-weight: bold; color: #5c7339; }
#admin-page .admin-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
#admin-page .admin-inline-form input, #admin-page .admin-inline-form select { padding: 6px 8px; border: 1px solid #ccc; background: #fff; }
#admin-page button[type=submit]:not(.defaultBtn):not(.grayRectBtn):not(.action-link) { padding: 6px 14px; background: #5c7339; color: #fff; border-radius: 4px; }
#admin-page .action-link { color: #5c7339; text-decoration: underline; background: none; }
#admin-page .link-button { padding: 6px 14px; background: #5c7339; color: #fff; border-radius: 4px; }
#admin-page .admin-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
#admin-page .admin-stat { background: #fff; padding: 16px 20px; min-width: 140px; }
#admin-page .admin-stat span { display: block; font-size: 24px; font-weight: bold; color: #5c7339; }
#admin-page .admin-stat--alert span { color: #b02a37; }
#admin-page .badge-ban { color: #b02a37; font-weight: bold; }
#admin-page .image-galleries { display: flex; flex-wrap: wrap; gap: 12px; }
#admin-page .image-galleries .gallery { background: #fff; padding: 8px; width: 180px; }