/* =====================================================================
   AI ダッシュボード画面（dashboard.html）固有のスタイル
   ---------------------------------------------------------------------
   読み込み順: tokens.css -> base.css -> app-base.css -> components.css
               -> pages/dashboard.css

   共通化した分（:root / リセット / button / フォーム部品 / topbar /
   panel / glass-overlay / glass-dialog / login overlay / toast）はここには
   無い。モーダルも .glass-overlay / .glass-dialog-* に統一済みで、ここに
   残るのは dashboard 固有のサイズ・余白だけ。
   ===================================================================== */

/* ── メイン ── */
.dash-main { max-width: 1200px; margin: 0 auto; padding: 22px 22px 60px; }

.org-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.org-bar label { margin: 0; font-size: 12.5px; white-space: nowrap; }
.org-bar select { width: auto; min-width: 220px; padding: 8px 12px; }

.spinner {
    width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.25);
    border-top-color: var(--accent-2); border-radius: 50%;
    animation: dashspin 0.9s linear infinite; flex: none; display: inline-block;
}
@keyframes dashspin { to { transform: rotate(360deg); } }

/* ── アンケートウィザード ── */
.survey-panel { max-width: 720px; margin: 0 auto; }
.survey-step-label { font-size: 11.5px; color: var(--accent); font-weight: 600; letter-spacing: 0.08em; margin-bottom: 8px; }
.survey-question { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 16px; line-height: 1.6; }
.survey-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.survey-choice {
    text-align: left; border-radius: 12px; padding: 11px 14px; font-size: 13.5px;
    border: 1.5px solid var(--panel-border-light); color: var(--text);
    background: var(--bg-light); transition: border-color 0.15s ease, background 0.15s ease;
}
.survey-choice:hover:not(:disabled) { background: rgba(94,129,172,0.18); color: #fff; border-color: rgba(94,129,172,0.6); }
.survey-choice.selected {
    background: linear-gradient(135deg, rgba(94,129,172,0.35) 0%, rgba(124,92,191,0.35) 100%);
    border-color: var(--accent); color: #fff;
}
.survey-free { margin-bottom: 14px; }
.survey-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.survey-log { margin-top: 22px; border-top: 1px solid var(--panel-border); padding-top: 12px; }
.survey-log-item { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; line-height: 1.6; }
.survey-log-item b { color: var(--text-muted); font-weight: 500; }

/* ── 生成進捗 ── */
.progress-panel { max-width: 720px; margin: 0 auto; text-align: center; padding: 40px 24px; }
.progress-stage { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--warn); font-size: 13.5px; margin-top: 16px; }
.progress-err { color: var(--err); font-size: 13px; line-height: 1.7; margin-top: 16px; }

