/* accounting.html 専用スタイル
   元コード: web/accounting.html:19-64（分割時点の HEAD 基準・2026-07-19） */
.acc-hero { padding: 16px 20px; border-radius: 12px; background: linear-gradient(135deg, rgba(91,140,255,0.06), rgba(240,183,58,0.04)); border: 1px solid var(--border); margin-bottom: 14px; }
.acc-month-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-month-label { min-width: 130px; text-align: center; font-size: 16px; font-weight: 700; }
.acc-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }

.acc-table th, .acc-table td { font-size: 12px; padding: 8px 10px; vertical-align: top; }
.acc-table th { white-space: nowrap; background: var(--bg-2); position: sticky; top: 0; z-index: 10; }
.acc-table tr.row-clickable:hover { background: rgba(91,140,255,0.05); cursor: pointer; }
.acc-cat-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; background: var(--bg-2); border: 1px solid var(--border); }
.acc-amount { font-family: Menlo, Consolas, monospace; font-weight: 700; text-align: right; white-space: nowrap; }
/* 2026-07-24 (Round T3-HC #25): object-position 明示。レシートサムネイルのクロップ位置を中央に固定。 */
.acc-receipt-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; object-position: center; cursor: pointer; border: 1px solid var(--border); }
.acc-receipt-thumb:hover { border-color: var(--accent); }
.acc-receipt-none { width: 36px; height: 36px; border-radius: 6px; background: var(--bg); border: 1px dashed var(--border); display: grid; place-items: center; font-size: 14px; color: var(--text-3); }

.cat-breakdown { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.cat-card { padding: 8px 10px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--border); font-size: 12px; }
.cat-card .cat-emoji { font-size: 16px; margin-right: 4px; }
.cat-card .cat-amt { font-family: Menlo, Consolas, monospace; font-weight: 700; color: var(--text); }

/* 2026-07-23 (Round 15 CSS-Agent S1-HC #22): 元 `.modal-bg { z-index:1000 }` は
   style.css:604 の `.modal-bg { z-index:100 }` を後読み cascade で上書きしていた
   (layering 不整合)。本ファイル内の唯一の .modal-bg (#acc-modal) にセレクタを絞り込み、
   グローバル .modal-bg には影響しないようにする。既存の視覚は維持 (accounting モーダル
   は引き続き z-index 1000 で最上位表示)。.modal-bg.open は JS 側 (.show 使用) で dead
   だが将来保険として残す (#acc-modal 限定にスコープ)。 */
#acc-modal.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; place-items: center; z-index: 1000; }
#acc-modal.modal-bg.open { display: grid; }
.modal { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 22px; max-width: 720px; width: 94%; max-height: 90vh; overflow-y: auto; position: relative; }
.modal h3 { margin: 0 0 14px; padding-right: 40px; }
.modal label { display: block; font-size: 12px; color: var(--text-2); margin: 10px 0 4px; }
.modal input, .modal select, .modal textarea { width: 100%; padding: 8px 12px; font-size: 13px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); box-sizing: border-box; }
.modal textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.modal .modal-close-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); font-size: 18px; cursor: pointer; padding: 0; line-height: 1; display: grid; place-items: center; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

.receipt-drop { border: 2px dashed var(--border); border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; transition: border-color 0.15s; background: var(--bg-2); }
.receipt-drop:hover, .receipt-drop.dragover { border-color: var(--accent); background: rgba(91,140,255,0.04); }
.receipt-preview { max-width: 100%; max-height: 300px; border-radius: 8px; margin-top: 8px; border: 1px solid var(--border); }

.lightbox-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; z-index: 2000; cursor: zoom-out; padding: 20px; }
.lightbox-bg.open { display: flex; }
.lightbox-bg img { max-width: 95vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 0 40px rgba(0,0,0,0.5); }

.meeting-fields { background: rgba(240,183,58,0.04); border: 1px solid var(--gold); border-radius: 8px; padding: 12px; margin-top: 6px; }
.meeting-fields summary { cursor: pointer; font-weight: 600; color: var(--gold); }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.filter-bar select, .filter-bar input { padding: 6px 10px; font-size: 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); }

.empty-state { padding: 40px 20px; text-align: center; color: var(--text-2); }