/* src/style.css */

/* 画面幅対応の基本方針(画面設計0-1節、要件4.4): 狭い画面(600px未満、スマートフォン想定)と
   それ以外(タブレット・PC、同じレイアウトを共用)の2区分のみとする。600pxはui.jsの
   renderAnalysisChart()のisNarrow判定と揃えている(値を変える場合は両方を合わせて直す)。
   基本はフルードレイアウト+flex-wrapによる折り返しで対応し、個別の@media調整は
   分析ダイアログの履歴グラフ(下記)など、折り返しだけでは対応できない箇所のみに限定する。 */

:root {
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --primary: #155e75;
    --primary-dark: #164e63;
    --primary-tint: #cfe6ec;
    --success: #16a34a;
    --danger: #dc2626;
    --text-main: #0f172a;
    --text-secondary: #64748b;
}

* {
    box-sizing: border-box;
}

/* 縦スクロールバーの表示・非表示でページ幅(中央寄せしている.app-containerの位置)が
   変わらないよう、スクロールバー分の余白を常に確保しておく。履歴参照モードは計算結果を
   都度表示するため口座編集モードよりページが長くなり、閲覧環境によってはスクロールバーの
   有無が切り替わってページ全体が左右にずれて見えることがあったため。 */
html {
    overflow-y: scroll;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", Meiryo, sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
}

.app-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

header h1 {
    font-size: 22px;
    margin: 0 0 20px;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 10px rgba(15, 23, 42, 0.04);
}

.section-title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 12px;
}

/* 認証画面 */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-main);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.auth-card {
    max-width: 400px;
    width: 100%;
    text-align: center;
}

.auth-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.6;
}

#token_input {
    width: 100%;
    text-align: center;
    font-size: 16px;
    padding: 8px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* ボタン */
.btn {
    display: inline-block;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-primary:disabled {
    background: #94a3b8;
    border-color: #94a3b8;
    cursor: not-allowed;
}

.btn-secondary {
    background: #f1f5f9;
}

.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-link {
    background: transparent;
    border: none;
    color: var(--primary);
    padding: 4px 0;
    text-decoration: underline;
}

.btn-link:disabled {
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* 隣接するbtn-link同士が詰まって1つのボタンに見えてしまうのを防ぐ(クリック領域の混同対策) */
.button-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-large {
    width: 100%;
    padding: 12px;
    font-weight: bold;
    font-size: 15px;
}

.btn-delete {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
}

.execute-row {
    margin-bottom: 20px;
}

/* 口座タブ */
.account-tabs-container {
    margin-bottom: 20px;
}

.tab-label {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.tabs-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* 口座タブ行(#account_tabs_row)は折り返さず横スクロールにする(下記の「タブの一体感」
   演出が2段以上に折り返ると崩れるため、MEMO.md 9/1のやり取りを踏まえた対応)。
   スマホでは横スワイプで、PCではトラックパッド/ドラッグで操作できる想定
   (実機のスマホではスワイプで問題なく操作できることを確認済み)。 */
.account-tabs-bar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 8px;
}

/* 縦方向のスクロールは不要なので明示的に抑止する(overflow-xだけをautoにすると
   CSSの仕様上overflow-yも自動的にスクロール扱いになってしまうため)。 */
.account-tabs-scroll {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

#account_tabs_row {
    flex-wrap: nowrap;
    margin-bottom: 0;
}

#account_tabs_row .tab-btn,
#account_tabs_row .btn-link {
    flex-shrink: 0;
}

.tab-btn {
    position: relative;
    padding: 8px 24px 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    font-size: 14px;
}

.tab-btn.active {
    border-color: var(--primary);
    background: var(--primary-tint);
    color: var(--primary);
    font-weight: bold;
}

/* 口座タブの一体感(ユーザー提案の擬似的な表現)。ツールバー・カード群を実際に1枚の面
   として再構成する(レイアウト構造そのものを変える)本格対応の代わりに、タブ自身に
   下線(border-bottom)を持たせ、選択中のタブだけその下線の色を自身の背景色と同じに
   して見えなくする。これによりタブの箱がその線を突き破って下の作業領域と地続きに
   なっているように見える。
   以前は.account-tabs-bar側に共有の1本線を引き、タブを1px重ねて隠す方式を試したが、
   (a) タブ行の横スクロール領域(.account-tabs-scroll)のoverflow-y:hiddenが、線に
   重ねるための「はみ出し」を一緒に切り取ってしまい選択タブの線を消せない、
   (b) 余白で回避しようとすると線自体も一緒に動いてしまい追いつけない、という
   構造的な問題があり実機で不具合が見つかった(MEMO.md 9/2のやり取り)。タブ自身が
   下線を持つ方式なら、はみ出し・overflow-clipに一切依存しないためこの問題が起きない。
   ページ地色(--bg-main)の上の線なので、白背景向けの淡い--borderではなく
   コントラストの強い--border-strongを使う。 */
#account_tabs_row .tab-btn,
#dashboard_tab_slot .tab-btn {
    border-bottom: 1px solid var(--border-strong);
    /* 下部角丸は直角にする。角丸のままだと背景が丸く欠けて、線との間に
       三角形の隙間ができて見えるため(選択タブに限らず全タブ共通の問題)。 */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#account_tabs_row .tab-btn.active,
#dashboard_tab_slot .tab-btn.active {
    border-bottom-color: var(--primary-tint);
}

