/* styles/ui.css
 * POKI ダッシュボード「最後の一言」レイヤ（2026-09-07 UI/UX 案件・SPEC §1-1 / §2-U）
 *
 * 役割：モバイル上書き・a11y・状態表示・ファイル間衝突是正・reduced-motion。
 * 読み込み順は index.html の最後（loan_service.css より後）。文書順で常に勝つ。
 *
 * ここに書かないもの:
 *   - トークンの追加・値変更 → base.css の :root / [data-theme="dark"] に直接書く
 *     （ui.css の :root は [data-theme="dark"] と同詳細度で後勝ちしダーク値を潰すため）
 *   - ハワイ質感 → 対象要素と同じファイル（home.css / base.css）
 *
 * 禁止（SPEC §0-4「壊れるから」）:
 *   背景ぼかし（sticky と組むと描画が破綻）/ 全プロパティ一括の transition / layout を動かすアニメ /
 *   ビュールート(#xxxView)への transform / will-change の横展開 / html への overflow-x
 *
 * 並び（後ろほど強い・SPEC §2-U）:
 *   1 基盤 → 2 ヘッダー → 3 横あふれ・グリッド・折返し → 4 iOS 自動ズーム
 *   → 5 スマホ テーブル/モーダル/safe-area → 6 タップターゲット → 7 状態表示の器
 *   → 8 フォーカス・スキップリンク → 9 contrast/forced-colors → 10 reduced-motion（必ず最後）
 */

