/* _grid.css - 四区布局 + 单元格样式（替代旧 grid.css 的布局部分，并现代化 IE 私有滤镜） */

/* ============================================================
   四区网格容器：CSS Grid 实现
     ┌─────────────┬──────────────────┐
     │  FixHead     │  FlexHead        │  ← 表头行（不滚动）
     ├─────────────┼──────────────────┤
     │  FixBody     │  FlexBody         │  ← 正文行（FlexBody 双向滚动）
     │ (竖向跟随)   │ (横向+竖向)       │
     └─────────────┴──────────────────┘
   ============================================================ */

.doo-grid {
    border: 1px solid var(--doo-border, #7b9ebd);
    background: var(--doo-outer-bg, #cccccc);
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    /* 演示页把组件放在 flex 容器里与说明并排；禁止它被 flex-shrink 压缩，
       否则 720px 宽会被挤掉，导致右侧悬停区超出容器被误判为"拖到表外" */
    flex-shrink: 0;

    /* ---- 皮肤变量默认值（= classic 皮肤）----
       皮肤经 _skin.js 在 .doo-grid.doo-skin-<name> 上覆盖这组变量；
       此处兜底保证未应用皮肤时外观与变量化之前完全一致。 */
    --doo-border: #7b9ebd;
    --doo-outer-bg: #cccccc;
    --doo-head-bg: buttonface;
    --doo-flexhead-bg: #cccccc;
    --doo-cell-text: #000000;
    --doo-cell-border: #aca899;
    --doo-flex-border: #ffb6c1;
    --doo-cell-bg: #ffffff;
    --doo-head-grad1: #ffffff;
    --doo-head-grad2: #cecfde;
    --doo-editable-hover: #eaf3ff;
    --doo-changed-bg: #fdf2d4;
    --doo-changed-head: #fdf2d4;
    --doo-changed-hover: #f7e2ad;
    --doo-changed-dot: #e8a93c;
    --doo-new-bg: #e9f6ee;
    --doo-new-head: #d7f0e0;
    --doo-new-hover: #cdeed8;
    --doo-new-dot: #2ea44f;
    --doo-menu-hover: #316ac5;
}

.doo-grid-main {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.doo-grid-fixhead {
    grid-column: 1; grid-row: 1;
    overflow: hidden;
    background: var(--doo-head-bg);
    border-right: 1px solid var(--doo-cell-border);
    border-bottom: 1px solid var(--doo-cell-border);
}
.doo-grid-flexhead {
    grid-column: 2; grid-row: 1;
    overflow: hidden;
    background: var(--doo-flexhead-bg);
    border-bottom: 1px solid var(--doo-cell-border);
    /* 表头内容平时铺满整个区（包括竖向滚动条正上方），横向跟随由 _ad.js
       对内部 table 做 transform 位移；滚到最右末列停在滚动条左缘，灰色
       背景才露出来 */
}
.doo-grid-fixbody {
    grid-column: 1; grid-row: 2;
    overflow: hidden;
    background: var(--doo-head-bg);
    border-right: 1px solid var(--doo-cell-border);
}
.doo-grid-flexbody {
    grid-column: 2; grid-row: 2;
    overflow: hidden;     /* 滚动交给内层 #FlexBody；外层只负责布局 */
    background: var(--doo-cell-bg);
}

/* 内部容器 div 撑满各自格子，并承担滚动/裁切职责
   - #FlexBody：overflow:auto，自身滚动，事件由此触发
   - #FlexHead / #FixBody：overflow:hidden，scrollLeft/scrollTop 由 JS 同步
   - 不再用 adDIV 给内层 div 写死 width/height（CSS 100% 已撑满，table 溢出由 hidden 裁切） */
.doo-grid-flexbody > div {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.doo-grid-flexhead > div,
.doo-grid-fixhead > div,
.doo-grid-fixbody > div {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ============================================================
   表头单元格样式（来自旧 grid.css，把 IE 滤镜改成 CSS 渐变）
   ============================================================ */

/* 数据列头（叶子节点 td.HeadCell）*/
.HeadCell {
    border-right: 1px solid var(--doo-cell-border);
    border-top: 1px solid var(--doo-head-grad1);
    border-left: 1px solid var(--doo-head-grad1);
    border-bottom: 1px solid var(--doo-cell-border);
    background-color: var(--doo-head-bg);
    color: var(--doo-cell-text);
    overflow: hidden;
    font-size: 9pt;
    padding: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

/* 集合列头（type='set' 节点对应的 td）—— 旧版用 IE 渐变滤镜，这里用 CSS linear-gradient */
.HeadSetCell {
    border: 1px solid var(--doo-border);
    padding: 2px;
    font-size: 12px;
    background: linear-gradient(to bottom, var(--doo-head-grad1), var(--doo-head-grad2));
    cursor: pointer;
    color: var(--doo-cell-text);
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* 正文单元格 */
.FixGridBodyCell {
    border-right: 1px solid var(--doo-cell-border);
    border-bottom: 1px solid var(--doo-cell-border);
    padding: 2px 4px;
    background-color: var(--doo-head-bg);
    color: var(--doo-cell-text);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 9pt;
}
.FlexGridBodyCell {
    border-right: 1px solid var(--doo-flex-border);
    border-bottom: 1px solid var(--doo-flex-border);
    padding: 2px 4px;
    background-color: var(--doo-cell-bg);
    color: var(--doo-cell-text);
    font-size: 9pt;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 正文表格：table-layout:fixed，列宽由 <colgroup><col> 控制 */
.doo-grid-fixbody table, .doo-grid-flexbody table {
    table-layout: fixed;
    border-collapse: collapse;
}

/* 表头表格 */
.doo-grid-fixhead table, .doo-grid-flexhead table {
    border-collapse: collapse;
}

/* ============================================================
   只读模式：所有表头单元格 cursor:default，不出现手型 / 列拖拽光标
   （编辑模式下 HeadSetCell 为 pointer，列宽边缘由 _head.js 动态设 col-resize；
    只读时 _head.js 不挂事件，这里再把静态手型一并压掉。）
   ============================================================ */
.doo-grid-readonly .HeadCell,
.doo-grid-readonly .HeadSetCell {
    cursor: default;
}

/* 演示页面的提示文本 */
.demo-tip {
    font: 12px "Microsoft YaHei", sans-serif;
    color: #333;
    background: #f5f5dc;
    border: 1px dashed #999;
    padding: 8px 12px;
    margin: 8px 0;
    line-height: 1.6;
}

/* ============================================================
   数据编辑：可编辑单元格 / 行内编辑器
   ============================================================ */

/* 可编辑列单元格：悬停时浅蓝底提示"此处可改"；双击进入编辑 */
.editable-cell { cursor: default; }
.editable-cell:hover { background-color: var(--doo-editable-hover) !important; }

/* 编辑中的单元格：去掉内边距让编辑器填满，白底蓝框强调编辑态 */
td.editing {
    padding: 0 !important;
    background-color: #fff !important;
    position: relative;
    box-shadow: inset 0 0 0 2px #4a90d9;
    overflow: visible;
}

/* 行内编辑器：铺满整个单元格 */
.grid-cell-editor {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 0;
    outline: none;
    padding: 2px 4px;
    font-size: 9pt;
    font-family: inherit;
    background: #fff;
}
select.grid-cell-editor { padding: 1px 2px; cursor: pointer; }
/* 正则不匹配的可视反馈（红框 + 轻微抖动） */
.grid-cell-editor.pattern-mismatch {
    border: 1px solid #d00;
    background: #fff0f0;
    animation: doo-shake 0.3s;
}
@keyframes doo-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* ============================================================
   右键快捷菜单（自定义 context menu）
   ============================================================ */
.grid-context-menu {
    position: fixed;
    z-index: 3002;
    display: none;              /* 默认隐藏；加 .show 时显示 */
    min-width: 150px;
    padding: 2px;
    background: #f9f9f8;
    border: 1px solid #8f8f8f;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
    font: 12px "Microsoft YaHei", sans-serif;
    color: #000;
    user-select: none;
}
.grid-context-menu.show { display: block; }

.grid-menu-item {
    padding: 5px 22px 5px 24px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
}
.grid-menu-item:hover {
    background: var(--doo-menu-hover);
    color: #fff;
}
/* 不可用的菜单项（不可编辑列上的"编辑"、无改动时的"保存"）*/
.grid-menu-item.disabled {
    color: #999;
    cursor: default;
    background: transparent;
}
.grid-menu-sep {
    height: 1px;
    margin: 3px 2px;
    background: #d4d4d4;
}

/* ============================================================
   轻提示 toast 与未保存更改标记
   ============================================================ */
.grid-toast {
    position: fixed;
    z-index: 3003;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    background: rgba(40, 40, 40, 0.9);
    color: #fff;
    font: 12px "Microsoft YaHei", sans-serif;
    padding: 8px 18px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.grid-toast.show { opacity: 1; }

/* "有未保存的更改"状态标记（演示页中引用 #dirtyTip）*/
.dirty-tip {
    color: #c0392b;
    font-weight: bold;
    margin-left: 8px;
}

/* ============================================================
   行修改状态（现代通用语义色：新增=绿 / 修改=琥珀 / 删除=红）
   规则：
     · 浅底深字，文字颜色不变，保证对比度（WCAG AA）；
     · 不只靠颜色——行头圆点同时提供形状标记；
     · 状态用 class 管理（不用内联样式），hover 时只在同色系内加深；
     · 新增行整行绿色，优先级高于"修改"；保存后全部消失。
   ============================================================ */

/* 已修改的单元格：琥珀色浅底（固定区/活动区通用）*/
td.cell-changed { background-color: var(--doo-changed-bg); }

/* 新增行：整行浅绿底（tr.row-new td 的特异性高于各区单元格基类）*/
tr.row-new td { background-color: var(--doo-new-bg); }

/* hover：在状态底色同色系内加深，不覆盖成别的色相（!important 对齐
   .editable-cell:hover 的写法）*/
td.cell-changed.editable-cell:hover { background-color: var(--doo-changed-hover) !important; }
tr.row-new td.editable-cell:hover { background-color: var(--doo-new-hover) !important; }

/* ---- 行头（序号列）标记：圆点 + 浅底 ---- */
#FixBody td.rowhead-dirty,
#FixBody td.rowhead-new { text-align: left; }
#FixBody td.rowhead-dirty { background-color: var(--doo-changed-head); }
#FixBody td.rowhead-new   { background-color: var(--doo-new-head); }
#FixBody td.rowhead-dirty::before,
#FixBody td.rowhead-new::before {
    content: "●";
    font-size: 8px;
    margin-right: 3px;
    vertical-align: 1px;
}
#FixBody td.rowhead-dirty::before { color: var(--doo-changed-dot); }
#FixBody td.rowhead-new::before   { color: var(--doo-new-dot); }

/* ============================================================
   DooGrid 门面扩展（_DooGrid.js 渲染的结构）
   ============================================================ */

/* ---- 底部统计行：主网格增加第三行 ---- */
.doo-grid-main.has-summary { grid-template-rows: auto 1fr auto; }
.doo-grid-fixsum {
    grid-column: 1; grid-row: 3;
    overflow: hidden;
    background: var(--doo-head-bg);
    border-right: 1px solid var(--doo-cell-border);
    border-top: 1px solid var(--doo-cell-border);
}
.doo-grid-flexsum {
    grid-column: 2; grid-row: 3;
    overflow: hidden;
    background: var(--doo-cell-bg);
    border-top: 1px solid var(--doo-cell-border);
}
.doo-grid-fixsum > div, .doo-grid-flexsum > div { width: 100%; }

/* 统计单元格 */
.GridSumCell {
    padding: 3px 6px;
    font-size: 9pt; font-weight: bold;
    color: var(--doo-cell-text);
    background: var(--doo-head-grad1);
    border-right: 1px solid var(--doo-cell-border);
    white-space: nowrap;
    overflow: hidden;
}
.doo-grid-flexsum .GridSumCell {
    border-right: 1px solid var(--doo-flex-border);
    background: var(--doo-cell-bg);
}

/* ---- 表头排序指示（CSS 三角，不依赖图片资源）---- */
.HeadCell .sort-ind {
    display: inline-block;
    width: 0; height: 0;
    margin-left: 4px;
    vertical-align: 1px;
}
.HeadCell .sort-ind.asc {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid var(--doo-menu-hover);
}
.HeadCell .sort-ind.desc {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--doo-menu-hover);
}

/* 门面结构下序号列的行头圆点（旧规则只认 #FixBody，这里按区域类兜底）*/
.doo-grid-fixbody td.rowhead-dirty,
.doo-grid-fixbody td.rowhead-new { text-align: left; }
.doo-grid-fixbody td.rowhead-dirty { background-color: var(--doo-changed-head); }
.doo-grid-fixbody td.rowhead-new   { background-color: var(--doo-new-head); }
.doo-grid-fixbody td.rowhead-dirty::before,
.doo-grid-fixbody td.rowhead-new::before {
    content: "●";
    font-size: 8px;
    margin-right: 3px;
    vertical-align: 1px;
}
.doo-grid-fixbody td.rowhead-dirty::before { color: var(--doo-changed-dot); }
.doo-grid-fixbody td.rowhead-new::before   { color: var(--doo-new-dot); }