/*
  PmsEnterprise.UI 共通スタイル（配信先 _content/PmsEnterprise.UI/css/pms-ui.css）
  ・各ホスト（Web・AdminPortal・Database）の App.razor が @Assets["_content/PmsEnterprise.UI/css/pms-ui.css"] で読み込む
    （MudBlazor.min.css の後、ホストの app.css の前）。Storybook は iframe.html が同じ経路で読む
  ・字号は rem、px は図形・罫線・影のみ（CLAUDE.md「字号と単位」）
  ・配色は MudBlazor のパレット変数（--mud-palette-*）を正とし、--pms-* は Mud に無いものだけに使う
*/

/* ================= フォント（多言語） =================
   ・MudTheme の Typography.Default.FontFamily は var(--pms-font-family) の 1 つだけ（PmsFonts.cs）。実際の列はここで決める
   ・欧文は Roboto（MudBlazor 既定の見た目を維持）→ Noto Sans、CJK は Noto Sans JP／SC／TC／KR、他に Noto Sans Arabic
   ・漢字は言語で字形が違うため、<html lang>（LanguagePreference の Cookie → App.razor）に応じて CJK の先頭を入れ替える。
     既定（ja・en・未指定）は日本語字形。Web フォントは各ホストの App.razor（PmsFonts.GoogleFontsUrl）が読み込む
   ・Web フォントが届かない環境向けに OS の日本語フォント（Yu Gothic UI・Meiryo）を末尾に置く */
:root {
    --pms-font-latin: "Roboto", "Noto Sans";
    --pms-font-cjk: "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", "Noto Sans KR";
    --pms-font-other: "Noto Sans Arabic", "Yu Gothic UI", "Meiryo", "Helvetica", "Arial", sans-serif;
    --pms-font-family: var(--pms-font-latin), var(--pms-font-cjk), var(--pms-font-other);
}

html[lang="zh-Hans"] {
    --pms-font-cjk: "Noto Sans SC", "Noto Sans JP", "Noto Sans TC", "Noto Sans KR";
}

html[lang="zh-Hant"] {
    --pms-font-cjk: "Noto Sans TC", "Noto Sans JP", "Noto Sans SC", "Noto Sans KR";
}

html[lang="ko"] {
    --pms-font-cjk: "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC";
}

/* 言語メニューの国旗（LanguageInfo.Flag）
   ・Windows の Segoe UI Emoji は国旗を描けない（「JP」等の 2 文字になる）ため、Noto Color Emoji（PmsFonts.GoogleFontsUrl）を当てる
   ・Noto Color Emoji は数字・# も収録しているので、本文のフォント列には混ぜずこのクラスだけで使う */
.pms-flag {
    font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 1.125em;
    line-height: 1;
    margin-inline-end: 0.5em;
}

/* ================= AppBar（毛玻璃：半透明＋背景ぼかし） =================
   ・配色はテーマの AppbarBackground（rgba の半透明）／AppbarText。ぼかし・縁取り・艶だけをここで足す
   ・backdrop-filter 非対応の環境は --pms-appbar-fallback（ホストの app.css で定義）で不透明に落とす
   ・装飾は AppBar に限る（DESIGN 3.4。業務の入力・一覧・ダイアログは不透明のまま） */
.mud-appbar.pms-appbar {
    background-color: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-appbar-text) 16%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 32px -16px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
}

/* 艶：左上から薄い光を乗せる（文字の上には出さない：toolbar を上の層にする） */
.mud-appbar.pms-appbar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.10) 100%);
}

.mud-appbar.pms-appbar > .mud-toolbar {
    position: relative;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mud-appbar.pms-appbar {
        background-color: var(--pms-appbar-fallback, var(--mud-palette-surface));
    }
}

.pms-appbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.25rem;
    min-width: 0;
}