/* ============================================================================
 * 1. 基盤（P0-7 前半・P0-8 先頭）
 * ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* html には overflow-x を書かない（sticky が無効化されるため。body 側だけで止める） */
}
body {
  /* ダブルタップズームのみ抑止。ピンチズームは残す（viewport は触らない方針） */
  touch-action: manipulation;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
img, svg, video, iframe, canvas, table { max-width: 100%; }

/* ============================================================================
 * 2. ヘッダー横あふれ（P0-6 の ui.css 分担分）
 *    伸縮弁は base.css 側の .header-mascots（flex: 0 1 auto + overflow-x）
 * ========================================================================== */

.header { min-width: 0; }
.logo { min-width: 0; }
.logo-text { min-width: 0; }
.header-right { flex-shrink: 0; }

/* 2026-09-07: .logo に min-width:0 だけを与えると、狭幅で .header 側から
 * .logo の flex-basis が中身（logo-img + logo-text の nowrap テキスト）の
 * 最小内容幅より小さく計算されることがある。.logo 自身は overflow を
 * 指定していない（visible）ため、はみ出した文字は「切れて」見えるのではなく
 * 実際は右隣の .header-mascots（不透明な画像）の下に描画され、後勝ちの
 * 画像に覆われて「POKI」の "I" が消えて見える（375px で実測・目視で確認）。
 * ロゴは絶対に欠けさせたくない一等地なので、.logo を伸縮弁の対象から外し
 * 常に内容幅ぶんを確保する。伸縮は既存どおり .header-mascots 側の
 * 自己スクロール（flex: 0 1 auto + overflow-x）だけで吸収する。 */
.logo { flex-shrink: 0; }

@media (max-width: 768px) {
  .logo-sub { display: none; }
  .header { gap: 10px; padding: 0 12px; }
}
@media (max-width: 480px) {
  .header { gap: 8px; padding: 0 10px; }
  .logo { gap: 8px; }
  .logo-img { width: 32px; height: 32px; }
  .header-mascots { gap: 4px; }
}
@media (max-width: 380px) {
  .header-mascot { width: 26px; height: 26px; }
  #headerNemoLogo.header-mascot { width: 28px; height: 28px; }
  #headerKahuaLogo.header-mascot { width: 32px; height: 32px; }
}

/* ============================================================================
 * 3. 横あふれ・グリッドの最小幅の床・長文の折返し（P0-8）
 *    minmax の第1引数を min(Xpx, 100%) にして 320px 幅でも列が食み出さない床を作る
 * ========================================================================== */

/* #homeView::after（陽光）は width: min(1100px, 140%) + translateX(-50%) で左右に食み出す装飾。
   pointer-events:none でも scrollable overflow には算入されるため、documentElement.scrollWidth が
   ビューポート幅を超え、モバイルでは Chrome がレイアウトビューポートを content 幅まで広げてしまう
   （375 指定なのに innerWidth=428 になり、position:fixed right:0 の .header まで 428px に伸びる＝
   「スマホでズームアウトが必要」の主因）。
   overflow:hidden はスクロールコンテナを作り .home-chat の高さ計算と干渉するため使わない。
   overflow-x: clip はスクロールコンテナを作らずに食み出しだけを切るので、縦は visible のまま保てる。 */
#homeView { overflow-x: clip; overflow-y: visible; }

.cards            { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.tr-summary-grid  { grid-template-columns: repeat(auto-fit,  minmax(min(200px, 100%), 1fr)); }
.ls-session-grid  { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }

@media (max-width: 1024px) {
  .is-kpi-grid       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ls-stats          { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lsp-highlights    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-cl-detail-grid { grid-template-columns: minmax(0, 1fr) 200px; }
  .lsp-pc-body .lsp-field { grid-template-columns: 140px minmax(0, 1fr); }
  .lsp-container, .lsp-container.lsp-pc { max-width: 100%; }
  .lsp-pc-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lsp-pc-url { display: none; }
  .chat-bubble, .card-desc, .card-title, .detail-desc, .detail-body p, .detail-body li,
  .ls-title, .is-kpi-label, .kin-value, .kin-label, .bank-mgmt-name, .bank-mgmt-kana {
    overflow-wrap: anywhere; word-break: normal; line-break: strict;
  }
  .chat-bubble a, .detail-body code { overflow-wrap: anywhere; }
}
@media (max-width: 768px) {
  /* KPI は 1列にしない（一望性を壊す＝OM-51/OM-54。6スロットは減らさない） */
  .is-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
  .is-kpi-card { padding: 14px; }
  .is-kpi-value { font-size: 26px; }
  .ls-cl-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .ls-cl-history-item { grid-template-columns: 90px 80px minmax(0, 1fr); }
  .ls-cl-history-item > :last-child { grid-column: 1 / -1; }
  .lsp-pc-body .lsp-field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lsp-pc-body .lsp-report { padding: 20px 16px; }
  .bank-mgmt-row { grid-template-columns: 52px 22px minmax(0, 1fr) 62px; }
}
@media (max-width: 480px) {
  .ls-cl-history-item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tr-summary-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 横スクロールする器：慣性スクロールと、親へのスクロール伝播の遮断 */
.tr-table-scroll, .is-table-wrap, .is-admin-table-wrap, .ls-cl-table-wrap, .isrep-tablewrap,
.bank-mgmt-list-body, .bank-mgmt-detail-table-wrap, .modal-body, .home-chat-messages,
.ls-tabs, .isfb-tabs, .is-admin-tabs {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.bank-mgmt-detail-table-wrap { overflow-x: auto; }
.is-admin-tabs { overflow-x: auto; }

/* ---- P0-8b サイドバー drawer 化を 1024px へ（JS の isMobile() と同じ閾値・藤山承認 2026-09-07）
       base.css:691 の 768px 版を ui.css 側で 1024px に引き上げる。
       CSS と JS は必ず同時に変える（片方だけだと 769〜1024px でサイドバーが開けなくなる） ---- */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); box-shadow: 2px 0 20px rgba(0,0,0,0.15); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.active { display: block; }
  .main { margin-left: 0; }
  .main.expanded { margin-left: 0; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .main { padding: calc(var(--header-h) + 24px) 20px 32px; }
}

/* ============================================================================
 * 4. iOS フォーカス自動ズーム封じ（P0-7）
 *    viewport から user-scalable / maximum-scale を奪うのではなく
 *    「16px 以上でズームが不要」にして解決する
 * ========================================================================== */

@media (max-width: 768px) {
  input, select, textarea, [contenteditable="true"] {
    font-size: 16px !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  .home-search-input, .home-chat-input,
  .kin-value input, .kin-value select, .kin-value textarea,
  .kin-input input, .kin-input select, .kin-input textarea,
  .bank-mgmt-search,
  .istk-form input, .istk-form select,
  .isrep-thinput,
  .ls-cl-notes-input, .ls-input, .ls-select, .ls-textarea,
  .is-period-select, .is-form-input input, .is-form-input select, .is-form-input textarea,
  #callLogsMgmtTypeFilter { font-size: 16px !important; }
  select { padding-right: 28px; }
  .kin-value input, .kin-value select, .kin-value textarea,
  .kin-input input, .kin-input select, .kin-input textarea { padding: 10px 12px; }
}

/* ============================================================================
 * 5. スマホ：振込テーブル・モーダル・safe-area（P1-8）
 * ========================================================================== */

@media (max-width: 640px) {
  /* 狭い画面では固定列をやめる（画面の半分を固定列が占め本文が読めなくなる） */
  .tr-table td.col-status, .tr-table th.col-status,
  .tr-table td.col-requester, .tr-table th.col-requester { position: static; box-shadow: none; }
  .tr-table .col-no { min-width: 40px; width: 40px; }
  .tr-table th, .tr-table td { padding: 10px 10px; }
}
@media (max-width: 768px) {
  .modal-overlay, .is-modal-overlay { padding: 12px 10px; }
  .modal { max-width: 100%; min-height: 0; max-height: calc(100vh - 24px); }
  .is-modal { max-width: 100%; max-height: calc(100vh - 24px); }
  .modal-head, .modal-foot, .is-modal-head { padding-left: 16px; padding-right: 16px; }
  .modal-body { padding: 14px 16px; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot > * { flex: 1 1 auto; }
  .sidebar { width: min(var(--sidebar-w), 84vw); }
  .kin-label { font-weight: 600; color: var(--text); font-size: 12px; }
}
@media (max-width: 900px) {
  .bank-mgmt-list-body { max-height: 38vh; }
  .bank-mgmt-detail-head { position: sticky; top: 0; z-index: 2; }
  .bank-mgmt-detail-table-wrap { max-height: 42vh; }
}
@supports (height: 100dvh) {
  .main { min-height: 100dvh; }
  #homeView { min-height: calc(100dvh - var(--header-h)); }
  .home-chat { height: calc(100dvh - var(--header-h) - 40px); }
  .modal, .is-modal { max-height: calc(100dvh - 80px); }
  @media (max-width: 768px) {
    .home-chat { height: calc(100dvh - var(--header-h) - 20px); }
    .modal, .is-modal { max-height: calc(100dvh - 24px); }
  }
}
@supports (padding: max(0px)) {
  .main { padding-bottom: max(30px, calc(30px + env(safe-area-inset-bottom))); }
  .sidebar { padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom))); }
  .modal-foot { padding-bottom: max(14px, calc(14px + env(safe-area-inset-bottom))); }
  .home-chat { padding-bottom: max(24px, calc(24px + env(safe-area-inset-bottom))); }
  @media (orientation: landscape) {
    .header { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
    .main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  }
}

/* ============================================================================
 * 6. タップターゲット 44px（P1-7・pointer: coarse のみ）
 *    マウス環境は現状の密度を維持する
 * ========================================================================== */

@media (pointer: coarse) {
  .hamburger { min-width: 44px; min-height: 44px; padding: 11px; }
  .theme-toggle { width: 44px; height: 44px; }
  .logout-btn { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; font-size: 12px; }
  .header-mascots { gap: 8px; }
  .nav-item { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .nav-item.child { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .nav-section-label { padding: 12px 14px 6px; }
  .btn-primary, .btn-secondary { min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-ghost { min-height: 40px; display: inline-flex; align-items: center; }
  .btn-sm { min-height: 40px; }
  .action-btn { min-height: 48px; }
  .back-btn { min-height: 44px; }
  .poki-back { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; }
  .modal-close { width: 44px; height: 44px; }
  .tr-tab, .tr-subtabs .tr-tab { min-height: 44px; }
  .ls-tab { min-height: 44px; display: inline-flex; align-items: center; }
  .isfb-tab, .is-admin-tab, .rsm-tab { min-height: 44px; }
  .istk-tab { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; }
  .home-mic-btn, .home-send-btn { width: 44px; height: 44px; }
  .chat-fb-btn { width: 40px; height: 40px; }
  .chat-feedback { gap: 10px; }
  .istk-btn, .isrep-print, .isrep-seg-btn, .is-period-select, .ls-col-dd-item { min-height: 44px; }
  .istk-link { min-height: 44px; display: inline-flex; align-items: center; }
  .tr-table tbody td, .is-table tbody td, .ls-cl-table tbody td { padding-top: 13px; padding-bottom: 13px; }
  .bank-mgmt-row { min-height: 48px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); }
  .kin-checkbox-wrap label, .kin-radio-wrap, .ls-col-dd-item { min-height: 44px; display: flex; align-items: center; }
  .tr-tabs, .ls-tabs, .isfb-tabs, .istk-tabs { gap: 8px; }
  .modal-foot { gap: 12px; }
}

/* ============================================================================
 * 7. 状態表示の器（P1-9）
 *    スピナーは使わず「横に流れる波」（同じ波の一筆＝見出し・ナビ active・空状態と共有）
 * ========================================================================== */

.tr-empty, .is-empty, .is-loading, .istk-empty, .bank-mgmt-empty, .bank-mgmt-loading,
.rsm-loading, .rsm-empty, .ls-empty {
  padding: 40px 20px; text-align: center; color: var(--text-sub); font-size: 14px; line-height: 1.7;
}
.ls-empty { padding: 48px 20px; }

/* 読込中：横に流れる波（96×8px・同時1〜2箇所限定。表示中だけ動く） */
.is-loading, .bank-mgmt-loading, .rsm-loading { position: relative; }
.is-loading::after, .bank-mgmt-loading::after, .rsm-loading::after {
  content: ""; display: block; width: 96px; height: 8px; margin: 14px auto 0;
  background-color: var(--wave-line);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 5 Q 6 1 12 5 T 24 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 center / 24px 8px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 5 Q 6 1 12 5 T 24 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 center / 24px 8px;
  animation: pokiWave 1.1s linear infinite;
}
@keyframes pokiWave {
  from { -webkit-mask-position: 0 center;     mask-position: 0 center; }
  to   { -webkit-mask-position: -24px center; mask-position: -24px center; }
}
/* .tr-empty は「読込中」と「空」の両方に使われるので動かさない＝静止した水平線を1本 */
.tr-empty { position: relative; }
.tr-empty::after {
  content: ""; display: block; width: 96px; height: 8px; margin: 12px auto 0;
  background-color: var(--wave-line);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 5 Q 6 1 12 5 T 24 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 24px 8px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 5 Q 6 1 12 5 T 24 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 24px 8px;
}
/* エラーは装飾なし・赤のまま（エラーを可愛くしない） */
.state-error, .is-error {
  text-align: center; padding: 24px 20px; margin: 12px 0; color: #dc2626; font-size: 14px;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
}
[data-theme="dark"] .state-error, [data-theme="dark"] .is-error {
  background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); color: #f87171;
}
.poki-skeleton {
  position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--text-sub) 12%, transparent);
  border-radius: 8px; min-height: 14px;
}
.poki-skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent) 50%, transparent);
  animation: pokiShimmer 1.4s var(--ease) infinite;
}
@keyframes pokiShimmer { to { transform: translateX(100%); } }