/* タブの下部角丸を「外側に開く」形にする(通常の角丸のように内側にすぼめると、線と
   繋がる箇所に三角形の隙間ができて地続きに見えないため)。タブ自身の下端角は直角にし、
   その外側にタブの塗り色(--primary-tint)を丸く継ぎ足す疑似要素を置くことで、
   タブ本体からページ地色(--bg-main)へ滑らかに裾が開いて見えるようにする。 */
#account_tabs_row .tab-btn.active::before,
#account_tabs_row .tab-btn.active::after,
#dashboard_tab_slot .tab-btn.active::before,
#dashboard_tab_slot .tab-btn.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 8px;
    height: 8px;
}

#account_tabs_row .tab-btn.active::before,
#dashboard_tab_slot .tab-btn.active::before {
    left: -8px;
    background: radial-gradient(circle at top left, transparent 8px, var(--primary-tint) 8.5px);
}

#account_tabs_row .tab-btn.active::after,
#dashboard_tab_slot .tab-btn.active::after {
    right: -8px;
    background: radial-gradient(circle at top right, transparent 8px, var(--primary-tint) 8.5px);
}

.tab-delete {
    position: absolute;
    top: 2px;
    right: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
}

.tab-delete:hover {
    color: var(--danger);
}

/* ダッシュボードタブ: 個別口座タブとは挙動が違うことを示すため見た目を変え、
   横スクロール領域(.account-tabs-scroll)の外(#dashboard_tab_slot)に固定配置する。
   ラベルが長く1行だと横に間延びするため、幅を固定して2行・小さめフォントで折り返す。 */
.tab-btn-dashboard {
    flex-shrink: 0;
    width: 140px;
    padding: 6px 8px;
    white-space: normal;
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--text-secondary);
}

.tab-btn-dashboard.active {
    border-color: var(--primary);
    background: var(--primary-tint);
    color: var(--primary);
    font-weight: bold;
    border-bottom-color: var(--bg-main);
}

/* 口座プロパティ・履歴参照・履歴保存は、いずれも口座タブに付随するツール的な機能として
   同じ段に並べる(頻度の低い口座プロパティの変更操作はさらにその下へ畳む)。
   段の中は、適用スコープの違い(口座全体 / 現在表示中の時点のみ)が伝わるよう、
   区切り線を挟んで2グループに分けて配置する(MEMO.md 8/27コメント5)。 */
.account-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.toolbar-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.toolbar-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border);
}

/* 履歴の編集トグル・削除確認(画面設計5章、要件3.5) */
#btn_toggle_history_edit.active {
    border-color: var(--primary);
    background: var(--primary-tint);
    color: var(--primary);
    font-weight: bold;
}

