/* ==========================================================================
   模型评测模块 · DevExpress 组件皮肤层
   以 .evaluation-page（页面级包装 div）为作用域，把 dxbl 组件统一到平台
   设计语言：颜色/圆角/字号全部引用 app.css 的 CSS 变量，暗色主题自动跟随。

   皮肤策略（两层）：
   1. 变量覆盖：DevExpress office-white 主题把主色 #fe7109 映射进了几百个
      --bs-* / --dxbl-* 变量（按钮、复选框、页签、焦点框、进度条、图表系列）。
      在 .evaluation-page 上重定义这些变量即可整体换色，无特异性问题。
      下拉面板渲染在 body 下的 .dxbl-popup-portal（页面作用域管不到），
      单独在 portal 上重定义同一组变量。
   2. 类规则：变量覆盖不了的结构性样式（字号、内边距、网格表头、页签
      下划线）用类选择器；DevExpress 主题选择器特异性极高，关键处用
      !important 兜底。
   ========================================================================== */

.evaluation-page {
    min-width: 0;
    max-width: 100%;
    --ev-radius: 8px;
    --ev-radius-sm: 6px;
    --ev-font: .82rem;
    --ev-font-sm: .76rem;
    --ev-font-xs: .7rem;

    /* ---- 主色变量覆盖（杀掉 #fe7109 橙色 accent） ---- */
    --bs-primary: var(--primary);
    --bs-primary-rgb: 40, 116, 90;
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-focus-shadow-rgb: 40, 116, 90;
    --bs-dropdown-link-active-bg: var(--primary);
    --bs-progress-bar-bg: var(--primary);
    --bs-nav-pills-link-active-bg: var(--primary);

    --dxbl-btn-bg: var(--primary);
    --dxbl-btn-border-color: var(--primary);
    --dxbl-btn-color: #fff;
    --dxbl-btn-hover-color: var(--primary);
    --dxbl-btn-link-hover-color: var(--primary);
    --dxbl-btn-focus-shadow-color: rgba(48, 135, 101, .12);
    --dxbl-btn-focus-outline-color: var(--primary);

    --dxbl-tabs-tab-selected-color: var(--primary);
    --dxbl-text-edit-focus-shadow-color: rgba(48, 135, 101, .12);
    --dxbl-edit-dropdown-btn-focus-outline-color: var(--primary);
    --dxbl-checkbox-check-element-checked-bg: var(--primary);
    --dxbl-checkbox-switch-checked-bg: var(--primary);
    --dxbl-checkbox-radio-checked-border-color: var(--primary);
    --dxbl-checkbox-radio-check-bg: var(--primary);
    --dxbl-checkbox-checked-focus-shadow-color: rgba(48, 135, 101, .12);
    --dxbl-progress-bar-indicator-color: var(--primary);
    --dxbl-grid-focus-frame-color: var(--primary);
    --dxbl-list-box-focus-frame-color: var(--primary);
    --dxbl-pager-active-page-btn-bg: var(--primary);
    --dxbl-pager-page-btn-hover-bg: var(--primary-soft);
    --dxbl-loading-panel-message-color: var(--primary);
    --dxbl-client-component-palette-primary: var(--primary);

    /* ---- 网格配色对齐平台 ----
       注意：主题把 --dxbl-grid-* 定义在 .dxbl-grid 元素本身（见下方补充定义），
       祖先级定义会被元素级覆盖，两处都要写。 */
    --dxbl-listbox-item-selected-bg: var(--primary-soft);
    --dxbl-list-box-item-selected-color: var(--primary);
}

/* 主题在 .dxbl-grid 元素上定义这组变量，必须在同一层级覆盖。 */
.evaluation-page .dxbl-grid {
    --dxbl-grid-bg: var(--surface);
    --dxbl-grid-border: var(--line);
    --dxbl-grid-header-bg: var(--surface-muted);
    --dxbl-grid-row-bg: var(--surface);
    --dxbl-grid-row-border-color: var(--line-soft);
    --dxbl-grid-hover-bg: var(--surface-hover);
}