/* ── ダッシュボード本体（テンプレ化されたエリア構成） ── */
.dash-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.dash-toolbar .dash-updated { font-size: 11.5px; color: var(--text-dim); }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi-card {
    background: var(--panel-bg-solid); border: 1px solid var(--panel-border-light);
    border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.kpi-title { font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.4; }
.kpi-value { font-size: 26px; font-weight: 700; color: #fff; letter-spacing: 0.02em; word-break: break-all; }
.kpi-value.kpi-err { font-size: 12px; font-weight: 400; color: var(--err); line-height: 1.5; }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-bottom: 14px; }
.comp-card {
    background: var(--panel-bg-solid); border: 1px solid var(--panel-border-light);
    border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.comp-title { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.comp-err { font-size: 12px; color: var(--err); line-height: 1.6; }
.comp-note { font-size: 11px; color: var(--text-dim); margin-top: 8px; }
.chart-wrap { position: relative; height: 260px; }
/* グラフ枠のヘッダー行（タイトル + 拡大ボタン） */
.comp-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.comp-head .comp-title { flex: 1; min-width: 0; margin-bottom: 0; }
.comp-head .comp-expand-btn { flex: none; }
/* グラフのクリック明細への誘導（データ描画後に表示） */
.comp-hint { font-size: 10.5px; color: var(--text-dim); margin-top: 6px; }

.table-area { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.dash-table-wrap { overflow-x: auto; }
table.dash-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.dash-table th {
    text-align: left; color: var(--text-muted); font-weight: 500; white-space: nowrap;
    padding: 7px 10px; border-bottom: 1px solid var(--panel-border-light); font-size: 11.5px;
}
table.dash-table td { padding: 7px 10px; border-bottom: 1px solid var(--panel-border); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
table.dash-table tr:last-child td { border-bottom: none; }
/* レコードリンク（行クリック + 先頭のリンクアイコン列） */
table.dash-table tr.row-linked { cursor: pointer; }
table.dash-table tr.row-linked:hover td { background: rgba(94,129,172,0.10); }
td.row-link-cell { width: 1%; }
a.row-link { color: #8fb4e3; text-decoration: none; font-size: 13px; }
a.row-link:hover { color: #a9c6ec; }

/* KPI の単位等の短いラベル（viz.label） */
.kpi-unit { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 4px; }

/* sf_user_id 未設定時の案内（persona=field で担当絞り込みができない場合） */
.owner-notice {
    font-size: 12px; color: var(--warn); line-height: 1.7;
    border: 1px solid rgba(255,204,128,0.35); background: rgba(60,50,25,0.45);
    border-radius: 10px; padding: 8px 12px; margin-bottom: 12px;
}

/* ── チャット組み替え（Phase 2: 一時表示 → 保存で固定） ── */
/* 未保存コンポーネントの「一時」バッジ（タイトル横） */
.badge-ephemeral {
    display: inline-block; font-size: 10px; font-weight: 600; color: var(--warn);
    border: 1px solid rgba(255,204,128,0.5); border-radius: var(--r-pill);
    padding: 1px 8px; margin-left: 8px; vertical-align: 2px; white-space: nowrap;
}
/* 未保存の変更がある間だけ出す保存/破棄バー */
.dirty-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--warn); line-height: 1.6;
    border: 1px solid rgba(255,204,128,0.35); background: rgba(60,50,25,0.45);
    border-radius: 10px; padding: 8px 12px; margin-bottom: 12px;
}
/* チャットドロワー（右側サイドパネル） */
.chat-drawer {
    position: fixed; top: 0; right: 0; height: 100%;
    width: 400px; max-width: 94vw; z-index: var(--z-drawer);
    display: flex; flex-direction: column;
    background: var(--panel-bg-solid);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--panel-border-light);
    box-shadow: -18px 0 48px rgba(0,0,0,0.55);
    transform: translateX(105%); transition: transform 0.22s ease;
}
.chat-drawer.open { transform: none; }
.chat-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--panel-border);
}
.chat-title { font-size: 13.5px; font-weight: 600; color: #fff; }
.chat-note { font-size: 11.5px; color: var(--text-dim); line-height: 1.7; padding: 10px 16px 0; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { font-size: 12.5px; line-height: 1.7; border-radius: 12px; padding: 8px 12px; max-width: 92%; white-space: pre-wrap; word-break: break-word; }
.chat-msg.user {
    align-self: flex-end; color: #fff;
    background: linear-gradient(135deg, rgba(94,129,172,0.4) 0%, rgba(124,92,191,0.4) 100%);
    border: 1px solid rgba(94,129,172,0.5);
}
.chat-msg.assistant {
    align-self: flex-start; color: var(--text);
    background: var(--bg-light); border: 1px solid var(--panel-border-light);
}
.chat-msg.error { color: var(--err); border-color: rgba(242,139,130,0.4); }
.chat-busy { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--warn); padding: 0 16px 8px; }
.chat-input-row { display: flex; gap: 8px; align-items: flex-end; padding: 10px 16px 14px; border-top: 1px solid var(--panel-border); }
.chat-input-row textarea { min-height: 44px; max-height: 140px; font-size: 12.5px; }
.chat-input-row button { flex: none; }

/* ── モーダル（グラフ拡大 / 棒クリックの明細一覧） ──
   オーバーレイとダイアログの外観は components.css の
   .glass-overlay / .glass-dialog / .glass-dialog-* に統一済み。
   ここに残すのは dashboard 固有のサイズ・余白だけ。 */
/* ダイアログ幅が min(960px, 100%) なので、狭い画面で端に張り付かないよう
   オーバーレイ側に余白を持たせる（移行前 .modal-overlay の padding:24px）。 */
#chartExpandModal, #drilldownModal { padding: 24px; }
/* 明細モーダルは拡大モーダルの上にも重なり得る（拡大表示中の棒クリック） */
#drilldownModal { z-index: var(--z-modal-nested); }
.modal-dialog {
    width: min(960px, 100%); max-height: 90vh;
    display: flex; flex-direction: column; padding: 18px 20px;
}
/* dashboard のヘッダーだけが本文との間に余白を持ち、長いタイトルを省略する */
.modal-dialog .glass-dialog-head { margin-bottom: 12px; flex: none; }
.modal-dialog .glass-dialog-title {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chart-expand-wrap { position: relative; height: min(62vh, 540px); }

/* ── AI示唆エリア ── */
.insight-panel {
    background: rgba(124,92,191,0.10); border: 1px dashed rgba(124,92,191,0.45);
    border-radius: 14px; padding: 16px 18px;
}
.insight-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.insight-title { font-size: 13px; font-weight: 600; color: #b39ddb; }
.insight-date { font-size: 11px; color: var(--text-dim); flex: 1; }
.insight-body { font-size: 13px; line-height: 1.8; color: var(--text); white-space: pre-wrap; }
.insight-body.insight-empty { color: var(--text-dim); }

@media (max-width: 720px) {
    .dash-main { padding: 14px 10px 60px; }
}