/*
 * CC.jp Apps だけの見た目（全ページ共通）。hub.css（entryhub と同じもの）の上に重ねる。色はすべて hub.css のトークン。
 * hub.css は変えない約束なので、Apps 全体で entryhub と変えたいものはここに書く（機能ごとのものは public/<機能>/）。
 *   1. 詳細はモーダル（画面の中央にふわっと出す）。hub.js の Hub.sheet（modal: true）
 *   2. 一覧の表は、列に入りきらない文字を「…」で切らずに折り返す（高橋さんの希望。2026-10-24）
 */

/* ================= 1. 詳細のモーダル ================= */
/* 後ろは暗くしてぼかす（一覧の文字に目が行かないように） */
.modal-back { position: fixed; inset: 0; z-index: 40; background: var(--overlay); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s; }
body.has-modal .modal-back { opacity: 1; visibility: visible; transition: opacity .16s ease; }
.modal {
  position: fixed; left: 50%; top: 50%; z-index: 41;
  width: min(980px, calc(100vw - 32px)); max-height: min(88vh, 920px);
  display: flex; flex-direction: column;
  background: var(--sheet-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 24px 64px var(--shadow);
  opacity: 0; visibility: hidden; transform: translate(-50%, -47%) scale(.98);
  transition: opacity .18s ease, transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .2s;
}
body.has-modal .modal { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity .18s ease, transform .2s cubic-bezier(.2, .8, .2, 1); }
body.has-modal { overflow: hidden; }
.modal:focus { outline: none; }
.modal .sheet__hd { padding: 14px 20px 12px; flex-wrap: wrap; row-gap: 8px; }
.modal .sheet__title b { white-space: normal; }
.modal .sheet__body { padding: 18px 20px 24px; }
.modal .box { background: var(--bg); }
.modal .box__ft { background: var(--sheet-bg); }
@media (max-width: 640px) {
  .modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .modal .sheet__hd, .modal .sheet__body { padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .modal, body.has-modal .modal, .modal-back { transition: none; } }

/* ================= 2. 一覧の表：「…」で切らずに折り返す ================= */
.dt td { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; padding-top: 10px; padding-bottom: 10px; line-height: 1.45; }
/* 日付・金額・状態は折り返さない（数字が2行に割れると読めない） */
.dt td .num, .dt td.yen, .dt td .state, .dt td .mono { white-space: nowrap; }

/* モーダルの中の項目と値は、狭めの格子にして2列に（1列だと縦に長くなる） */
.modal .kv { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px 24px; }