/* 下拉弹层渲染在 body 下的 portal：单独覆盖同一组 accent 变量。 */
.dxbl-popup-portal {
    --bs-primary: var(--primary);
    --bs-primary-rgb: 40, 116, 90;
    --bs-dropdown-link-active-bg: var(--primary);
    --dxbl-list-box-focus-frame-color: var(--primary);
    --dxbl-listbox-item-selected-bg: var(--primary-soft);
    --dxbl-list-box-item-selected-color: var(--primary);
    --dxbl-btn-focus-outline-color: var(--primary);
}

/* ---------- 按钮 ---------- */
.evaluation-page .dxbl-btn:not(.dxbl-spin-btn-inc):not(.dxbl-spin-btn-dec) {
    min-height: 38px;
    padding: 7px 14px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--ev-radius-sm);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.evaluation-page .dxbl-btn.dxbl-btn-sm:not(.dxbl-spin-btn-inc):not(.dxbl-spin-btn-dec) { min-height: 34px; padding: 6px 11px; font-size: .78rem; }
.evaluation-page .dxbl-btn.dxbl-btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(18, 28, 24, .12);
}
.evaluation-page .dxbl-btn.dxbl-btn-primary:hover:not(:disabled) {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}
.evaluation-page .dxbl-btn.dxbl-btn-primary:disabled {
    background-color: var(--surface-muted) !important;
    border-color: var(--surface-muted) !important;
    color: var(--muted) !important;
}
.evaluation-page .dxbl-btn.dxbl-btn-outline-secondary {
    background-color: var(--surface) !important;
    border-color: var(--line-strong) !important;
    color: var(--ink) !important;
}
.evaluation-page .dxbl-btn.dxbl-btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--surface-hover) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.evaluation-page .dxbl-btn.dxbl-btn-text-secondary { color: var(--muted) !important; }
.evaluation-page .dxbl-btn.dxbl-btn-text-secondary:hover:not(:disabled) {
    background-color: var(--primary-soft) !important;
    color: var(--primary) !important;
}
.evaluation-page .dxbl-btn.dxbl-btn-text-danger { color: var(--danger) !important; }
.evaluation-page .dxbl-btn.dxbl-btn-text-danger:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--danger) 10%, var(--surface)) !important;
}
.evaluation-page .dxbl-btn:disabled { opacity: .55; }

/* DxSpinEdit renders as <dxbl-spinedit class="dxbl-text-edit">. Its arrow
   buttons are regular .dxbl-btn elements, so keep them inside the 40px form
   control instead of applying the full button height to each half. */
.evaluation-page dxbl-spinedit.dxbl-text-edit {
    display: inline-flex;
    height: var(--form-control-height);
    min-height: var(--form-control-height);
}
.evaluation-page dxbl-spinedit.dxbl-text-edit > input {
    height: 100%;
    min-height: 0;
}
.evaluation-page dxbl-spinedit .dxbl-spin-btns {
    height: calc(var(--form-control-height) - 2px);
}
.evaluation-page dxbl-spinedit .dxbl-spin-btns .dxbl-spin-btn-inc,
.evaluation-page dxbl-spinedit .dxbl-spin-btns .dxbl-spin-btn-dec {
    min-height: 0;
    height: 50%;
    padding: 0 8px;
    line-height: 1;
    border-radius: 0;
}

