/* Forms モジュールの体裁。RCL の静的ファイルは _content/Culminans.Forms/... で配信される（CLAUDE.md §7）。 */

/* 状態のバッジ。背景色は利用者が選ぶので、**文字は白で固定せず影で読ませる**
   （薄い色を選ばれたときに白抜きだと消える）。 */
.forms-state-badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .8125rem;
    line-height: 1.5;
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, .55);
    white-space: nowrap;
}

/* 色の項目の見本。**枠を付ける**＝白や淡い色を選ばれたときに、背景と溶けて「何も無い」と読まれる。 */
.forms-color-swatch {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .35em;
    vertical-align: -.15em;
    border: 1px solid var(--alt-border);
    border-radius: 3px;
}

/* 用途の選択（3 枚のカード）。ラジオより押す場所が広く、説明を添えられる。 */
.forms-choice {
    display: block;
    text-align: left;
    padding: .6rem .8rem;
    border: 1px solid var(--alt-border, #d0d5dd);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    min-width: 15rem;
}

.forms-choice strong {
    display: block;
}

/* アイコンの選択。 */
.forms-icon {
    padding: .35rem .5rem;
    border: 1px solid var(--alt-border, #d0d5dd);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

/* 選択中の見た目は 1 か所（用途のカードとアイコンで食い違わせない）。 */
.forms-choice-on,
.forms-icon-on {
    border-color: var(--alt-accent, #2b6cb0);
    box-shadow: 0 0 0 1px var(--alt-accent, #2b6cb0) inset;
}

/* AI の候補であることを、押す前に分かる形で見せる（「システムが決めた正しいもの」と読まれない）。 */
.forms-ai-note::before {
    content: "AI";
    display: inline-block;
    margin-right: .4rem;
    padding: 0 .35rem;
    border-radius: 4px;
    background: var(--alt-accent, #2b6cb0);
    color: #fff;
    font-size: .75rem;
}

/* 表方式の画面（2026-08-30）。中身は MVC のビューなので iframe で出す。
   高さを画面いっぱいに取るのは、Excel のつもりで打つ人に「窓の中の小さい表」を見せないため。
   **見出しの高さを数字で写さない**（上を 1 つ触っただけで、はみ出すか隙間が空くかになる）。 */
.forms-sheet-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 8rem);
}

.forms-sheet-frame {
    display: block;
    width: 100%;
    flex: 1;
    min-height: 420px;
    border: 1px solid var(--alt-border);
    border-radius: 6px;
    background: var(--alt-surface, #fff);
}

/* 一覧でフォーム名の前に置くアイコン。**空白 1 つぶんを CSS で空ける**
   ＝Razor のマークアップに素の空白を書いても描画では詰められるので、余白は指定しないと出ない。 */
.forms-name-icon {
    margin-right: .35em;
}

/* 条件の組み立て（第4段）。**入れ子は左の線とインデントで見せる**＝括弧の記号を描くより、
   どこまでが 1 つのグループかが目で追える（AND / OR はグループの見出しに 1 つだけ出る）。 */
.forms-query-group {
    border: 1px solid var(--alt-border);
    border-radius: 6px;
    padding: .5rem;
    background: var(--alt-surface, #fff);
}

.forms-query-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .4rem;
}

/* 子は左へずらす。**線を 1 本引く**ことで、深い入れ子でも「どの見出しの下か」が分かる。 */
.forms-query-children {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-left: .75rem;
    padding-left: .75rem;
    border-left: 2px solid var(--alt-border);
}

.forms-query-leaf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

/* **幅を決め打つ**＝DevExpress の入力は既定で親いっぱいに広がるので、指定しないと
   対象・演算子・値が 1 行ずつ縦に積まれる（条件が 1 つでも 3 行を占める）。
   対象は名前が長くなりやすい（項目名そのもの）ので、演算子より広く取る。 */
.forms-query-target {
    flex: 0 1 16rem;
    min-width: 8rem;
}

.forms-query-op {
    flex: 0 0 9rem;
}

.forms-query-combine {
    flex: 0 0 16rem;
}

/* 値の欄（型ごとに部品が変わるので、共通の幅は外側で持つ）。 */
.forms-query-leaf .alt-w-sm {
    flex: 0 0 11rem;
}

/* 兄弟の条件どうしの切れ目。**行の間に薄い線を 1 本**＝OR のグループに 2 つ並ぶと、
   どこまでが 1 条件かが色の変わり目でしか分からない。 */
.forms-query-children > * + * {
    border-top: 1px dashed var(--alt-border);
    padding-top: .4rem;
}

/* 条件ごとの但し書き。**条件のすぐ下**に出す（doc を読まないと分からない挙動なので、作る場所で見せる）。 */
.forms-query-hint {
    margin: 0 0 .2rem .75rem;
}

/* 定義ごと消えた項目を指している条件。 */
.forms-query-gone {
    color: var(--alt-danger, #c53030);
}

/* 名前・上限・共有はダイアログの下側にまとめる（条件を組んだあとに触るもの）。 */
.forms-query-meta {
    margin-top: .75rem;
}

/* グラフのパネル（第5段）。一覧の下に折りたたみで置く。 */
.forms-chart-toolbar {
    margin-top: .75rem;
}

/* 枠は alt-card（シェルの既存クラス）。ここは中の余白だけを持つ。 */
.forms-chart {
    padding: .5rem;
}

/* **高さは CSS で持つ**（部品の Height でも指定できるが、低すぎると棒が潰れ、高すぎると
   一覧が画面から押し出される＝画面の高さに対する割合で決めたいので体裁側に置く）。 */
.forms-chart-canvas {
    height: min(420px, 50vh);
}