.delete-confirm-banner {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 8px;
    font-size: 14px;
    color: var(--danger);
}

.delete-confirm-banner .button-row {
    margin-top: 10px;
}

/* 口座名は現在のタブ表示で常に見えているため、変更操作自体は使用頻度が低い。
   普段は畳んでおき、「🏷️ 口座プロパティ」で開く(今後の属性追加の受け皿)。 */
.account-properties-panel {
    margin-top: 8px;
}

.account-name-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: bold;
}

#account_name_input {
    padding: 4px 8px;
    font-size: 14px;
    font-weight: bold;
    min-width: 160px;
}

.history-select-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

/* 方針・取り崩し */
/* 選択肢と金額欄を横並びにし、画面が狭い場合は自然に折り返す(画面設計0-1節と同じ
   フルードレイアウト+flex-wrap方針、MEMO.md 8/30コメント2)。個別の@media分岐は設けない。 */
.policy-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* 角丸セグメント風のラジオボタン。選択状態はセグメントの背景(白浮き)で示すため、
   ネイティブのラジオ丸自体は視覚上隠す(キーボード操作・スクリーンリーダー向けに
   input要素自体はDOM上に残し、フォーカスリングだけ:has()でラベルに転写する)。 */
.radio-group {
    display: inline-flex;
    gap: 2px;
    flex-wrap: wrap;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
}

.radio-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 6px 12px;
    border: 1px solid transparent; /* 選択時に枠線を足してもサイズがガタつかないよう、
                                       非選択時から同じ太さの透明な枠線を確保しておく */
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* 選択中はタブ類(.tab-btn.active/.subtab-btn.active)と同じprimary色(背景・文字・枠線)を
   使い、「primary色=選択中」という見た目のルールをアプリ全体で統一する。単なる白背景+
   太字だけだと、ラジオボタンの代替であることが伝わりにくい懸念もあるため、色・枠線でも
   選択状態を明示する。 */
.radio-label:has(input:checked) {
    background: var(--primary-tint);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: bold;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

.radio-label:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.policy-amount-input {
    width: 120px; /* 資産項目の金額欄(.input-asset-amount、110px)と同程度の実用幅にする(MEMO.md 8/30コメント4) */
    padding: 6px 8px;
    font-weight: bold;
    text-align: right;
}

/* マイナス(出金)の場合のみ警告色にする(MEMO.md 8/30コメント3)。
   取り崩し希望総額・追加投資額は仕様上0以上しか入らないため、常にこの色にはならない。 */
.policy-amount-input.negative {
    color: var(--danger);
}

/* テーブル */
/* 横スクロール可能な表であることを示す視覚的な手がかり(画面設計0-1節、要件4.4)。
   iOS等はスクロールバーを既定で隠すため、スクロールバー以外にも「まだ続きがある」ことを
   伝える必要がある。
   背景グラデーションのみで実現するCSS定番手法(2枚の背景を要素と一緒にスクロールさせる
   <local>ことで、隠れているはずの陰影レイヤー<scroll>をスクロール端で覆い隠す手法)も
   検討したが、資産項目テーブル等ではセル内の<input>(不透明な白背景)が陰影の上に重なって
   隠してしまう組み合わせがあり、データ行では陰影がほぼ見えないことが実機幅での確認で
   判明した。そのためJSで実際のスクロール位置(scrollLeft/scrollWidth/clientWidth)を見て
   表示・非表示を切り替える、要素として独立した陰影(.scroll-shadow、ui.jsのinitScrollShadows)
   に切り替えた。セルの中身に関わらず必ず最前面に出せるため、この問題が起きない。
   実際にスクロールする要素(.table-scroll-area)と、陰影の位置基準(containing block)に
   なる要素(.table-responsive)を分けている。同じ要素に overflow-x:auto と
   position:relative を両方持たせてその中に陰影(position:absolute)を置くと、陰影は
   その要素のスクロール量の影響を受けてしまい、スクロールにつれて陰影自体が横に
   移動してしまう(実機確認で判明、CSSの仕様上、絶対配置の要素はそれ自身が属する
   スクロールコンテナのスクロール量の影響を受けるため)。陰影を「常に同じ端」に
   固定表示するには、位置の基準をスクロールしない別要素に切り離す必要がある。 */
.table-responsive {
    position: relative;
}

.table-scroll-area {
    overflow-x: auto;
}

.scroll-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none; /* 陰影の下にある削除ボタン等の操作を妨げないようにする */
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 1;
}