/* ---------- 文本输入 / Memo / SpinEdit ---------- */
.evaluation-page .dxbl-text-edit,
.evaluation-page .dxbl-memo,
.evaluation-page .dxbl-spin-edit {
    border: 1px solid var(--form-control-border) !important;
    border-radius: var(--ev-radius-sm) !important;
    background: var(--surface) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.evaluation-page .dxbl-text-edit:hover:not(.dxbl-readonly),
.evaluation-page .dxbl-memo:hover,
.evaluation-page .dxbl-spin-edit:hover { border-color: var(--form-control-focus) !important; }
.evaluation-page .dxbl-text-edit input,
.evaluation-page .dxbl-memo textarea,
.evaluation-page .dxbl-spin-edit input {
    font-size: var(--ev-font) !important;
    color: var(--form-control-color) !important;
    font-family: inherit !important;
}
.evaluation-page .dxbl-text-edit input::placeholder,
.evaluation-page .dxbl-memo textarea::placeholder { color: var(--form-control-placeholder); }
.evaluation-page .dxbl-text-edit.dxbl-readonly {
    background: var(--surface-muted) !important;
    border-color: var(--line) !important;
}
.evaluation-page .dxbl-text-edit.dxbl-readonly input { color: var(--muted) !important; }
.evaluation-page .dxbl-spin-edit .dxbl-spin-btns { border-left: 1px solid var(--line); color: var(--muted); }
.evaluation-page .dxbl-spin-edit .dxbl-spin-btns:hover { color: var(--primary); }

/* ---------- ComboBox ---------- */
.evaluation-page .dxbl-combo-box {
    border: 1px solid var(--form-control-border) !important;
    border-radius: var(--ev-radius-sm) !important;
    background: var(--surface) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.evaluation-page .dxbl-combo-box:hover { border-color: var(--form-control-focus) !important; }
.evaluation-page .dxbl-combo-box input { font-size: var(--ev-font) !important; color: var(--form-control-color) !important; font-family: inherit !important; }
.evaluation-page .dxbl-combo-box .dxbl-dropdown-button,
.evaluation-page .dxbl-combo-box .dxbl-edit-btn-dropdown { color: var(--muted); border-left: 1px solid var(--line); }
.evaluation-page .dxbl-combo-box .dxbl-dropdown-button:hover { color: var(--primary); background: var(--surface-hover); }

/* DevExpress 控件在主题中有自己的 accent，评测页统一跟随当前主题色。 */
.evaluation-page .dxbl-checkbox .dxbl-checkbox-check-element,
.evaluation-page .dxbl-checkbox [role="checkbox"] {
    border-color: var(--form-control-border) !important;
}
.evaluation-page .dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: var(--primary);
    --dxbl-checkbox-check-element-checked-hover-bg: var(--primary-hover);
    --dxbl-checkbox-switch-checked-bg: var(--primary);
    --dxbl-checkbox-switch-checked-hover-bg: var(--primary-hover);
    --dxbl-checkbox-radio-checked-border-color: var(--primary);
    --dxbl-checkbox-radio-checked-hover-border-color: var(--primary-hover);
    --dxbl-checkbox-radio-check-bg: var(--primary);
    --dxbl-checkbox-checked-focus-shadow-color: var(--form-control-focus-ring);
    --dxbl-checkbox-unchecked-focus-shadow-color: var(--form-control-focus-ring);
}
.evaluation-page .dxbl-checkbox.dxbl-checkbox-checked .dxbl-checkbox-check-element,
.evaluation-page .dxbl-checkbox [role="checkbox"][aria-checked="true"] {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.evaluation-page .dxbl-checkbox.dxbl-checkbox-checked,
.evaluation-page .dxbl-checkbox [role="checkbox"][aria-checked="true"] {
    color: var(--primary) !important;
}
.evaluation-page .dxbl-combo-box:focus-within,
.evaluation-page .dxbl-dropdown-box:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--form-control-focus-ring) !important;
}

/* ---------- 下拉面板（body 下 portal） ---------- */
.dxbl-popup-portal .dxbl-dropdown li[role=option] {
    font-size: .82rem;
    color: var(--ink);
    font-family: inherit;
    transition: background-color .1s ease;
}
.dxbl-popup-portal .dxbl-dropdown li[role=option]:hover { background: var(--surface-hover); }
.dxbl-popup-portal .dxbl-dropdown li[role=option][aria-selected=true] {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
    font-weight: 600;
}
.dxbl-popup-portal .dxbl-dropdown li[role=option]:focus,
.dxbl-popup-portal .dxbl-dropdown li[role=option][aria-selected="true"]:focus {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
    outline-color: var(--primary) !important;
}
.dxbl-popup-portal .dxbl-edit-dropdown,
.dxbl-popup-portal .dxbl-list-box,
.dxbl-popup-portal .dxbl-listbox {
    --dxbl-edit-dropdown-btn-focus-outline-color: var(--primary);
    --dxbl-list-box-item-selected-bg: var(--primary-soft);
    --dxbl-list-box-item-selected-color: var(--primary);
    --dxbl-list-box-item-selected-hover-bg: var(--primary-soft);
    --dxbl-list-box-item-selected-hover-color: var(--primary);
    --dxbl-listbox-item-selected-bg: var(--primary-soft);
    --dxbl-listbox-item-selected-color: var(--primary);
    --dxbl-listbox-item-selected-hover-bg: var(--primary-soft);
    --dxbl-listbox-item-selected-hover-color: var(--primary);
}
.dxbl-popup-portal .dxbl-list-box li.dxbl-list-box-item-selected,
.dxbl-popup-portal .dxbl-listbox .dxbl-listbox-item-selected,
.dxbl-popup-portal .dxbl-listbox tr.dxbl-listbox-item-selected > td {
    background-color: var(--primary-soft) !important;
    color: var(--primary) !important;
}

