html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* [260813] 一覧の自動更新インジケータ(共有)。「戻ってきたときに更新があった場合だけ」帯の中を青いバーが走る。
   画面は覆わない=更新は裏で進み、その間もユーザーは操作できる(260813 ユーザー指示)。
   実体の置き場所は Z30(検索センター)=タイトルバー直下の帯 / それ以外=自ウィンドウ最上部(App.razor deListBusy)。 */
.de-busy-bar {
    position: relative;
    height: 3px;
    overflow: hidden;
    background: rgba(45,108,223,.14);
}

    .de-busy-bar span {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 38%;
        background: linear-gradient(90deg, rgba(45,108,223,0), #2d6cdf 45%, #6ea8ff 72%, rgba(45,108,223,0));
        animation: de-busy-run 1.05s linear infinite;
    }

@keyframes de-busy-run {
    0% { left: -40%; }
    100% { left: 100%; }
}

/* フォールバック(z30が居ない=単独/WebForms直埋め)は自ウィンドウ最上部に固定表示 */
#de-list-busy .de-busy-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2147482002;
}

/* データ未取得時のローディング表示: グリッド領域(iframeビューポート)を埋めてGIFを中央再生 */
.de-grid-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100vh - 16px);
}
.de-grid-loading img { width: 72px; height: 72px; }

/* 読み込み中バッジ(左上): プリレンダー済みの中身が先に出ても、回路確立=操作可能になるまで
   「読み込み中」であることを示す。中身を隠さないよう小さく重ねるだけ(クリックは透過)。 */
.de-boot-badge {
    position: fixed;
    left: 8px;
    top: 8px;
    z-index: 2147483001;   /* 全面ブートローダ(2147483000)より前面 */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border: 1px solid #cfd4e0;
    border-radius: 11px;
    background: rgba(255,255,255,.92);
    color: #55607a;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    pointer-events: none;
}
.de-boot-spin {
    width: 11px;
    height: 11px;
    border: 2px solid #c3cbdd;
    border-top-color: #5b7cc0;
    border-radius: 50%;
    animation: de-boot-spin 0.7s linear infinite;
}
@keyframes de-boot-spin { to { transform: rotate(360deg); } }

/* 汎用アクションボタン(@Button): グリッドセル内の操作ボタン(候補適用/手入力する等)。
   元ZeroCoder版の .ButtonStyle(Resource/css/Japanese/BaseDefs.css)に合わせる=白背景・グレー枠。 */
