/* ============================================================
   Develos UI 共通基盤
   ------------------------------------------------------------
   ・色/余白/角丸はここのトークン（--dv-*）と Radzen テーマ変数（--rz-*）だけを使う。
     画面側で #hex / px を直書きしない。
   ・--rz-base-* は radzen-override.css で「青系」に上書きされているため、
     グレー（中立色）が必要な場合は --dv-* を使うこと。
   ・アイコン方針:
       操作・UI     → Material（RadzenButton Icon / RadzenIcon）
       エンティティ → FontAwesome（ユーザーが選ぶ EntityIcon のみ）
       種別アイコン → 既存 PNG（ProjectUIUtility.GetMenuIconImage）
   ・画面固有のスタイルは各画面の .razor.css（scoped）に書き、
     グローバルな <style> タグは使わない。
   ============================================================ */

:root {
    /* 面・線 */
    --dv-bg: var(--rz-white);
    --dv-surface: #ffffff;
    --dv-surface-muted: #f7f8fa;
    --dv-hover: #f1f3f7;
    --dv-border: #e3e5ea;
    --dv-border-strong: #cfd3db;

    /* 文字（白背景でのコントラスト比: text 15.6:1 / sub 5.9:1 / faint 3.4:1） */
    --dv-text: #1f2430;
    --dv-text-sub: #5f6673;
    --dv-text-faint: #8a919d;

    /* アクセント */
    --dv-primary: var(--rz-primary);
    --dv-primary-soft: var(--rz-primary-lighter);
    --dv-focus: var(--rz-primary);

    /* 角丸・影 */
    --dv-radius: 10px;
    --dv-radius-sm: 6px;
    --dv-radius-pill: 999px;
    --dv-shadow: 0 1px 2px rgba(16, 24, 40, .06);

    /* 余白 */
    --dv-space-1: .25rem;
    --dv-space-2: .5rem;
    --dv-space-3: .75rem;
    --dv-space-4: 1rem;
    --dv-space-5: 1.25rem;
    --dv-space-6: 1.5rem;

    /* 文字サイズ */
    --dv-fs-xs: .75rem;
    --dv-fs-sm: .8125rem;
    --dv-fs-md: .875rem;
    --dv-fs-lg: 1rem;
    --dv-fs-title: 1.375rem;

    /* 本文・等幅 */
    --dv-font-sans: var(--rz-text-font-family);
    --dv-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

/* ---------- ページ ---------- */

.dv-page {
    display: flex;
    flex-direction: column;
    gap: var(--dv-space-4);
    min-width: 0;
    color: var(--dv-text);
}

/* 親（ダイアログの .rz-dialog-content など）の高さいっぱいに広げる。中の flex: 1 の要素が残りの高さを埋める */
.dv-page.is-fill {
    height: 100%;
    min-height: 0;
}

.dv-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--dv-space-3);
}

.dv-page-heading {
    display: flex;
    align-items: center;
    gap: var(--dv-space-3);
    min-width: 0;
}

.dv-page-title {
    margin: 0;
    font-size: var(--dv-fs-title);
    font-weight: 700;
    line-height: 1.3;
    color: var(--dv-text);
}

.dv-page-subtitle {
    margin: 2px 0 0;
    font-size: var(--dv-fs-sm);
    color: var(--dv-text-sub);
}

.dv-page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dv-space-2);
}

/* ---------- パネル ---------- */

.dv-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
    box-shadow: var(--dv-shadow);
    overflow: hidden;
}

.dv-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dv-space-3);
    min-height: 48px;
    padding: var(--dv-space-2) var(--dv-space-4) var(--dv-space-2) var(--dv-space-5);
    border-bottom: 1px solid var(--dv-border);
}

.dv-panel-title {
    display: flex;
    align-items: center;
    gap: var(--dv-space-2);
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--dv-text);
}

.dv-panel-body {
    padding: var(--dv-space-5);
    min-width: 0;
}

.dv-panel-body.is-flush {
    padding: 0;
}

/* 2カラムの本体（狭い画面では1カラム） */
.dv-split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
    gap: var(--dv-space-4);
    align-items: start;
}

@media (max-width: 1100px) {
    .dv-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- フォーム ---------- */

.dv-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dv-space-4) var(--dv-space-5);
}