/* ---------- DxGrid ---------- */
.evaluation-page .dxbl-grid { font-size: var(--ev-font); color: var(--ink); }
.evaluation-page .dxbl-grid .dxbl-grid-table { border-collapse: separate; border-spacing: 0; }
/* 表头：主题用 color-mix(#000 5%, --dxbl-grid-header-bg)，变量已换 surface-muted */
.evaluation-page .dxbl-grid .dxbl-grid-header {
    background-color: var(--dxbl-grid-header-bg) !important;
    font-size: var(--ev-font-xs) !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    letter-spacing: .2px;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--line) !important;
}
.evaluation-page .dxbl-grid .dxbl-grid-header.dxbl-grid-header-sortable:hover { color: var(--primary) !important; cursor: pointer; }
.evaluation-page .dxbl-grid .dxbl-grid-table tbody td {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--line-soft) !important;
    font-size: var(--ev-font);
    color: var(--ink);
}
.evaluation-page .dxbl-grid .dxbl-grid-table tbody tr:hover td { background: var(--surface-hover); }
.evaluation-page .dxbl-grid .dxbl-grid-table tbody tr:last-child td { border-bottom: none; }
/* 表格外框：圆角 + 细边 + 柔和投影（Python 参考版卡片质感） */
.evaluation-page .dxbl-grid.dxbl-grid {
    border: 1px solid var(--line);
    border-radius: var(--ev-radius);
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(18, 28, 24, .05);
    overflow: hidden;
    padding: 0 !important;
}
/* 筛选行输入框收敛 */
.evaluation-page .dxbl-grid .dxbl-grid-filter-row input { font-size: var(--ev-font-xs) !important; }

/* ---------- DxTabs ---------- */
/* 页签统一加大内边距：模板 tab（dxbl-tabs-tmpl）在 DevExpress 主题里没有任何
   padding 规则（112 处相关规则全是 :not(.dxbl-tabs-tmpl)），不补会把页签
   压成一行贴边小字。文字模板页签（dxbl-tabs-text）同样收敛到统一尺寸。 */