.de-actbtn {
    font-size: 12px;
    font-weight: 400;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    outline: 0px;
    transition: background-color 0.12s, border-color 0.12s;
    box-sizing: border-box;
    white-space: nowrap;
}
.de-actbtn:not(:disabled):hover { background-color: #f9fafb; }
.de-actbtn:disabled { color: #B7BBC2 !important; cursor: default; }
/* [260830] @Efalse のリンク列(@HyperLink/@ImageButton/文言リンク)。ボタン型の :disabled と同じ灰色・同じ
   「押せない」顔にする。button 要素ではないので :disabled が効かず、従来は活性のままだった。 */
.de-linkoff { color: #B7BBC2 !important; cursor: default !important; pointer-events: none; opacity: .6; }
.de-linkoff img, .de-linkoff svg { filter: grayscale(1); opacity: .5; }

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* --- ZeroCoder準拠のグリッド入力コントロール(WebFormsの form-control + DEDropdownListStyle 相当をCSSで再現) ---
   従来はセル毎にインラインCSSで近似していたが、ZeroCoder同様にクラスでスタイル指定する。
   実測(従来グリッドのcomputed style)に合わせる: 枠1.5px #ced4da/角丸4px、非活性は薄青#E7EFFA・黒文字、
   FormReferは青文字#0000ff・右12px枠。 */
.de-in {
    box-sizing: border-box;
    width: 100%;
    border: 1.5px solid #ced4da;
    border-radius: 4px;
    padding: 2px 5px;
    color: #000;
    background-color: #fff;
    vertical-align: middle;
}
.de-in:disabled, .de-in[readonly] {   /* 非活性(マスク)セル */
    background-color: #E7EFFA;
    color: #000;
    -webkit-text-fill-color: #000;
    opacity: 1;
    cursor: not-allowed;
}
.de-in.de-refer {                      /* FormRefer 自由入力可: 素の入力と同じ見た目(帯なし・黒文字) */
    background-color: #fff;
}
/* FormRefer 自由入力不可(referClickOnly=[9]TRUE=本物 blnIsClickAction): 白地+右12pxの水色帯だけで示す。
   本物は読取専用化+SetControlStyleWithStyleDefs の右12px帯(GenneralTool:16735-16751)。虫眼鏡は作らない。 */
.de-in.de-refer.clickonly {
    color: #000;
    -webkit-text-fill-color: #000;
    background-color: #fff;
    cursor: pointer;
    border-right: 12px solid #87ceeb;
}
.de-in.de-edited { background-color: #fff7d6; }
/* ---- Y16FormRefer の虫眼鏡(4か所共通: W10 / W10内ADDCTRLSV,H / DataGrid / DataGrid内ADDCTRLSV,H) ----
   ・自由入力可  : **水色帯なし + 虫眼鏡を常時表示**(260829 ユーザー指示)。手入力もできる。
   ・自由入力不可([9]=TRUE): wrapper/ボタンを描画しない=**虫眼鏡なし・欄の右12px水色帯だけ**が手掛かり。
   本物(GenneralTool:15542→JScript1.js:10645)はアイコンをフォーカス時に差し込むが、
   「参照項目だと一目で分かること」を優先して常時表示にする(=自由入力可/不可の見分けが必ず付く)。 */
.de-refer-wrap { display: flex; align-items: center; gap: 2px; width: 100%; }
.de-refer-wrap > input { flex: 0 1 auto; min-width: 0; }
.de-refer-wrap > .de-refer-ico { flex: none; }
   /* 編集済ハイライト */
select.de-in { padding: 1px 2px; }

/* FormRefer 検索モーダル(自前再現) */
.de-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.de-modal {
    /* [260724] 小マージン(16px)を残して画面いっぱいに表示(旧: 88%/max1280px×90%/max900px) */
    background: #fff; width: calc(100% - 32px); height: calc(100% - 32px);
    max-width: none; max-height: none;
    display: flex; flex-direction: column; border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    overflow: hidden; font-size: 12px;
    position: relative;   /* [260728] Busyマスク(.de-modal-busy)の基準 */
}
/* [260728] 複数選択の反映中マスク: モーダル全面を覆い操作をブロック(ローディングgif+文言) */
.de-modal-busy {
    position: absolute; inset: 0; z-index: 20;
    background: rgba(255,255,255,0.65);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: #345; font-weight: bold; font-size: 13px;
    cursor: wait;
}
.de-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: #EBEBEB; color: #5E6470; font-weight: bold; border-bottom: 1px solid #d0d5dd;
}
.de-modal-x {
    border: none; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: #5E6470;
}
.de-modal-x:hover { color: #c00; }
.de-modal-tools { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #eee; }
.de-modal-filter { flex: 0 0 260px; border: 1.5px solid #ced4da; border-radius: 4px; padding: 4px 8px; font-size: 12px; }
.de-modal-count { color: #888; }
.de-modal-pagelink { color: blue; cursor: pointer; text-decoration: underline; font-size: 12px; }
.de-modal-pagelink.off { color: #aab; cursor: default; text-decoration: none; }
.de-modal-vclear { margin-left: auto; border: 1px solid #aab; background: #f6f8fb; border-radius: 4px; padding: 3px 12px; cursor: pointer; font-size: 12px; }
.de-modal-body { flex: 1 1 auto; overflow: auto; }
.de-modal-table { border-collapse: collapse; width: 100%; }
.de-modal-table thead th {
    position: sticky; top: 0; background: #EBEBEB; color: #5E6470; font-weight: bold;
    border: 1px solid #C4C4C4; padding: 4px 8px; text-align: left; white-space: nowrap; z-index: 2;   /* [260917] 固定列 td(z=1)より上・固定 th(z=3)より下 */
}
.de-modal-table tbody td { border: 1px solid #e3e6ea; padding: 3px 8px; white-space: nowrap; }
/* [260917] 固定列(Col_Fix=deFixColsOn の .de-fixcol)。border-collapse の罫線は sticky セルに追従せず、固定セル同士の境目にサブピクセルの
   隙間も出る(W10Grid と同じ現象)ので、セルの外側 1px を outline(罫線色)で塗って線と隙間を一度に処理する。 */
.de-modal-table tbody td.de-fixcol { outline: 1px solid #e3e6ea; outline-offset: 0; }
.de-modal-table thead th.de-fixcol { outline: 1px solid #d5d9e0; outline-offset: 0; }
.de-modal-table tbody tr { cursor: pointer; }
/* [260917] hover 色は td ではなく tr に(固定列の td は background-color:inherit で行の色を受ける。tr の inline 背景(交互色/選択色)に勝つため !important) */
.de-modal-table tbody tr:hover { background-color: #eef4ff !important; }

/* グリッド左上の 追加(＋)/削除(×) ボタン(元ZeroCoderの btnAddRow/btnDelete 相当のスタイル) */
.de-gridbtn {
    width: 30px; height: 30px; line-height: 1; font-size: 16px; font-weight: bold;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; cursor: pointer; background: #fff; padding: 0;
}
.de-gridbtn:disabled { opacity: .4; cursor: not-allowed; }
.de-gridbtn-add { color: #1565c0; border: 1.5px solid #1565c0; }
.de-gridbtn-add:not(:disabled):hover { background: #e8f0fe; }
.de-gridbtn-del { color: #d32f2f; border: 1.5px solid #d32f2f; }
.de-gridbtn-del:not(:disabled):hover { background: #fdecec; }

/* --- グリッドセル Y12ItemRefer ポップアップ(W10FormのY12ポップアップと同型=本物 Y12_PositionNearSourceElement 準拠) --- */
.de-y12-anchor { position: relative; display: inline-block; }
.de-y12-backdrop { position: fixed; inset: 0; z-index: 9000; }
.de-y12-pop { position: absolute; top: 100%; left: 0; z-index: 9100; background: #fff; border: 1px solid #98a5b8;
              box-shadow: 0 6px 20px rgba(0,0,0,.25); min-width: 160px; max-height: 240px; overflow-y: auto; }
.de-y12-head { display: flex; justify-content: flex-end; background: #EBEBEB; border-bottom: 1px solid #d0d0d0; }
.de-y12-x { border: none; background: #c9302c; color: #fff; font-size: 11px; padding: 1px 8px; cursor: pointer; }
.de-y12-list { list-style: none; margin: 0; padding: 4px 0; }
.de-y12-list li { padding: 3px 14px; cursor: pointer; white-space: nowrap; }
.de-y12-list li:hover { background: #eef4ff; }

/* --- @PulldownList 多段カスケード(元ZeroCoder CreatePulldownList/superfish 相当をCSSで再現) --- */
/* セル: プルダウン可能を示す右側の太いスカイブルー枠(WebFormsの border-right:skyblue 12px と同趣旨)。 */
.de-in.de-pl-box {
    cursor: pointer;
    background-color: #fff;
    border-right: 12px solid #87cefa;
}
.de-in.de-pl-box:disabled { background-color: #E7EFFA; border-right-color: #cdd9e6; cursor: not-allowed; }
/* 透明の背景クリック捕捉(メニュー外クリックで閉じる)。メニューより下(z-index)に置く。 */
.de-pl-backdrop { position: fixed; inset: 0; z-index: 3000; background: transparent; }
/* カスケードメニュー本体(ルートは position:fixed でカーソル位置に描画=overflowクリップ回避)。 */
.de-sfmenu, .de-sfmenu ul { list-style: none; margin: 0; padding: 0; }
.de-sfmenu {
    position: fixed; z-index: 3001;
    min-width: 190px; background: #2f3b52;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35); border-radius: 2px;
    font-size: 12px;
}
.de-sfmenu li { position: relative; }
.de-sfmenu a {
    /* color は !important。href/class 無しの <a> は Bootstrap Reboot の
       a:not([href]):not([class]){color:inherit}(specificity 0,3,1) に負けて本文色に落ちるため。 */
    display: block; padding: 7px 24px 7px 14px; color: #fff !important; text-decoration: none;
    white-space: nowrap; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.de-sfmenu li:hover > a { background: #45557a; color: #fff !important; }
/* 子メニュー: 既定非表示、親li hoverで右側に展開。 */
.de-sfmenu ul {
    position: absolute; top: 0; left: 100%;
    min-width: 190px; background: #2f3b52;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35); border-radius: 2px;
    display: none;
}
.de-sfmenu li:hover > ul { display: block; }
/* 子ありノードに右向き三角(サブメニューあり)。 */
.de-sfmenu li:has(> ul) > a::after {
    content: "\25B8"; position: absolute; right: 10px; color: #b9c4da; font-weight: bold;
}

/* ===== @TagPicker(仕様=@TagPicker仕様.md §6) =====
   ★カラーパレットの唯一の定義箇所。サーバは colorIndex(整数)だけを返し、色値は持たない。
     app.css は App.razor が全ページで読み込むため、W10Form / W10Grid(iframe) / Y40 が自動的に共有する。
     剰余(% 10)はコンポーネント側で取るので、色数の増減はここの編集だけで完結する。
     定義文③でパレットを上書きした場合のみ、コンポーネントが inline style で CSS変数を被せる。 */
.de-tag {
    --tag-dot: #475569; --tag-bg: #f8fafc; --tag-fg: #334155;   /* 既定(未確定/マスタに無いタグ) */
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 7px; border-radius: 4px; font-size: 12px; line-height: 18px; white-space: nowrap;
    background: var(--tag-bg); color: var(--tag-fg);
}
.de-tag[data-color="0"] { --tag-dot: #2563eb; --tag-bg: #eff6ff; --tag-fg: #1e40af; }
.de-tag[data-color="1"] { --tag-dot: #b45309; --tag-bg: #fffbeb; --tag-fg: #92400e; }
.de-tag[data-color="2"] { --tag-dot: #dc2626; --tag-bg: #fef2f2; --tag-fg: #991b1b; }
.de-tag[data-color="3"] { --tag-dot: #16a34a; --tag-bg: #f0fdf4; --tag-fg: #166534; }
.de-tag[data-color="4"] { --tag-dot: #4f46e5; --tag-bg: #eef2ff; --tag-fg: #3730a3; }
.de-tag[data-color="5"] { --tag-dot: #db2777; --tag-bg: #fdf2f8; --tag-fg: #9d174d; }
.de-tag[data-color="6"] { --tag-dot: #0d9488; --tag-bg: #f0fdfa; --tag-fg: #115e59; }
.de-tag[data-color="7"] { --tag-dot: #9333ea; --tag-bg: #faf5ff; --tag-fg: #6b21a8; }
.de-tag[data-color="8"] { --tag-dot: #ea580c; --tag-bg: #fff7ed; --tag-fg: #9a3412; }
.de-tag[data-color="9"] { --tag-dot: #475569; --tag-bg: #f8fafc; --tag-fg: #334155; }
.de-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tag-dot); flex: none; }
.de-tag-x {
    border: none; background: transparent; padding: 0 0 0 2px; margin: 0;
    color: inherit; opacity: 0.55; cursor: pointer; font-size: 13px; line-height: 1;
}
.de-tag-x:hover { opacity: 1; }
.de-tag.is-busy { opacity: 0.6; }
.de-tag.is-flash { animation: de-tag-flash 0.6s ease-out 2; }
@keyframes de-tag-flash { 0%, 100% { filter: none; } 50% { filter: brightness(0.85); } }

/* 入力ボックス(ピル群+インライン入力) */
.de-tagbox {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    min-height: 26px; padding: 3px 5px; cursor: text;
    background: #fff; border: 1px solid #ced4da; border-radius: 4px;
}
.de-tagbox:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 2px rgba(13,110,253,0.15); }
.de-tagbox.is-readonly { background: #e9ecef; cursor: default; }
.de-tagbox.edited { background: #fffbe6; }
.de-tagbox input {
    flex: 1 1 90px; min-width: 90px; border: none; outline: none; background: transparent;
    font-size: 12px; line-height: 18px; padding: 2px 0;
}

/* 候補パネル: グリッドセル/スクロール領域で切られないよう fixed(座標はJS算出) */
.de-tagpanel {
    position: fixed; z-index: 1080; max-height: 260px; overflow-y: auto;
    background: #fff; border: 1px solid #d0d5dd; border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 4px;
}
.de-tagpanel-row {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.de-tagpanel-row:hover, .de-tagpanel-row.active { background: #eef2f7; }
.de-tagpanel-empty { padding: 6px; color: #888; font-size: 12px; }
.de-tagpanel-plus { color: #555; font-weight: bold; }
.de-tag-hint { font-size: 11px; color: #6b7280; margin-top: 2px; }
.de-tag-err { font-size: 11px; color: #c00; margin-top: 2px; }
.de-tag-spin {
    width: 9px; height: 9px; border: 2px solid rgba(0,0,0,0.15); border-top-color: rgba(0,0,0,0.5);
    border-radius: 50%; animation: de-tag-spin 0.7s linear infinite; flex: none;
}
@keyframes de-tag-spin { to { transform: rotate(360deg); } }

/* 一覧(Y40)などの読み取り専用表示 */
.de-tags-ro { display: inline-flex; flex-wrap: wrap; gap: 3px; }

/* ===== Blazor版Y44(一覧一括編集=/y44。Y40と同一表示+編集レイヤ) ===== */
.de-y44-savebar {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 8px; margin: 0 2px 4px 2px;
    background: #fff8e6; border: 1px solid #e6d9a8; border-radius: 4px; font-size: 12px;
}
.de-y44-count { font-weight: bold; color: #6b5d1f; }
.de-y44-ok { color: #1a7f37; }
.de-y44-err { color: #c00; }
.de-y44-save { background: #2563eb; color: #fff; border: none; border-radius: 4px; padding: 4px 14px; cursor: pointer; }
.de-y44-save:disabled { background: #9ab; cursor: default; }
.de-y44-discard { background: #eee; border: 1px solid #ccc; border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.de-y44-in {
    width: 100%; box-sizing: border-box; font-size: inherit;
    border: 1px solid #ced4da; border-radius: 3px; padding: 1px 4px; background: #fff;
}
.de-y44-in.de-y44-edited { background: #fffbe6; border-color: #d6b656; }
.de-y44-num { text-align: right; }

/* ===== 元ZeroCoder共通ボタンクラス(BaseDefs.css からの移植) =====
   定義文の @Attri@class:btn-blue / @Attri(class:btn-blue) でボタンへ指定できる。
   WebForms版(Resource/css/Japanese/BaseDefs.css)と同一の見た目にするため値も原文どおり。 */
.btn-blue {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    /* [260826] 余白を salestock と同値へ(旧 10px 28px)。WebForms 版 BaseDefs.css と対で直すこと。 */
    padding: 6px 18px !important;
    background-color: #3498DB !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: normal !important;
    box-sizing: border-box !important;
    transition: background-color 0.3s ease;
    font-size: 14px !important;
    gap: 4px !important;
    margin: 0px 1px !important;
}
.btn-blue:hover { background-color: #1D6FA5 !important; }

/* [260909] 操作ボタンの2色目。btn-blue と同じ形で色だけ橙。同じ行に2つ並ぶとき、
   主たる操作(青)と「別の伝票を起こす」副次の操作(橙)を色で分ける。
   ⚠ WebForms 版 Resource/css/Japanese/BaseDefs.css と**対で直すこと**。 */
.btn-orange {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 18px !important;
    background-color: #E67E22 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: normal !important;
    box-sizing: border-box !important;
    transition: background-color 0.3s ease;
    font-size: 14px !important;
    gap: 4px !important;
    margin: 0px 1px !important;
}
.btn-orange:hover { background-color: #C25E0B !important; }

.btn-yellow {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    /* [260907] 余白を btn-blue と同値に(旧 10px 28px)。青と黄を並べたときに高さが揃うように。 */
    /* [260908] btn-blue と同値。対で直すこと(260826 に blue だけ直して yellow が取り残されていた) */
    padding: 6px 18px !important;
    background-color: #FAD77E !important;
    color: #b85400 !important;
    border: none !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: normal !important;
    box-sizing: border-box !important;
    transition: background-color 0.3s ease;
    font-size: 14px !important;
    gap: 4px !important;
    margin: 0px 1px !important;
}
.btn-yellow:hover { background-color: #E8C164 !important; }

.btn-content-blue {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 27px !important;
    background-color: #EDEDED !important;
    color: #3498DB !important;
    border: 1px solid #DEDEDE !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: normal !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease;
    font-size: 14px !important;
    gap: 4px !important;
    margin: 0px 1px !important;
}
.btn-content-blue:hover { background-color: #C8D6DD !important; }

.btn-content-orange {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 27px !important;
    background-color: #EDEDED !important;
    color: #FA8072 !important;
    border: 1px solid #DEDEDE !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: normal !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease;
    font-size: 14px !important;
    gap: 4px !important;
    margin: 0px 1px !important;
}
.btn-content-orange:hover { background-color: #DDCFC7 !important; }

/* ---- 再接続UI(App.razor #components-reconnect-modal)=Blazor既定表示の置換(260803) ----
   Blazor(UserSpecifiedDisplay)は状態を class でのみ通知するため、表示制御は全てここで行う。
   show=再接続試行中 / failed=試行回数切れ / rejected=サーバーに回路が残っておらず再接続不可。 */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2147483500;
    background: rgba(0,0,0,.35);
    align-items: center; justify-content: center;
}
#components-reconnect-modal .de-reconnect-box {
    background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.35);
    padding: 18px 20px 14px; font-size: 13px; line-height: 1.6; color: #222;
    max-width: 90vw; text-align: center;
}
#components-reconnect-modal .de-reconnect-bar {
    display: flex; justify-content: center; gap: 8px; margin-top: 14px;
}
#components-reconnect-modal .de-reconnect-bar button {
    min-width: 96px; padding: 6px 14px; border-radius: 4px; cursor: pointer;
    font-size: 13px; border: 1px solid #CCC; background: #F5F5F5; color: #333;
}
#components-reconnect-modal .de-reconnect-bar button.de-reconnect-reload {
    border-color: #2E7D32; background: #2E7D32; color: #fff;
}
/* 試行中は経過表示のみ(操作ボタンは出さない)。復旧不能になって初めて手動操作を出す。 */
#components-reconnect-modal .de-reconnect-lost,
#components-reconnect-modal .de-reconnect-gone,
#components-reconnect-modal .de-reconnect-bar { display: none; }
#components-reconnect-modal.components-reconnect-failed .de-reconnect-try,
#components-reconnect-modal.components-reconnect-rejected .de-reconnect-try { display: none; }
#components-reconnect-modal.components-reconnect-failed .de-reconnect-lost { display: block; }
/* [260903-W] rejected は「4時間試行して駄目だった」ではなく **サーバー側が再起動して回路が消えた**
   状態(ウォッチドッグのリサイクル・publish 直後がこれ)。原因が違えば伝えることも違う。 */
#components-reconnect-modal.components-reconnect-rejected .de-reconnect-gone { display: block; }
#components-reconnect-modal.components-reconnect-failed .de-reconnect-bar,
#components-reconnect-modal.components-reconnect-rejected .de-reconnect-bar { display: flex; }

/* ===== 集計センターの結果表(DEDataCenterGrid) =====
   表構造は Blazor が組み、セルの中身だけが実ページ製(gridList_ItemDataBound の成果)。
   セル固有の style/背景色は実ページ由来のインライン指定が来るので、ここでは
   「土台の見た目」だけを与えて上書きを許す(詳細度を上げない)。 */
.de-dcg-wrap { width:100%; overflow:auto; }
/* border-collapse は separate(260809): collapse だと罫線が行境界に属し、sticky ヘッダーで
   セルだけが固定されて罫線が白く抜ける。separate+右下1辺ずつでセル自身に罫線を持たせる
   (左端・上端の外周は first-child / thead 側で補う=二重線にならない)。 */
.de-dcg { border-collapse:separate; border-spacing:0; width:100%; font-size:12.5px; color:#1f2937; background:#fff; }
.de-dcg td, .de-dcg th { border-right:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; padding:4px 8px; vertical-align:middle; white-space:nowrap; }
.de-dcg td:first-child, .de-dcg th:first-child { border-left:1px solid #e2e8f0; }
.de-dcg thead tr:first-child th { border-top:1px solid #e2e8f0; }
.de-dcg tbody:first-child tr:first-child td, .de-dcg tbody:first-child tr:first-child th { border-top:1px solid #e2e8f0; }
.de-dcg th { background:#eef2f7; font-weight:600; color:#374151; }
/* ヘッダー固定は thead ごと sticky(260809)。th 単位の top:0 だと多段見出し(帯行+見出し行)が重なる */
.de-dcg thead { position:sticky; top:0; z-index:2; }
.de-dcg .de-dcg-header th, .de-dcg .de-dcg-header td { background:#eef2f7; font-weight:600; }
.de-dcg .de-dcg-datarow:nth-child(even) td { background:#fbfcfe; }
.de-dcg .de-dcg-footer td { background:#f4f7fb; font-weight:600; }
.de-dcg .de-dcg-pager td { background:#fff; white-space:normal; }
.de-dcg a { color:#1d4ed8; text-decoration:none; }
.de-dcg a:hover { text-decoration:underline; }
/* 選択行(実ページが行へ載せる onclick="…SetRowBackColor(this)" の肩代わり)。
   260820: `!important` が要る。偶数行の縞 `.de-dcg .de-dcg-datarow:nth-child(even) td`(0,3,1)の方が
   詳細度で勝つため、無印だと**偶数行だけ選択色が出ない**(Y40の .de-y40-selrow も同じ理由で !important)。 */
.de-dcg tbody tr.de-row-sel td { background:#eaf3ff !important; }
/* 集計値のドリルダウン: **リンク(値)の文字の上だけ**を当たり判定にする(260820 ユーザー指示)。
   以前は「余白でカーソルが I ビームに戻る」対策で display:block にしてセル全体を当たり判定に
   していたが、それだと**値の無い余白を押しても別タブが開く**。セル余白のクリックは行の選択
   (de-row-sel)に使うので、アンカーは inline に戻す。 */
.de-dcg tbody td > a { display:inline; cursor:pointer; }
.de-dcg-empty { padding:16px; color:#9aa3af; }
/* 見出しの並べ替え(実ページの Sort リンクの置き換え。__doPostBack は Blazor で死んでいる) */
.de-dcg-sort { cursor:pointer; user-select:none; }
.de-dcg-sort:hover { text-decoration:underline; }

/* ===== 検索エリアの共通レイアウト(DESearchPanel。原型=Y40Listの「▼絞込み検索」) =====
   共有コンポーネントのスタイルは各ページの <style> では届かないのでここに置く。 */
.de-sp-bar { flex:0 0 auto; background:#d9dbde; color:#1a56b8; font-weight:bold; padding:3px 10px; cursor:pointer; user-select:none; margin-bottom:4px; }
/* 開閉アニメーション: max-height遷移(0fr↔1frのgrid方式はflex親配下でトラックが0に解決されるため不採用) */
.de-sp-wrap { flex:0 0 auto; overflow:hidden; max-height:0; transition:max-height .3s ease, opacity .3s ease; opacity:0; }
.de-sp-wrap-open { max-height:1200px; opacity:1; }
.de-sp-inner { min-height:0; }
.de-sp-panel { background:#fff; border:1px solid #d5d9e0; padding:8px 10px 10px 10px; margin-bottom:6px;  position:relative; }
/* 注記(凡例・注意書き)。実ページの注記ラベルは長文なので、見出しではなく枠内の1行として置く */
.de-sp-note { color:#6b7280; font-size:11px; line-height:1.5; margin:0 0 6px 0; }
/* 検索テーブル(ラベル右寄せ=strAlign'Right'、非bold。nowrapはコントロールセルのみ=
   ラベルは折返してエリア内に収める。列幅は最大列数から算出(--de-sp-w)し全行で均等配分) */
.de-sp-tbl { width:100%; border-collapse:collapse; table-layout:auto; }
.de-sp-tbl td { padding:2px 3px; }
.de-sp-label { text-align:right; padding-right:4px !important; width:var(--de-sp-w, auto); min-width:5em; overflow-wrap:break-word; color:#333; }
.de-sp-ctrl { text-align:left; white-space:nowrap; }
.de-sp-ctrl input, .de-sp-ctrl select { border:1px solid #ced4da; border-radius:4px; padding:2px 6px; min-width:130px; }
.de-sp-ctrl select { max-width:190px; }
.de-sp-ctrl input[type=date] { width:118px; min-width:0; padding:2px 3px; }
.de-sp-num { min-width:70px !important; width:70px; text-align:right; }
/* @RadioButtonList(検索エリア)。W10フォームの de-fi-radios と同じ見た目。
   .de-sp-ctrl input の min-width:130px/枠線がラジオに効くと巨大な四角になるので打ち消す */
.de-sp-radios { display:inline-flex; flex-wrap:wrap; gap:2px 12px; align-items:center; }
.de-sp-radio { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; cursor:pointer; color:#333; }
.de-sp-radio input[type=radio] { width:13px !important; height:13px; min-width:0 !important; margin:0; padding:0; border:none; border-radius:0; }
/* @CheckBoxList(複数選択)。本物 SpecialToolA:24346-24383 は RepeatDirection.Horizontal 固定なので横並び。
   見た目・寸法はラジオ群(.de-sp-radios)と完全に揃える=同じ検索パネルで種類ごとに高さが変わらないため。 */
.de-sp-checks { display:inline-flex; flex-wrap:wrap; gap:2px 12px; align-items:center; }
.de-sp-check { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; cursor:pointer; color:#333; }
.de-sp-check input[type=checkbox] { width:13px !important; height:13px; min-width:0 !important; margin:0; padding:0; border:none; border-radius:0; }
.de-sp-tilde { color:#666; }
/* 年月(@DECalendar_Month)。元ZeroCoderの見た目に合わせて素のテキスト+右の 📅 ボタン。
   幅は yyyy/MM がちょうど収まる分だけ(既定の min-width:130px だと 2つ並べたとき折り返す)。 */
.de-sp-month { min-width:0 !important; width:86px; }
/* Click 指定(手入力不可)の欄は W10フォームと同じ見た目=白地+黒文字+右12pxの水色バー。
   本物は border salmon(GenneralTool.SetCalendarPickerOndblclick:13683-13694)だが、
   赤が浮くため水色に統一する判断は W10 側(260813)と同じ。 */
.de-sp-ctrl input.de-sp-clickonly { cursor:pointer; background-color:#fff; color:#000; border-right:12px solid #87ceeb; }
.de-sp-calbtn { border:1px solid #ced4da; background:#f3f5f8; border-radius:4px; padding:1px 4px; cursor:pointer; margin-left:2px; line-height:1; }
.de-sp-calbtn:disabled { opacity:.5; cursor:default; }
/* 年月の小窓。検索エリア(.de-sp-wrap)は畳むために overflow:hidden なので、
   パネル基準の absolute では下へ出た小窓が切れる。W10フォームのピッカーと同じ fixed + クリック座標。 */
.de-sp-calbd { position:fixed; inset:0; z-index:3100; }
.de-sp-calpop { position:fixed; z-index:3101; background:#fff; border:1px solid #98a5b8; border-radius:6px;
                box-shadow:0 6px 20px rgba(0,0,0,.25); padding:8px; font-size:12px; }
.de-sp-calhead { display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:600; color:#345; padding:0 2px 6px; }
.de-sp-calhead button { border:1px solid #ced4da; background:#fff; border-radius:4px; padding:0 6px; cursor:pointer; }
.de-sp-calmonths { display:grid; grid-template-columns:repeat(6, 1fr); gap:4px; }
.de-sp-calmonths button { border:1px solid #ced4da; background:#fff; border-radius:4px; padding:3px 6px; cursor:pointer; white-space:nowrap; }
.de-sp-calmonths button.sel { background:#4a6785; border-color:#4a6785; color:#fff; }
.de-sp-calfoot { display:flex; justify-content:flex-end; gap:6px; padding-top:8px; }
.de-sp-calfoot button { border:1px solid #ced4da; background:#fff; border-radius:4px; padding:2px 8px; cursor:pointer; }
.de-sp-btns { display:flex; justify-content:center; gap:10px; margin-top:4px; }
.de-sp-go { background:#2f8be6; color:#fff; border:none; border-radius:4px; padding:5px 22px; cursor:pointer; font-weight:bold; }
.de-sp-clear { background:#e9ecef; color:#4a6ea9; border:none; border-radius:4px; padding:5px 16px; cursor:pointer; font-weight:bold; }
.de-sp-refbtn { border:1px solid #ced4da; background:#fff; border-radius:4px; padding:1px 5px; cursor:pointer; margin-left:2px; }

/* ---- [260825] W10「自動設定」の吹き出し -------------------------------------
   画面を開いた時点でシステムが入れた項目に出す小さな札。
   出す条件は W10Form 側(data-deauto に文言が入っているときだけ)。
   ★属性が無い項目には position すら当てない = 既存レイアウトへの影響を作らない。 */
.de-fi[data-deauto] { position: relative; }
.de-fi[data-deauto]::before {
  content: attr(data-deauto);
  position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  padding: 1px 7px;
  font-size: 10px; line-height: 1.4; font-weight: 700; white-space: nowrap;
  color: #185FA5; background: #E8F2FD; border: 1px solid #A3BFDB; border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  pointer-events: none;   /* 入力の邪魔をしない */
}
/* 吹き出しの尻尾(下向きの小さな三角) */
.de-fi[data-deauto]::after {
  content: "";
  position: absolute;
  top: 3px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  border: 4px solid transparent; border-top-color: #A3BFDB;
  pointer-events: none;
}

/* [260909] CSVをその場で読み込む欄(定義の項目名 `CsvPick:<列名>`。W10Form.razor case "static")。
   ファイルはサーバへ送らず、ブラウザで文字にして下の欄へ入れる = 添付フォルダには残らない。 */
.de-csvpick {
    background: #F4F7FA;
    border: 1px solid #D5DEE8;
    border-radius: 6px;
    padding: 10px 12px;
    line-height: 1.9;
    font-size: 13px;
}
.de-csvpick input[type=file] { margin-left: 8px; font-size: 13px; }
.de-csvpick-note { color: #55606B; }
/* 読み込んだ結果(件数・失敗理由)。色は deCsvToField が当てる(緑=成功 / 赤=失敗) */
.de-csvpick-msg { font-weight: bold; }

/* [260909] グリッドの表は箱の幅いっぱいにする(W10Grid.razor の <table class="de-grid-table">)。
   これが無いと、行が少ないグリッドは表が中身なりに縮み、箱の右側だけ白く空く
   (受注W10 の出荷タブ=0件のときに実測)。列幅は定義の % 指定(合計100%)なので、
   広がった分は各列へ按分される。 */
.de-grid-table { width: 100%; }