.dv-form-grid.is-3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dv-form-grid.is-1col {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 720px) {
    .dv-form-grid,
    .dv-form-grid.is-3col {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dv-span-2 {
    grid-column: span 2;
}

.dv-span-all {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {
    .dv-span-2 {
        grid-column: 1 / -1;
    }
}

.dv-field {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.dv-field > .rz-textbox,
.dv-field > .rz-textarea,
.dv-field > .rz-dropdown,
.dv-field > .rz-numeric,
.dv-field > .rz-datepicker,
.dv-field > .rz-autocomplete {
    width: 100%;
}

.dv-label {
    font-size: var(--dv-fs-sm);
    font-weight: 600;
    color: var(--dv-text-sub);
}

.dv-required {
    margin-left: 2px;
    color: var(--rz-danger);
}

.dv-hint {
    font-size: var(--dv-fs-xs);
    color: var(--dv-text-sub);
}

.dv-field .validation-message {
    font-size: var(--dv-fs-xs);
}

.dv-check {
    display: inline-flex;
    align-items: center;
    gap: var(--dv-space-2);
    font-size: var(--dv-fs-md);
}

/* 説明ボックス（読み取り専用の案内文） */
.dv-note {
    padding: var(--dv-space-3) var(--dv-space-4);
    border-radius: var(--dv-radius-sm);
    background: var(--rz-info-lighter);
    color: var(--rz-info-darker);
    font-size: var(--dv-fs-sm);
    white-space: pre-line;
}

/* ---------- フッター（保存・削除） ---------- */

/*
    sticky の bottom はスクロールコンテナの padding の内側が基準になるため、bottom: 0 だと
    padding 分の隙間ができ、そこからスクロール中の内容が透けて見える。
    --dv-footer-gap にスクロールコンテナの下 padding を入れ、その分だけ下へ伸ばして隙間を埋める。
    （帯の下端は bottom で決まるので、内側の padding は上下対称の最小限にしている）
    （画面: .rz-body / ダイアログ: .rz-dialog-content）
*/
.dv-footer {
    --dv-footer-gap: 0px;
    position: sticky;
    bottom: calc(-1 * var(--dv-footer-gap));
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dv-space-3);
    margin-top: auto;
    margin-bottom: calc(-1 * var(--dv-footer-gap));
    padding: var(--dv-space-2) 0;
    border-top: 1px solid var(--dv-border);
    background: var(--dv-bg);
}

.rz-body .dv-footer {
    --dv-footer-gap: var(--rz-layout-body-padding);
}

.rz-dialog-content .dv-footer {
    --dv-footer-gap: var(--rz-dialog-content-padding);
}

.dv-footer-start,
.dv-footer-end {
    display: flex;
    align-items: center;
    gap: var(--dv-space-2);
}

/* ---------- 検索パネル ---------- */

.dv-search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--dv-space-3) var(--dv-space-4);
    padding: var(--dv-space-4) var(--dv-space-5);
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
}

.dv-search-keyword {
    flex: 1 1 260px;
    max-width: 420px;
}

.dv-search-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dv-space-3);
    flex: 1 1 auto;
}

.dv-search-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dv-space-2);
    margin-left: auto;
}

/* ---------- 一覧カード ---------- */

.dv-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: var(--dv-space-3);
}

/* RadzenDataList の WrapItems と併用する場合の各アイテム */
.dv-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
    box-shadow: var(--dv-shadow);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.dv-card:hover {
    border-color: var(--dv-border-strong);
}

/* 選択中のカード（一覧で複数選択して操作する場合） */
.dv-card.is-selected {
    border-color: var(--dv-primary);
    box-shadow: 0 0 0 1px var(--dv-primary);
}

/* ---------- 一覧の選択状態バー（DvSelectionBar） ---------- */

.dv-selection-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dv-space-2);
}

.dv-selection-bar-start,
.dv-selection-bar-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dv-space-2);
}

.dv-selection-count {
    color: var(--dv-text-sub);
    font-size: var(--dv-fs-sm);
}

.dv-selection-count.is-active {
    color: var(--dv-primary);
    font-weight: 600;
}

.dv-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dv-space-2);
    padding: var(--dv-space-2) var(--dv-space-3);
    border-bottom: 1px solid var(--dv-border);
}

.dv-card-body {
    padding: var(--dv-space-3);
    min-width: 0;
}

.dv-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--dv-space-2);
    padding: var(--dv-space-2) var(--dv-space-3);
    border-top: 1px solid var(--dv-border);
    background: var(--dv-surface-muted);
}

.dv-card-title {
    margin: 0;
    font-size: var(--dv-fs-lg);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-card-eyebrow {
    font-size: var(--dv-fs-xs);
    font-weight: 600;
    color: var(--dv-text-sub);
}

/* ---------- RadzenDataList をカードのグリッドにする ----------
   <div class="dv-datalist"> で RadzenDataList を囲んで使う。
   Radzen 11 は WrapItems="true" のとき <div class="rz-g"><div>…</div></div>（各項目 flex:auto）、
   false のとき <ul class="rz-datalist-data"><li>…</li></ul> を出力するため、両方を対象にする。
   列の最小幅は --dv-card-min で変更できる（例: style="--dv-card-min: 280px;"）。
   1列で並べる場合は is-rows を付ける。 */

.dv-datalist {
    --dv-card-min: 340px;
    --dv-card-gap: var(--dv-space-4);
    min-width: 0;
}

.dv-datalist .rz-datalist {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.dv-datalist .rz-g,
.dv-datalist .rz-datalist-data {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--dv-card-min)), 1fr));
    gap: var(--dv-card-gap);
    margin: 0;
    padding: 0 0 var(--dv-space-2);
    list-style: none;
}