/* ============================================================================
 * 8. フォーカスリング（P1-6）とスキップリンク（P3-10）
 *    :focus-visible なので Tab 操作時のみ出る（マウスクリックでは出ない）
 * ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-line); outline-offset: 2px;
}
.home-search-input:focus-visible, .home-chat-input:focus-visible, .bank-mgmt-search:focus-visible,
.kin-value input:focus-visible, .kin-value select:focus-visible, .kin-value textarea:focus-visible,
.kin-input input:focus-visible, .kin-input select:focus-visible,
.is-form-input input:focus-visible, .is-form-input select:focus-visible,
.ls-search:focus-visible, .ls-field-input:focus-visible, .ls-form-input:focus-visible, .ls-cl-inline:focus-visible {
  outline: 2px solid var(--focus-line); outline-offset: 1px; box-shadow: var(--focus-ring);
}
.nav-item:focus-visible, .tr-tab:focus-visible, .header-mascot:focus-visible {
  outline: 2px solid var(--focus-line); outline-offset: 2px; box-shadow: var(--focus-ring);
}
.btn-primary:focus-visible, .action-btn:focus-visible, .auth-btn:focus-visible, .home-send-btn:focus-visible {
  outline: 2px solid var(--focus-line); outline-offset: 2px; box-shadow: 0 0 0 2px var(--surface) inset;
}
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 300; transform: translateY(-200%);
  background: var(--surface); color: var(--accent-ink); border: 2px solid var(--focus-line);
  padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none;
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); outline: none; }

/* ============================================================================
 * 9. コントラスト強調 / 強制配色（P3-10）
 * ========================================================================== */