.scroll-shadow.is-visible {
    opacity: 1;
}

.scroll-shadow-left {
    left: 0;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0));
}

.scroll-shadow-right {
    right: 0;
    background: linear-gradient(to left, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0));
}

/* 要件4.4が優先する一次動線(資産項目入力〜リバランス計算の実行)の入口にあたる、
   口座ワークスペースの資産項目テーブル(3章、一覧タブ)専用の追加対応。
   固定ピクセル幅の列境界を頼りに「次の列を必ず少しだけ見せる」案(peek)も検討したが、
   実機幅を複数計算した結果、画面幅によっては列の境界とほぼ一致してしまい、途切れが
   かえって分かりにくくなる組み合わせが避けられないと判明した(例: 412px幅では列の94%が
   見えてしまい「続きがある」ようには見えない)。列幅に依存する対応は画面幅ごとの当たり外れが
   避けられないため採用せず、代わりに列幅に依存しない陰影そのものを幅広にして
   見落としにくくする方針とした(濃さは.scroll-shadowと共通、実機確認で「常時表示は
   濃すぎる」というフィードバックを受けて調整済み)。 */
.table-responsive-emphasis .scroll-shadow {
    width: 40px;
}

.table-responsive-emphasis .scroll-shadow-left {
    background: linear-gradient(to right, rgba(15, 23, 42, 0.3), rgba(15, 23, 42, 0));
}

.table-responsive-emphasis .scroll-shadow-right {
    background: linear-gradient(to left, rgba(15, 23, 42, 0.3), rgba(15, 23, 42, 0));
}

/* 資産項目名列(colgroupで唯一幅を指定していない列)が、他の列の固定幅を除いた
   残り全部を使うようにする(名称が長いファンド名でも窮屈にならないようにするため)。
   狭い画面では.table-responsiveの横スクロールに切り替わる。 */
.asset-table {
    table-layout: fixed;
    min-width: 700px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

th, td {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-success {
    color: var(--success);
}

.text-secondary {
    color: var(--text-secondary);
}

input[type="text"], input[type="number"], select {
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}

/* ネイティブのプルダウン矢印(OSごとに見た目がまちまち)をSVGの矢印に統一する */
select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--bg-card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 24px;
}

/* 編集可能/不可の区別を明確にする(履歴参照モードの既定<読み取り専用>など)。
   .input-footer(合計行の疑似入力欄)はこの見た目を継承しない<下記で個別に上書き>。 */
input[type="text"]:disabled, input[type="number"]:disabled, select:disabled {
    background: #f1f5f9;
    color: var(--text-secondary);
    border-color: var(--border);
    cursor: not-allowed;
}

.input-asset-name {
    width: 100%;
    box-sizing: border-box;
}

.input-asset-ratio {
    width: 60px;
    text-align: right;
}

.input-asset-amount {
    width: 110px;
    text-align: right;
}

/* 合計行の数値(画面設計3章、MEMO.md 8/27コメント4)。個別行の入力欄(.input-asset-ratio/
   .input-asset-amount)と同じ幅・余白・枠線幅で組み立て、枠線の色だけ透明にすることで、
   見た目は文字のみでも数字の位置は入力欄と1px単位で揃う(text-alignだけでは、入力欄の
   内部余白の分だけ数字がずれてしまうため)。 */
.input-footer,
.input-footer:disabled {
    border-color: transparent;
    background: transparent;
    font-weight: bold;
    color: inherit;
    cursor: default;
    pointer-events: none;
}

.volume-subfield {
    margin-top: 6px;
    padding: 6px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 12px;
    text-align: left; /* 親td(現在の資産額列)の右寄せを継承しないようにする */
}

.input-asset-volume {
    width: 90px;
    text-align: right;
}

/* アラート */
.alert-text {
    color: var(--danger);
    font-weight: bold;
    font-size: 14px;
    margin: 0 0 16px;
}

/* 計算結果 */
.result-placeholder {
    color: var(--text-secondary);
    font-size: 14px;
}

.result-table th, .result-table td {
    white-space: normal;
}

.result-summary {
    margin-top: 16px;
    text-align: right;
    font-size: 16px;
}

.dashboard-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* 同意画面(要件4.6) */
.consent-list {
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-main);
    padding-left: 20px;
    margin-bottom: 20px;
}