.pms-appbar-icon {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.pms-appbar-title {
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* 用途バッジ（社内管理／運用ツール 等）：ガラス風の小さな丸ピル */
.pms-appbar-badge {
    font-size: 0.6875rem;
    line-height: 1;
    padding: 0.3rem 0.6rem;
    margin-left: 0.25rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    background: color-mix(in srgb, currentColor 12%, transparent);
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* ================= 編集パネル（PmsEditPanel：中央ダイアログ／右側抽屉） =================
   業務の入力面は不透明（毛玻璃にしない）。見出し・本文・操作列を縦に並べ、本文だけがスクロールする */
.pms-edit-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.pms-edit-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.pms-edit-panel > .pms-edit-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pms-edit-header-text {
    min-width: 0;
}

.pms-edit-header-title {
    font-weight: 600;
    line-height: 1.3;
}

.pms-edit-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.pms-edit-panel > .pms-edit-body {
    padding: 1rem;
}

.pms-edit-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

/* 操作列のボタン（削除・取消・保存・Actions の追加分）は最小幅を揃える。文言が長い言語では自然に広がる。rem なので拡大率に追従する */
.pms-edit-actions > .mud-button-root {
    min-width: 7rem;
}

/* 一覧の見出し（PmsSortLabel）：押すと並べ替え。Shift＋クリックの文字選択を抑止する */
.pms-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    cursor: pointer;
    user-select: none;
    border-radius: 2px;
}

.pms-sort-label:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.pms-sort-label .pms-sort-icon {
    opacity: 0;
    transition: opacity 0.15s;
}

.pms-sort-label:hover .pms-sort-icon {
    opacity: 0.5;
}

.pms-sort-label.active .pms-sort-icon {
    opacity: 1;
}

/* 一覧の表示列の設定（PmsColumnChooser）：浮き窓のチェック一覧。ドラッグ中の行は半透明 */
.pms-column-chooser {
    display: inline-flex;
}

.pms-column-chooser-popover {
    min-width: 20rem;
    max-width: 26rem;
}

/* 出力の列幅（権数）の入力：小さく右寄せ。右隣は「残りの幅を埋める列」の ⇔ ボタン */
.pms-column-chooser-width {
    width: 3.5rem;
    flex: 0 0 auto;
    margin: 0;
}

.pms-column-chooser-width input {
    text-align: right;
    font-size: 0.8125rem;
}

.pms-column-chooser-head {
    padding: 0.75rem 1rem 0.25rem;
    display: flex;
    flex-direction: column;
}

.pms-column-chooser-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.25rem 0.5rem;
}

.pms-column-chooser-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.25rem;
    border-radius: 4px;
    cursor: grab;
}

.pms-column-chooser-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.pms-column-chooser-item.pms-fixed {
    cursor: default;
}

.pms-column-chooser-handle {
    color: var(--mud-palette-text-secondary);
}

.pms-column-chooser-item .mud-input-control {
    margin: 0;
}

.pms-column-chooser-list .mud-drop-item-dragging {
    opacity: 0.5;
}

.pms-column-chooser-foot {
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem 0.5rem 0.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ---- 一覧の出力（PmsExportMenu）：浮き窓で形式・用紙・向きを選ぶ ---- */
.pms-export-menu {
    display: inline-flex;
}

.pms-export-menu-popover {
    min-width: 16rem;
    max-width: 22rem;
}

.pms-export-menu-head {
    padding: 0.75rem 1rem 0.25rem;
    display: flex;
    flex-direction: column;
}

.pms-export-menu-body {
    padding: 0.25rem 1rem 0.5rem;
    display: flex;
    flex-direction: column;
}

.pms-export-menu-label {
    color: var(--mud-palette-text-secondary);
    margin-top: 0.5rem;
}

.pms-export-menu-body .mud-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
}

