/* ======================================================================
   pages.css — 页面专项样式

   职责：只服务特定页面/功能的样式，别处复用的样式应上移到 theme.css（视觉）
   或 layout.css（框架）。当前收录：
   ① 场地设备管理页 —— 场地置顶按钮
   ② 参数模板页 / 参数配置页 —— 交叉带参数编辑表格 + 国家/差异值胶囊控件
   加载顺序：... → theme.css → layout.css → 【pages.css】（最后，便于覆盖前两层）
   ====================================================================== */

/* ---------- 场地列表置顶按钮（场地设备管理页） ----------
   每个场地行右侧的 📌（Sites.razor）：个人置顶偏好，置顶的场地排在国家列表最前。
   两态视觉：未置顶 = 灰度+45°斜放（像没钉牢的图钉）；置顶 = 立起高亮 */
.site-pin-btn {
    border: none;
    background: transparent;
    padding: 2px 5px;
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.28;                 /* 未置顶时整体压暗 */
    filter: grayscale(1);          /* 去色 */
    transform: rotate(45deg);      /* 斜放 */
    transform-origin: 50% 15%;     /* 绕钉帽旋转，视觉更自然 */
    transition: opacity .12s ease, filter .12s ease, transform .12s ease;
}
.site-pin-btn:hover { opacity: 0.8; }
/* 置顶态：恢复全不透明与原色，转正 */
.site-pin-btn.pinned { opacity: 1; filter: none; transform: none; }

/* ---------- 交叉带参数编辑表格（参数模板页 / 参数配置页共用） ----------
   大数据量行内编辑表格：固定列宽布局 + 容器内纵向滚动 + 表头吸顶 */

/* 表格滚动容器：限高 60vh 纵向滚动，禁止横向滚动（列宽由 th 的 width 控制） */
.para-table-wrap {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--wcs-border);
    border-radius: 0.55rem;
}
.para-table {
    font-size: 0.82rem;
    table-layout: fixed;           /* 固定布局算法：列宽严格按定义，不被内容撑开 */
    width: 100%;
}
/* 表头吸顶：滚动时列标题固定在容器顶部（深色底与数据行区分） */
.para-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: #2c3e50; color: #fff;
    font-weight: 600; font-size: 0.78rem;
    padding: 8px 10px; white-space: nowrap;
}
/* 单元格紧凑内边距；截断交给内部输入框自己做——td/th 级别的
   overflow+ellipsis 会在复选框列画出多余省略号 */
.para-table td { padding: 2px 6px; }
/* 单元格内输入框/下拉框：极紧凑尺寸；text-overflow 让超长参数值（IP/正则式）
   在框内省略号截断而不撑破固定列宽 */
.para-table input.form-control-sm {
    padding: 3px 6px; font-size: 0.8rem;
    min-width: 0;                  /* 配合 flex/fixed 列允许收缩 */
    text-overflow: ellipsis;
}
.para-table select.form-select-sm {
    padding: 3px 4px; font-size: 0.8rem;
    min-width: 0;
    text-overflow: ellipsis;
}
/* 透明背景输入框（表格内视觉上"直接编辑单元格"）聚焦时恢复白底 + 主色聚焦环，
   提示当前编辑位置 */
.para-table input.bg-transparent:focus {
    background: #fff !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}
/* 需要填值的行（值1值2全空）整行标黄提醒 */
.para-table tr.table-warning td { background: #fff9db; }
/* 参数模板页专用：该页表格下方无其他内容，撑满剩余视口高度
   （扣除顶栏+页头+工具栏约 180px） */
.para-table-wrap.para-fill { max-height: calc(100vh - 180px); }

/* ---------- 参数表格国家列 / 异列：胶囊控件 ----------
   参数行内的小胶囊按钮（ParaTemplates / ParaConfig 页）：
   - .para-country-btn 国家列：参数对哪些国家生效（空=全部国家）
   - .para-diff-btn 异列：按国家配置不同默认值的条数（＋ 添加） */

/* 国家列胶囊：999px 全圆角小药丸；超长国家名省略号截断 */
.para-country-btn {
    display: inline-block;
    max-width: 100%;
    padding: 1px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}
/* 悬停/聚焦：主色描边与文字，暗示可点 */
.para-country-btn:hover, .para-country-btn:focus {
    border-color: #6366f1;
    color: #4f46e5;
    text-decoration: none;
}
/* 已设置国家的态：主色浅底+主色描边，与"全部国家"默认态区分 */
.para-country-btn.set {
    background: rgba(99, 102, 241, 0.10);
    border-color: rgba(99, 102, 241, 0.45);
    color: #4f46e5;
}
/* 无编辑权限时禁用态半透明 */
.para-country-btn:disabled { opacity: 0.55; cursor: default; }

/* 异列按钮：小圆形徽章式（未设置显示＋，已设置显示条数），配色逻辑同上 */
.para-diff-btn {
    display: inline-block;
    min-width: 26px;
    padding: 1px 7px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1.5;
    text-decoration: none;
    transition: border-color .12s ease, color .12s ease;
}
.para-diff-btn:hover, .para-diff-btn:focus {
    border-color: #6366f1;
    color: #4f46e5;
    text-decoration: none;
}
.para-diff-btn.set {
    background: rgba(99, 102, 241, 0.10);
    border-color: rgba(99, 102, 241, 0.45);
    color: #4f46e5;
}

/* 生效国家/差异值编辑弹窗内的国家多选胶囊：
   可多点切换的大号药丸，选中态主色实底白字 */
.country-chip {
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 0.82rem;
    padding: 0.3rem 0.95rem;
    transition: all .12s ease;
}
.country-chip:hover { border-color: #6366f1; color: #4f46e5; }
.country-chip.on { background: #6366f1; border-color: #6366f1; color: #fff; }
.country-chip.on:hover { color: #fff; opacity: 0.92; }

/* ===== 方案库卡片（1-2列网格，固定高度，描述/方案独立滚动区） ===== */
.sol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}
.sol-card {
    display: flex;
    flex-direction: column;
    height: 440px;
    margin-bottom: 0;
    overflow: hidden;
}
.sol-title {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
    vertical-align: middle;
}
.sol-card .sol-desc {
    height: 92px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 0.82rem;
}
.sol-card .sol-solution {
    flex: 1 1 auto;
    min-height: 100px;
    overflow-y: auto;
    font-size: 0.82rem;
}
.sol-append-sep {
    margin: 6px 0 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--bs-border-color);
    font-weight: 600;
    color: var(--wcs-primary, #4f46e5);
}
.sol-thumb {
    height: 64px;
    cursor: zoom-in;
}

/* ===== 方案文本内嵌图片（[图片N] 占位符渲染；点击切换放大/还原） ===== */
.sol-inline-img {
    display: block;
    max-width: 100%;
    max-height: 220px;
    margin: 4px 0;
    border-radius: 4px;
    border: 1px solid var(--bs-border-color);
    cursor: zoom-in;
}
.sol-inline-img-zoom {
    max-height: none;
    cursor: zoom-out;
}