/* OCR入力モーダル(画面設計6章) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-card {
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    text-align: left;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
}

.ocr-paste-area {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 40px 16px;
    text-align: center;
    color: var(--text-secondary);
    margin: 16px 0;
    cursor: text;
}

.ocr-paste-area:focus {
    outline: 2px solid var(--primary);
}

.ocr-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 16px;
}

.ocr-preview-item {
    position: relative;
}

.ocr-preview-item img {
    display: block;
    max-width: 140px;
    max-height: 140px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.ocr-preview-item .btn-remove-image {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

/* フォーム項目(OCR設定画面等): ラベルと入力欄を1項目1行にする(隣接項目との折り返し混在を防ぐ) */
.form-field {
    margin-bottom: 14px;
}

.form-field label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 4px;
}

/* アセットクラス別集計(画面設計3-3節・4章・7章、要件3.7) */
.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.section-title-row .section-title {
    margin-bottom: 0;
}

.small-tabs {
    margin-bottom: 0;
}

/* 口座タブ(.tab-btn)とは別クラスにする(同じ「.active」との組み合わせで
   E2Eテストのセレクタが複数要素にヒットして壊れるのを防ぐため)。見た目は共通化する。 */
.subtab-btn {
    position: relative;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    font-size: 13px;
}

/* タブの一体感(資産項目表・ダッシュボードの「一覧/アセットクラス別」、分析ダイアログの
   「履歴表/履歴グラフ」に適用)。口座タブ(#account_tabs_row)と同じ方式で、タブ自身に
   下線を持たせ選択中だけ自身の背景色で上書きして消す(共有の1本線+はみ出しで重ねる
   方式は、口座タブの横スクロール領域で不具合が見つかったため採用しない、詳細は
   #account_tabs_rowのコメントを参照)。
   選択/非選択の配色も口座タブ(.tab-btn/.tab-btn.active)と統一する(以前は非選択を
   グレー塗り、選択を白背景+グレー枠という別ルールにしていたが、口座タブと見た目が
   揃わず一貫性がないという指摘を受けて統一した)。 */
.section-title-row.tabs-merge {
    align-items: flex-end;
}

.tabs-merge .merge-tabs .subtab-btn {
    border-bottom: 1px solid var(--border-strong);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tabs-merge .merge-tabs .subtab-btn.active {
    border-bottom-color: var(--primary-tint);
}

/* 口座タブ(#account_tabs_row)と同じ「外側に開く」裾の表現(疑似要素で角を丸く継ぎ足す)。
   見た目の一貫性のため同じ手法・同じ半径(8px)・同じ塗り色(--primary-tint)にする。 */
.tabs-merge .merge-tabs .subtab-btn.active::before,
.tabs-merge .merge-tabs .subtab-btn.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 8px;
    height: 8px;
}

.tabs-merge .merge-tabs .subtab-btn.active::before {
    left: -8px;
    background: radial-gradient(circle at top left, transparent 8px, var(--primary-tint) 8.5px);
}

.tabs-merge .merge-tabs .subtab-btn.active::after {
    right: -8px;
    background: radial-gradient(circle at top right, transparent 8px, var(--primary-tint) 8.5px);
}

.subtab-btn.active {
    border-color: var(--primary);
    background: var(--primary-tint);
    color: var(--primary);
    font-weight: bold;
}