.dv-datalist.is-rows .rz-g,
.dv-datalist.is-rows .rz-datalist-data {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dv-space-3);
}

.dv-datalist .rz-g > div,
.dv-datalist .rz-datalist-data > li {
    display: flex;
    flex-direction: column;
    flex: none;
    min-width: 0;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* カードの高さを行内で揃える */
.dv-datalist .rz-g > div > .dv-card,
.dv-datalist .rz-datalist-data > li > .dv-card {
    flex: 1 1 auto;
}

/* ページャーとカードの間を空ける */
.dv-datalist .rz-pager {
    margin-top: var(--dv-space-2);
    padding-inline: 0;
    background: transparent;
}

/* ---------- 空状態 ---------- */

.dv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dv-space-2);
    padding: var(--dv-space-6) var(--dv-space-4);
    color: var(--dv-text-sub);
    font-size: var(--dv-fs-md);
    text-align: center;
}

.dv-empty .rzi {
    font-size: 2rem;
    color: var(--dv-text-faint);
}

/* ---------- チップ・バッジ ---------- */

.dv-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--dv-radius-pill);
    font-size: var(--dv-fs-xs);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    background: var(--dv-hover);
    color: var(--dv-text-sub);
    border: 1px solid transparent;
}

.dv-chip.is-primary { background: var(--rz-primary-lighter); color: var(--rz-primary-dark); }
.dv-chip.is-success { background: var(--rz-success-lighter); color: var(--rz-success-darker); }
.dv-chip.is-warning { background: var(--rz-warning-lighter); color: var(--rz-warning-darker); }
.dv-chip.is-danger  { background: var(--rz-danger-lighter);  color: var(--rz-danger-darker); }
.dv-chip.is-info    { background: var(--rz-info-lighter);    color: var(--rz-info-darker); }
.dv-chip.is-outline { background: transparent; border-color: var(--dv-border-strong); }

.dv-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-hover);
    border: 1px solid var(--dv-border);
    color: var(--dv-text-sub);
    font-size: var(--dv-fs-xs);
    font-weight: 600;
}

.dv-code {
    font-family: var(--dv-font-mono);
    font-size: var(--dv-fs-sm);
    padding: 0 6px;
    border-radius: var(--dv-radius-sm);
    background: var(--dv-surface-muted);
    border: 1px solid var(--dv-border);
    color: var(--dv-text-sub);
}

.dv-muted {
    color: var(--dv-text-sub);
}

.dv-placeholder {
    color: var(--dv-text-faint);
    font-weight: 400;
}

/* ---------- 一括編集グリッドの行状態（色＋左線＋チップで表す） ---------- */

.dv-row-new > td {
    background: color-mix(in srgb, var(--rz-warning-lighter) 70%, transparent) !important;
}

.dv-row-new > td:first-child {
    box-shadow: inset 3px 0 0 var(--rz-warning);
}

.dv-row-update > td {
    background: color-mix(in srgb, var(--rz-info-lighter) 80%, transparent) !important;
}

.dv-row-update > td:first-child {
    box-shadow: inset 3px 0 0 var(--rz-info);
}

.dv-row-delete > td {
    background: color-mix(in srgb, var(--rz-danger-lighter) 70%, transparent) !important;
    color: var(--dv-text-faint);
    text-decoration: line-through;
    text-decoration-color: var(--rz-danger);
}

.dv-row-delete > td:first-child {
    box-shadow: inset 3px 0 0 var(--rz-danger);
}

.dv-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dv-space-3);
    font-size: var(--dv-fs-xs);
    color: var(--dv-text-sub);
}

/* ---------- ProjectTextEditor のエンティティ補完（wwwroot/js/project-texteditor.js が body 直下に生成する） ----------
   以前はコンポーネント内の <style> で .autocomplete / .selected / .loading などの汎用クラス名を定義しており、
   全画面に影響していたため、pte- 接頭辞を付けてここへ移した。 */

.pte-autocomplete {
    position: absolute;
    z-index: 10000;
    display: none;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--dv-space-1) 0;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border-strong);
    border-radius: var(--dv-radius-sm);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
    font-size: var(--dv-fs-md);
}

.pte-item {
    padding: var(--dv-space-1) var(--dv-space-3);
    cursor: pointer;
}

.pte-item:hover,
.pte-item.pte-selected {
    background: var(--dv-hover);
}

.pte-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--dv-text-sub);
    cursor: default;
    pointer-events: none;
}

.pte-loading-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--dv-border);
    border-top-color: var(--dv-text-sub);
    border-radius: 50%;
    animation: pte-spin .6s linear infinite;
}

@keyframes pte-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- アクセシビリティ ---------- */

.dv-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* クリック可能なカード・行をボタン化したときの見た目リセット */
.dv-clickable {
    display: flex;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dv-clickable:focus-visible,
.dv-card:focus-visible {
    outline: 2px solid var(--dv-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .dv-card,
    .dv-clickable {
        transition: none;
    }
}