/* 文書データベース（Culminans.Notes）。クラス名は notes- で始める（ほかのモジュールの規則と混ざらないように）。 */

/* アプリの名前の前の絵（一覧・見出し）。 */
.notes-app-name {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* アイコンの選択（押すと選び、もう一度押すと既定に戻る）。 */
.notes-icon-choice {
    padding: .35rem .5rem;
    border: 1px solid var(--alt-border, #d0d5dd);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.notes-icon-choice-on {
    border-color: var(--alt-accent, #2b6cb0);
    box-shadow: 0 0 0 1px var(--alt-accent, #2b6cb0) inset;
}

/* 設計の下書きの案内（NOTES-96。下書きのアプリと、下書きのある本番のアプリの画面）。文と入口のボタンを 1 行に並べ、狭い画面では折り返す */
.notes-draft-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

/* アプリの見出しの下の説明。改行をそのまま見せる。 */
.notes-app-description {
    white-space: pre-wrap;
}

/* 文書の値（読むとき）。見出しと値を 2 列に並べる。 */
.notes-document-values {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: .4rem 1rem;
}

.notes-document-values dt {
    font-weight: 600;
}

.notes-document-values dd {
    margin: 0;
    white-space: pre-wrap;
}

/* リッチテキストの値は HTML の改行で組まれているので、空白の折り返しは既定に戻す。 */
.notes-document-values dd.notes-richtext {
    white-space: normal;
}

/* ACL の窓の権限・ロールのチェック（折り返して並べる）。 */
.notes-acl-checks {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
}

/* 文書の画面の応答の木。段（--notes-depth）の分だけ字下げする（一覧の字下げは DxTreeList が付ける）。 */
.notes-thread {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.notes-thread-item {
    padding-left: calc(var(--notes-depth, 0) * 1.25rem);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
}

/* 削除の窓の選択肢（応答ごと消すか残すか）。 */
.notes-delete-choices {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: .5rem 0;
}

/* アプリの画面＝左にナビゲーター（NT-VIEW-009）、右に一覧。狭い画面では一覧の上に回り込む。 */
/* 目次 | つまみ | 一覧。目次の幅は利用者がつまみで変える（--notes-navigator-width。notes.js が <html> に入れる）。
   **一覧は 760px より縮めない**（2026-10-06 洋二さんの依頼）＝目次を広げると一覧は右へ押し出され、「文書」の枠ごと右へ広がる
   （画面を横にスクロール）。縮めると列が最小幅に張りついて、列幅を変えられなくなる */
.notes-documents-card {
    width: fit-content;
    min-width: 100%;
}

.notes-app-body {
    display: grid;
    grid-template-columns: var(--notes-navigator-width, 16rem) 6px minmax(760px, 1fr);
    gap: .5rem;
    align-items: start;
}

.notes-app-body > .notes-navigator {
    min-width: 0;
}

/* 一覧は枠の中に収める（2026-10-06 洋二さんの依頼）＝中身（列・ボタンの並び・ページャ）が列の幅を超えても枠の外へ出さず、一覧の中で横に送る */
.notes-app-body > .notes-app-list {
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: none;
}

/* 一覧と下のパネル（2026-10-21 洋二さんの依頼＝メールのように上に一覧・下に文書のタブ）。境目は DxSplitter。
   高さは画面に合わせる（個人のメールの画面の .alt-pmail と同じ考え方。vh は表示倍率で割る＝シェルの決まり）。
   一覧とパネルはそれぞれの欄の中で送る＝ページ全体を送らずに読める */
.notes-reading {
    height: max(480px, calc(100vh / var(--alt-vz, 1) - 220px));
    border: 1px solid var(--alt-border);
    border-radius: 6px;
    background: var(--alt-surface);
}

.notes-reading-list,
.notes-reading-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 一覧（DxTreeList の CssClass）は残りの高さいっぱいで、中で送る。ページャは下に付ける */
.notes-reading-list > .notes-reading-rows {
    flex: 1 1 auto;
    min-height: 0;
}

.notes-reading-list > .notes-view-pager {
    flex: 0 0 auto;
    padding: 0 8px;
}

.notes-reading-list > .form-info,
.notes-reading-panel > .meta {
    margin: 10px 14px;
}

.notes-reading-tabs {
    flex: 0 0 auto;
}

.notes-reading-document {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 10px 14px;
}

/* パネルの文書の件名（文書の画面の page-title より小さく） */
.notes-panel-title {
    margin: 0 0 4px;
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}

/* 目次を畳んだとき（2026-10-12 洋二さんの依頼）＝目次とつまみを隠し、開くボタンの細い帯と一覧の 2 列にする */
.notes-app-body.notes-navigator-collapsed {
    grid-template-columns: auto minmax(760px, 1fr);
}

.notes-app-body.notes-navigator-collapsed > .notes-navigator,
.notes-app-body.notes-navigator-collapsed > .notes-app-resizer {
    display: none;
}

.notes-navigator-rail {
    border: 1px solid var(--alt-border);
    border-radius: .375rem;
    padding: .25rem;
}

/* 目次の頭の畳むボタン（右寄せ） */
.notes-navigator-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .25rem;
}

.notes-navigator-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background: none;
    color: inherit;
    cursor: pointer;
}

.notes-navigator-toggle:hover {
    background: var(--alt-nav-hover-bg);
}

/* 枠の見出しの開閉（文書・フォーム）。見出しの文字のまま押せ、三角の向きで開閉を出す */
.notes-section-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.notes-section-toggle::before {
    content: "";
    display: inline-block;
    margin-right: .4em;
    border-style: solid;
    border-width: .35em 0 .35em .55em;
    border-color: transparent transparent transparent currentColor;
    vertical-align: .1em;
    transform: rotate(90deg);
    transition: transform .15s;
}

.notes-section-toggle[aria-expanded="false"]::before {
    transform: none;
}

/* フォームの節（NOTES-97）。見出しの開閉は .notes-section-toggle。列の数は節ごと（1〜3）＝2 列は .alt-form-grid のまま。
   長文の欄（.alt-span2）は節の幅いっぱい（1 列なら 1 列ぶん、3 列なら 3 列ぶん）。狭い画面では .alt-form-grid の決まりどおり 1 列 */
.notes-form-section {
    margin-top: 12px;
}

.notes-form-section-title {
    margin: 0 0 6px;
    font-size: 1rem;
}

.alt-form-grid.notes-section-cols-1 {
    grid-template-columns: minmax(0, 1fr);
}

.alt-form-grid.notes-section-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alt-form-grid.notes-section-cols-1 > .alt-span2,
.alt-form-grid.notes-section-cols-3 > .alt-span2 {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {
    .alt-form-grid.notes-section-cols-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 畳んだ枠は描いたまま隠す（開き直しで一覧を読み直さない） */
.notes-collapsed {
    display: none;
}

/* つまみの置き方だけ（形と当てたときの色はシェルの .app-resizer） */
.notes-app-resizer {
    align-self: stretch;
    border-radius: 3px;
    border-left: 1px solid var(--alt-border);
    margin-left: 2px;
}

@media (max-width: 900px) {
    .notes-app-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .notes-app-resizer {
        display: none;
    }
}

.notes-navigator {
    border: 1px solid var(--alt-border);
    border-radius: .375rem;
    padding: .5rem .75rem;
}

.notes-navigator ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* 見出しの下は字下げ */
.notes-navigator-heading > ul {
    padding-left: 1rem;
}

.notes-navigator-heading > span {
    font-weight: 600;
}

.notes-navigator-current {
    font-weight: 700;
}

/* 「ナビゲーターを編集」は目次の右下に絵だけのボタンで置く */
.notes-navigator-edit {
    display: flex;
    justify-content: flex-end;
    margin-top: .5rem;
}

/* ナビゲーターの設計の画面。罫線つきの表で、並べ替えのボタンは左端の列にそろえる（見出しの下の行も字下げしない）。 */
.notes-navigator-table {
    border-collapse: collapse;
    max-width: 100%;
}

.notes-navigator-table th,
.notes-navigator-table td {
    border: 1px solid var(--alt-border-strong);
    padding: 4px 10px;
    text-align: left;
    vertical-align: middle;
}

.notes-navigator-table-heading td {
    font-weight: 600;
}

/* 見出しの下は名前だけ字下げする */
.notes-navigator-table td.notes-navigator-table-child {
    padding-left: 1.75rem;
}

/* ビューの列の見出しの並べ替え（ページ送りの一覧。NOTES-95）。見出しの文字のまま押せるようにする。 */
.notes-view-sort {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* カテゴリの見出しを開くボタン（まだ下を読んでいない見出し）と「続きを表示」（NOTES-95）。読んだあとの開閉は一覧の三角 */
.notes-view-category-open,
.notes-view-more {
    background: none;
    border: 0;
    padding: 0 0.25rem 0 0;
    color: var(--bs-link-color, inherit);
    font: inherit;
    cursor: pointer;
}

/* DB で数えた見出しの行は一覧の三角を出さない（開閉は見出しのボタン。DevExpress の内部スタイルに勝つため !important） */
.notes-view-category-row .dxbl-grid-tree-node-expand-controls-cell .dxbl-btn {
    visibility: hidden !important;
}

.notes-view-category-open:disabled,
.notes-view-more:disabled {
    cursor: default;
    opacity: 0.6;
}

/* ビューのページ送り（一覧の下）。 */
.notes-view-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}

/* 1 ページの件数の欄は数字が収まる幅に止める（並びの中で幅いっぱいに伸びて折り返していた。DevExpress の入力欄は独自タグで選ぶ＝pitfalls.md） */
.notes-view-pager > dxbl-combo-box {
    flex: 0 0 auto;
    width: 5.5rem;
}

/* ビューのカテゴリの見出し（値と件数・合計）。 */
.notes-view-category {
    font-weight: 600;
}

/* ビュー（NOTES-12）。アプリの画面のビューの切り替え。 */
.notes-view-toolbar {
    align-items: center;
}

/* ビューのグラフ（2026-10-21）。描くのは Core の DashboardChartView（ダッシュボードの部品と同じ）。
   高さは px で決める（vh は表示倍率の zoom の中で伸びる）。300px より低くしない（DevExpress の内側の箱の最低の高さ。app.css の .dash-widget-chart）。 */
.notes-view-chart {
    margin: 0 0 .75rem;
    padding: .75rem 1rem;
}

.notes-view-chart-canvas {
    height: 320px;
}

/* ビューを直す画面。対象のフォームは横に並べ、列は 1 行に対象・並べ替え・操作を並べる。 */
.notes-view-forms {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.notes-view-columns {
    margin: 0 0 .5rem;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.notes-view-columns > li,
.notes-view-leaf,
.notes-view-group-head,
.notes-view-group-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* 式の列（NOTES-76）の入力は列の行の下の段へ（行は折り返す flex）。式の欄は行の幅いっぱい */
.notes-view-formula {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-left: 1rem;
}

.notes-view-formula-text {
    flex-basis: 100%;
}

/* 条件のグループは枠で囲み、入れ子は内側へ。 */
.notes-view-group {
    border: 1px solid var(--alt-border);
    border-radius: .375rem;
    padding: .5rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* AI の要約（NOTES-15）。AI の出力は文として出し、改行を残す */
.notes-ai-summary {
    white-space: pre-wrap;
}

/* 競合文書の印（応答の木。NOTES-16） */
.notes-conflict-mark {
    margin-left: .5rem;
    padding: 0 .375rem;
    border-radius: .25rem;
    font-size: .75rem;
    background: var(--alt-warning-bg);
    color: var(--alt-warning-text);
}

/* 変更履歴（既定で畳む） */
.notes-revisions {
    margin-top: 1rem;
}

.notes-revisions summary {
    cursor: pointer;
}


/* 詳細検索（NOTES-17）。条件の部品はビューの編集と同じ（notes-view-group など）。掛けているあいだはボタンに印 */
.notes-search-advanced {
    border: 1px solid var(--alt-border);
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin: 0 0 .75rem;
}

.notes-search-advanced-on {
    border-color: var(--alt-accent) !important;
    color: var(--alt-accent) !important;
}

/* エージェント（NOTES-80・81）。処理は 1 つずつ枠で囲み、見出しの行（種類と並べ替え・削除）の下に中身を並べる。 */
.notes-agent-actions {
    margin: 0 0 .5rem;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.notes-agent-actions > li {
    border: 1px solid var(--alt-border);
    border-radius: .375rem;
    padding: .5rem .75rem;
}

.notes-agent-action-head,
.notes-agent-action-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.notes-agent-action-body > .alt-form-grid,
.notes-agent-action-body > .notes-view-formula-text,
.notes-agent-action-body > .acct-hint {
    flex-basis: 100%;
}

/* 値か式の選択は項目の隣に横並び（削除の選択肢と同じ部品だが、ここは 1 行に収める） */
.notes-agent-action-body > .notes-delete-choices {
    flex-direction: row;
    gap: 1rem;
    margin: 0;
}

/* メールの送信（NOTES-80）。宛先の項目・返信先の小見出しは 1 行を占める */
.notes-agent-action-body > .notes-agent-label,
.notes-agent-action-body > .notes-agent-line,
.notes-agent-action-body > .notes-view-forms {
    flex-basis: 100%;
}

/* 文書の作成の入れる欄（NOTES-80）。1 行ずつ左に線を引き、中身は部品の中身と同じ並び */
.notes-agent-assignments {
    flex-basis: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.notes-agent-assignments > li {
    border-left: 3px solid var(--alt-border);
    padding-left: .5rem;
}

.notes-agent-dry-run {
    margin: .5rem 0;
}

/* 実行の記録の結果の欄（理由と、失敗した文書の行を縦に並べる） */
.notes-agent-run-result {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

/* 設定の画面の定番のテンプレート（NOTES-85）。名前と説明の右に「追加」か「追加済み」 */
.notes-starter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--alt-border);
}
.notes-starter-row:last-child { border-bottom: none; }
.notes-starter-row .acct-hint { margin: 2px 0 0; }

/* カレンダーの形のビューの吹き出しの見出し（NOTES-128。件名と閉じるだけ＝予定表の calendar-tooltip-subject と同じ形） */
.notes-calendar-tooltip-subject {
    margin-right: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* AI の設計の下書き（NOTES-131）。作らない欄は薄く出す（案には残す＝戻せる） */
.notes-ai-design-skipped > :not(:first-child) {
    opacity: .55;
}

/* 選んだ文書のコピー（NOTES-136）。元の欄ごとの写し方。写さない欄は薄く出す */
.notes-copy-fields {
    margin: 0;
    padding-left: 1.25rem;
    max-height: 14rem;
    overflow-y: auto;
}

.notes-copy-fields > li {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.notes-copy-skipped {
    opacity: .6;
}