.asset-class-empty-notice {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.asset-class-group-row {
    cursor: pointer;
    background: #f8fafc;
}

.asset-class-group-row:hover {
    background: var(--primary-tint);
}

.asset-class-group-toggle {
    display: inline-block;
    width: 1em;
}

.asset-class-detail-row td {
    background: #fbfdff;
}

.form-field input[type="text"],
.form-field input[type="password"],
.form-field select {
    width: 100%;
}

.input-with-toggle {
    display: flex;
    gap: 8px;
}

.input-with-toggle input {
    flex: 1;
    min-width: 0;
}

/* 口座タブの最終保存表示(画面設計3章、機能仕様10.7節、要件3.8) */
.tab-last-saved {
    display: block;
    font-size: 11px;
    font-weight: normal;
    color: var(--text-secondary);
}

.tab-btn.active .tab-last-saved {
    color: var(--primary);
}

/* 計算結果直後の保存導線(機能仕様10.7節、要件3.8) */
.save-nudge {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* 分析ダイアログ(画面設計8章、要件3.8) */
.modal-card-wide {
    max-width: 900px;
}

.analysis-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

#analysis_chart_view {
    position: relative;
    height: 360px;
}

#analysis_chart_canvas {
    width: 100% !important;
    height: 100% !important;
}

/* 狭い画面での履歴グラフ簡易表示(画面設計0-1節・8-4節、要件4.4)。
   凡例(系列名の一覧)が下部で折り返す行数が増えても、Chart.js側の凡例サイズ縮小
   (renderAnalysisChartのisNarrow分岐、ui.js)と合わせて描画領域を確保するため、
   高さのみを広げる。グラフの種類・データ・軸の考え方(積み上げ面グラフ、実際の
   年月日に比例した時間軸)は変更しない。 */
@media (max-width: 600px) {
    #analysis_chart_view {
        height: 480px;
    }
}

/* アセットクラスの表示順一覧(画面設計7章、機能仕様9.4節)。
   ドラッグ&ドロップ・[▲][▼]の両方で並び替えられる。 */
.asset-class-order-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.asset-class-order-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.asset-class-order-item:last-child {
    border-bottom: none;
}

.asset-class-order-item.dragging {
    opacity: 0.4;
}

.asset-class-order-item .drag-handle {
    cursor: grab;
    color: var(--text-secondary);
    touch-action: none;
}

.asset-class-order-item .asset-class-order-name {
    flex: 1;
}

.asset-class-order-item .asset-class-rename-input {
    flex: 1;
}

.asset-class-order-item-other {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* 分析ダイアログ⇔アセットクラス管理モーダルの横スライド遷移(画面設計8-5節)。
   モーダルを閉じずに中身を切り替えるため、簡易的なスライドアニメーションのみ付与する。 */
.modal-card.slide-out-to-left {
    animation: slide-out-to-left 0.18s ease-in forwards;
}

.modal-card.slide-in-from-right {
    animation: slide-in-from-right 0.18s ease-out;
}

.modal-card.slide-out-to-right {
    animation: slide-out-to-right 0.18s ease-in forwards;
}

.modal-card.slide-in-from-left {
    animation: slide-in-from-left 0.18s ease-out;
}

@keyframes slide-out-to-left {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-40px); opacity: 0; }
}

@keyframes slide-in-from-right {
    from { transform: translateX(40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out-to-right {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(40px); opacity: 0; }
}

@keyframes slide-in-from-left {
    from { transform: translateX(-40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* 履歴表の差分・変化率表示(画面設計8-1節、機能仕様10.10節) */
.analysis-diff-line {
    display: block;
    font-size: 11px;
}

.analysis-diff-up { color: var(--success); }
.analysis-diff-down { color: var(--danger); }
.analysis-diff-flat { color: var(--text-secondary); }

/* 目標比率/現在比率の円グラフ(画面設計3-4節、機能仕様12章) */
#asset_allocation_chart_wrap {
    margin-top: 16px;
}

#asset_allocation_chart_view {
    position: relative;
    height: 260px;
}

#asset_allocation_chart_canvas {
    width: 100% !important;
    height: 100% !important;
}