.evaluation-page .dxbl-tabs .dxbl-tabs-item {
    padding: 7px 15px !important;
    gap: 7px;
    align-items: center;
    font-size: var(--ev-font) !important;
    font-weight: 650 !important;
    color: var(--muted) !important;
    transition: color .15s ease;
    min-height: 38px;
    box-sizing: border-box;
}
.evaluation-tabs-row {
    display: flex;
    min-height: 52px;
    margin-bottom: 12px;
    padding: 0 0 0 0;
    align-items: stretch;
    gap: 12px;
}
.evaluation-tabs-row .evaluation-tabs {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.evaluation-tabs-row .evaluation-tabs .dxbl-tabs-tablist {
    min-height: 52px;
    align-items: stretch;
    gap: 4px;
}
.evaluation-page .dxbl-tabs .dxbl-tabs-item:hover { color: var(--ink) !important; background: var(--surface-muted) !important; }
.evaluation-page .dxbl-tabs .dxbl-tabs-item.dxbl-active { color: var(--primary) !important; }
.evaluation-page .dxbl-tabs .dxbl-tabs-item .dxbl-tabs-text { gap: 7px; align-items: center; }
.evaluation-page .dxbl-tabs .dxbl-tabs-item .lucide-icon { flex: 0 0 auto; }
/* tablist 分隔线加高对齐页签 */
.evaluation-page .dxbl-tabs .dxbl-tabs-tablist { border-bottom: 1px solid var(--line) !important; }
/* 激活下划线：主题硬编码橙色 #fe7109，用 !important 压回主色 */
.evaluation-page .dxbl-tabs .dxbl-tabs-item.dxbl-active::after {
    background-color: var(--primary) !important;
    height: 2px;
}
.evaluation-page .dxbl-tabs .dxbl-tabs-item .dxbl-tabs-text {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* ---------- DxProgressBar ---------- */
.evaluation-page .progress {
    height: 9px !important;
    border-radius: 999px;
    background: var(--surface-muted);
    overflow: hidden;
}
.evaluation-page .progress .progress-bar {
    background: var(--primary) !important;
    border-radius: 999px;
    transition: width .3s ease;
}
.evaluation-page .trend-inverse .progress .progress-bar {
    background: var(--status-warn) !important;
}

/* ---------- DxListBox ---------- */
.evaluation-page .dxbl-listbox-item, .evaluation-page .dxbl-list-box ul li {
    font-size: var(--ev-font) !important;
    color: var(--ink);
}
.evaluation-page .dxbl-list-box ul li:hover { background: var(--surface-hover); }
.evaluation-page input[type=checkbox] { accent-color: var(--primary); width: 15px; height: 15px; }

/* ---------- DxFormLayout ---------- */
.evaluation-page .dxbl-fl .dxbl-fl-item .dxbl-fl-caption {
    font-size: var(--ev-font-sm);
    font-weight: 650;
    color: var(--ink);
}
.evaluation-page .dxbl-fl { font-family: inherit; }
/* 水平布局项的控件列最小宽度：防止窄面板里控件被压缩到 0（28px 输入框） */
/* 水平布局项的控件列最小宽度：防止窄面板里控件被压缩到 0（28px 输入框） */
.evaluation-page .dxbl-fl .dxbl-fl-ctrl { min-width: 0; flex: 1 1 0; }
.evaluation-page .dxbl-fl .dxbl-fl-ctrl .dxbl-text-edit { min-width: 120px; }
.evaluation-page .dxbl-fl .dxbl-fl-ctrl .dxbl-memo-edit { min-width: 200px; }
.evaluation-page .dxbl-fl .dxbl-fl-item-horizontal { min-width: 0; }
/* 表单换行兜底：dxbl-row 有 flex-wrap:wrap，dxbl-col 主题规则是 shrink:0，
   宽度按 12 列百分比；跨行项（ColSpanMd=2）在窄面板里叠成一行多列时
   保证换行而不是挤压同行项。 */
.evaluation-page .dxbl-fl .dxbl-row { flex-wrap: wrap !important; }
.evaluation-page .dxbl-fl .dxbl-row .dxbl-col { width: auto; flex: 1 1 0; }
.evaluation-page .dxbl-fl .dxbl-row .dxbl-col[class*='dxbl-col-md-12'],
.evaluation-page .dxbl-fl .dxbl-row .dxbl-col[class*='dxbl-col-md-6'] { flex: 0 0 50%; }
.evaluation-page .dxbl-fl .dxbl-row .dxbl-col[class*='dxbl-col-md-2'] { flex: 0 0 100%; }
@media (max-width: 720px) {
    .evaluation-page .dxbl-fl .dxbl-row .dxbl-col[class*='dxbl-col-md-6'] { flex-basis: 100%; }
}

/* ---------- 模型价格表（原模型广场） ---------- */
.evaluation-page .price-value { font-variant-numeric: tabular-nums; color: var(--ink); font-size: var(--ev-font); }
.evaluation-page .price-value.official { color: var(--muted); }
.evaluation-page .plaza-billing { color: var(--muted); font-size: var(--ev-font-sm); }
.evaluation-page .plaza-note { margin: 12px 16px 0; color: var(--muted); font-size: var(--ev-font-xs); line-height: 1.7; }

/* ---------- DxChart 文本 ---------- */
.evaluation-page .dxc-arg-elements text,
.evaluation-page .dxc-val-elements text,
.evaluation-page .dxbl-legend-item text { fill: var(--muted); }

/* ---------- 加载骨架 / 滚动条 ---------- */
.evaluation-page .dxbl-scroll-viewer::-webkit-scrollbar { width: 8px; height: 8px; }
.evaluation-page .dxbl-scroll-viewer::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

/* ---------- 页面骨架 ---------- */
.evaluation-page .page-header { margin-bottom: 18px; }

@media (max-width: 560px) {
    .evaluation-page .dxbl-tabs .dxbl-tabs-item { font-size: var(--ev-font-sm) !important; }
}