@media (prefers-contrast: more) {
  :root { --text-sub: #4b5563; --accent-ink: #1e40af; --border: #b9bfc9; --border-strong: #4b5563; --focus-line: #1e40af; }
  [data-theme="dark"] { --text-sub: #cbd5e1; --accent-ink: #a5b8ff; --border: #4a5162; --border-strong: #8b93a8; --focus-line: #a5b8ff; }
  .card { border-width: 1.5px; }
  .badge { border: 1px solid currentColor; }
}
@media (forced-colors: active) {
  .nav-item.active, .nav-item.nav-parent.active-parent { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .card, .modal, .detail-body { border: 1px solid CanvasText; }
  :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* ============================================================================
 * 10. reduced-motion 受け皿（P2-1）— 全 CSS の最後に置くこと
 *     動きを増やすからこそ、切れる経路を最後に1箇所で担保する。
 *     transition: none は書かない（.nav-children が最終状態に到達しなくなるため）
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: .01ms; --dur-2: .01ms; --dur-3: .01ms; --dur-4: .01ms; --stagger-step: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .chat-typing span, .is-loading::after, .bank-mgmt-loading::after, .rsm-loading::after, .poki-skeleton::after { animation: none !important; }
  .chat-typing span { opacity: .6; }
  .card:hover, .card.main-tool:hover, .card.add-new:hover,
  .btn-primary:hover:not(:disabled), .action-btn:hover, .header-mascot:active { transform: none; }
  .home-poki { translate: 0 0; transform: none; }
}