.pms-export-menu-foot {
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem 0.5rem 0.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* 端末宿主の中でだけ出る印刷の区画（出力の下に区切り線で続ける） */
.pms-export-menu-print {
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 0.25rem;
}

.pms-sort-order {
    font-size: 0.6875rem;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
}

.pms-edit-panel > .pms-edit-actions {
    padding: 0.5rem 1rem 0.75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* 抽屉：中身を縦いっぱいに。狭い画面では全幅 */
.pms-edit-drawer .mud-drawer-content {
    height: 100%;
}

@media (max-width: 600px) {
    .mud-drawer.pms-edit-drawer {
        width: 100vw;
    }
}

/* ダイアログ：見出しの余白を詰め、本文は内容に応じてスクロール */
.pms-edit-dialog .mud-dialog-title {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pms-edit-dialog .mud-dialog-content {
    padding: 1rem;
}

.pms-edit-dialog .mud-dialog-actions {
    padding: 0.5rem 1rem 0.75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ================= 高密度フォーム（下線スタイルの入力を詰めて並べる） =================
   入力部品は Variant.Text（下線のアニメーション）＋ Margin.Dense が既定。縦の余白だけをここで詰める */
.pms-form .mud-input-control {
    margin-top: 0.25rem;
}

/* 見出し（label）は 1rem のまま（MudBlazor の既定。浮き上がり時に 0.75 倍されるため、ここで小さくすると読めない）。
   入力の値は MudBlazor が body1（1rem）で描く。高密度は余白で出し、字号は落とさない */

/* ================= 氏名＋カナ（PmsNameKanaField） =================
   Row：氏名 3 : カナ 2 の横並び（狭ければ折り返す）。Stack：縦並び */
.pms-name-kana {
    display: flex;
    gap: 0 1rem;
}

.pms-name-kana-row {
    flex-wrap: wrap;
}

.pms-name-kana-row > .pms-name-kana-name {
    flex: 3 1 12rem;
    min-width: 0;
}

.pms-name-kana-row > .pms-name-kana-kana {
    flex: 2 1 9rem;
    min-width: 0;
}

.pms-name-kana-stack {
    flex-direction: column;
}

/* ================= 一覧（.pms-list）の操作列 =================
   左端の固定列（編集・削除のアイコン）。横スクロールしても残す（sticky）。縞模様・ホバーの背景は行から継承する */
.pms-list .pms-ops-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
    white-space: nowrap;
    width: 1%;
    padding-right: 0.5rem;
}

.pms-list .pms-ops {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

/* 編集パネルの見出しの状態の印（閲覧／編集／新規／登録／削除）：題名（h6）と並べても読める大きさにする */
.pms-edit-header .pms-edit-state {
    font-size: 1rem;
    font-weight: 600;
    height: 2rem;
    letter-spacing: 0.05em;
}

.pms-edit-header .pms-edit-state .mud-chip-content {
    padding: 0 0.75rem;
}

.pms-form .mud-input-control-helper-container {
    min-height: 0;
}

.pms-form .mud-switch,
.pms-form .mud-checkbox {
    margin-top: 0.5rem;
}

/* 補足（data-pms-hint → label の title）：MudBlazor は見出しを pointer-events: none にしているため、
   鼠标を載せても吹き出しが出ない。title を持つ見出しだけ受け付けるようにし、点線の下線で「説明あり」を示す */
.pms-form .mud-input-label[title] {
    pointer-events: auto;
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
}

/* ================= コード入力（PmsCodeField：左にコード、右に名称） =================
   名称欄はコード欄と同じ Variant の読み取り専用。コード欄の幅は部品の CodeWidth、名称欄が残りを取る */
.pms-code-field {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.pms-code-field .pms-code-input {
    flex: 0 0 auto;
    min-width: 0;
    position: relative;
}

/* 誤り文言が出ている間だけ、その行の下に文言の分だけ余白を取る（次の行の見出しと重ならない。横幅は変えない） */
.pms-code-field:has(.mud-input-helper-text) {
    padding-bottom: 1.25rem;
}

/* 誤り文言（該当するコードがありません 等）は流れの外に出す：コード欄の幅も右隣の名称欄も動かさず、文言だけ右へ伸びる */
.pms-code-field .pms-code-input .mud-input-control-helper-container {
    position: absolute;
    left: 0;
    top: 100%;
    width: max-content;
    max-width: 24rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* 見出し（ShrinkLabel で常に上に小さく出す）はコード欄より長くてよい：名称欄の上の空きへはみ出させる */
.pms-code-field .pms-code-input .mud-input-label {
    max-width: none;
    overflow: visible;
    white-space: nowrap;
}

.pms-code-field .pms-code-name {
    flex: 1 1 auto;
    min-width: 0;
}

/* 名称欄も同じ見出し領域を確保し、文字だけを非表示にして入力位置を揃える */
.pms-code-field .pms-code-name .mud-input-label {
    visibility: hidden;
}

.pms-code-field .pms-code-name .mud-input {
    background-color: var(--mud-palette-action-default-hover);
}

.pms-code-field .pms-code-name .mud-input-slot {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* コード・名称の小一覧（PmsCodeListDialog）：↑↓で選ぶ行を強調 */
.pms-code-list tbody tr {
    cursor: pointer;
}

.pms-code-list tbody tr.selected {
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
    font-weight: 600;
}

/* ================= 多タブ作業領域（PmsWorkspace） =================
   タブ列は本文の上（AppBar の下）。開いている画面は hidden で残し、切替は表示の切替だけ */
.pms-workspace {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    /* AppBar（MudMainContent の pt-16 ＝ AppBar の高さ）と密着しないよう、タブ列の上に余白を取る */
    padding-top: 0.75rem;
}

.pms-workspace-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    /* 横だけスクロール（overflow-x: auto だけだと縦も auto になり、字号を大きくした時に縦スクロールバーが出る） */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    margin: 0 0 1rem;
    padding: 0 0.25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    line-height: 1.25;
}

.pms-workspace-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 14rem;
    padding: 0.375rem 0.375rem 0.375rem 0.75rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.pms-workspace-tab:hover {
    background: var(--mud-palette-action-default-hover);
}

.pms-workspace-tab:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.pms-workspace-tab.active {
    border-color: var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font-weight: 600;
    /* 下の罫線を背景色で隠す（負のマージンで溢れさせない） */
    box-shadow: 0 1px 0 var(--mud-palette-surface);
}

.pms-workspace-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pms-workspace-tab-close .mud-icon-button {
    padding: 2px;
}

.pms-workspace-panel {
    flex: 1 1 auto;
}