/* ==================== 合同订单（项目管理下拉里的一栏） ====================
   一行 = 一个项目（工地），行跟着工地列表来。表格只读，改都在行首的「查看」里；
   结算金额 = 合同 + 增项 − 减项，未收金额 = 结算 − 已收（服务端算好，这里只显示）。
   表头、内容、汇总都居中；一页 13 条，底下一条分页条。 */
.co-header { margin-bottom: 10px; }
.co-title-row { display: flex; align-items: center; gap: 10px; }
.co-title { font-size: 20px; font-weight: 700; color: var(--water-dark); }
.co-title-icon {
    width: 38px; height: 38px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--gradient-water); color: #fff;
}
.co-title-icon svg { width: 20px; height: 20px; }

.co-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.co-toolbar .search-box { flex: 0 0 240px; margin: 0; height: 40px; display: flex; align-items: center; }
/* 搜索框和「刷新」站同一条线上：两边都定成 40px 高（站内通用的搜索框是 14px 内边距、偏高） */
.co-toolbar .search-box input {
    height: 40px;
    padding: 0 14px;
    border-width: 1px;
    border-radius: var(--radius-xs);
    font-size: 14px;
    line-height: 40px;
}
.co-toolbar .btn {
    height: 40px;
    padding: 0 20px;
    margin: 0;
    line-height: 40px;
    border-radius: var(--radius-xs);
}

.co-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.co-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--paper-warm); color: var(--water-dark);
    font-size: 12.5px; border: 1px solid rgba(15, 76, 92, 0.10);
}
.co-chip-note { color: var(--ink-light); background: transparent; border-style: dashed; }

.co-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    background: var(--surface-white);
    box-shadow: var(--shadow-sm);
}
/* 底下的分页条居中（跟项目成本那边一个样，2026-10-06 用户要求） */
.co-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    justify-content: center;
}

.co-table { border-collapse: separate; border-spacing: 0; table-layout: auto; width: max-content; min-width: 100%; font-size: 13px; }
.co-table thead th {
    padding: 10px 10px; background: var(--paper-warm); color: var(--ink-dark);
    font-weight: 600; font-size: 12.5px; text-align: center; white-space: nowrap;
    border-bottom: 1px solid rgba(15, 76, 92, 0.12);
}
.co-table td {
    padding: 8px 10px; border-bottom: 1px solid rgba(15, 76, 92, 0.08);
    text-align: center; white-space: nowrap;
}
/* 序号：模板里的第一列（页面在最前面还有一列「操作」，所以它排第二） */
.co-table .co-seq {
    color: var(--ink-light); font-variant-numeric: tabular-nums; min-width: 52px;
}
/* 金额列：右对齐 + 等宽数字，竖着看对得齐（模板里也是这么用的） */
.co-table td.co-calc { text-align: right; font-variant-numeric: tabular-nums; }
.co-table .co-sticky-1 {
    position: sticky; left: 0; z-index: 3; background: var(--paper-warm); min-width: 132px;
}
.co-table .co-sticky-2 {
    position: sticky; left: 132px; z-index: 3; background: var(--paper-warm); min-width: 180px;
    text-align: center;
}
.co-table tbody .co-sticky-1,
.co-table tbody .co-sticky-2 { background: var(--surface-white); }
.co-table tbody tr:hover { background: rgba(232, 244, 248, 0.5); }
.co-table tbody tr:hover .co-sticky-1,
.co-table tbody tr:hover .co-sticky-2 { background: #f7fbfc; }
/* 操作那两格：浅灰胶囊按钮，查看深色字、删除红字（照用户截图） */
.co-table .co-actions { padding: 6px 10px; white-space: nowrap; }
.co-table .co-view,
.co-table .co-delete {
    display: inline-block;
    min-width: 54px;
    height: 30px;
    padding: 0 14px;
    margin: 2px 8px 2px 0;
    border: 0;
    border-radius: 16px;
    background: rgba(15, 76, 92, 0.06);
    font-family: inherit;
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s var(--ease-smooth);
}
.co-table .co-view { color: var(--ink-dark); }
.co-table .co-delete { color: #d64545; margin-right: 0; }
.co-table .co-view:hover { background: rgba(15, 76, 92, 0.13); }
.co-table .co-delete:hover { background: rgba(214, 69, 69, 0.14); }
.co-calc { font-variant-numeric: tabular-nums; }
.co-table tfoot td {
    position: sticky; bottom: 0; z-index: 2; padding: 10px 10px;
    background: var(--paper-warm); font-weight: 600; color: var(--water-dark);
    border-top: 1px solid rgba(15, 76, 92, 0.16);
}

/* 弹窗（行首「查看」）：这一整条的全部字段 */
.co-modal-content { width: min(880px, 96vw); max-width: 96vw; max-height: 92vh; overflow: auto; }
.co-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 14px; margin-bottom: 12px; }
.co-f { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-mid); }
.co-f > span { flex: 0 0 104px; text-align: right; white-space: nowrap; }
.co-f .co-input {
    flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px;
    border: 1px solid rgba(15, 76, 92, 0.16); border-radius: var(--radius-xs);
    background: var(--surface-white); color: var(--ink-black); font-size: 13px;
}
.co-f .co-input:focus { outline: none; border-color: var(--water-mid); box-shadow: 0 0 0 3px rgba(42, 147, 168, 0.14); }
/* 合同附件：上传按钮 / 打开 / 移除（都做成小胶囊，跟操作列一个风格） */
.co-f-wide { grid-column: 1 / -1; }
.co-f-wide .co-input { flex: 1 1 auto; }
.co-upload {
    height: 30px; padding: 0 14px; border: 0; border-radius: 16px;
    background: rgba(15, 76, 92, 0.08); color: var(--water-dark);
    font-family: inherit; font-size: 13px; line-height: 30px; cursor: pointer;
    white-space: nowrap;
}
.co-upload:hover { background: rgba(15, 76, 92, 0.16); }
.co-upload-clear { color: #d64545; background: rgba(214, 69, 69, 0.10); }
.co-upload-clear:hover { background: rgba(214, 69, 69, 0.18); }
.co-attach-link { color: var(--water-primary); text-decoration: none; white-space: nowrap; }
.co-attach-link:hover { text-decoration: underline; }

.co-modal-totals { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px dashed rgba(15, 76, 92, 0.18); }
.co-modal-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(15, 76, 92, 0.12); }

/* 底下的分页条：跟别处一个样式 */
.co-page {
    min-width: 32px; height: 32px; padding: 0 8px; margin: 0 2px;
    border: 1px solid rgba(15, 76, 92, 0.16); border-radius: var(--radius-xs);
    background: var(--surface-white); color: var(--ink-mid); cursor: pointer;
}
.co-page.active { border-color: var(--water-primary); background: var(--gradient-water); color: #fff; font-weight: 600; }
.co-page:disabled { opacity: 0.4; cursor: not-allowed; }
.co-page-note { color: var(--ink-light); font-size: 12px; margin: 0 6px; }
.co-page-jump {
    width: 56px; height: 28px; margin: 0 4px; padding: 0 6px;
    border: 1px solid var(--water-glow); border-radius: var(--radius-xs); text-align: center;
}

/* 刚新增的那一条（按 id 排最后）：翻到它那页时闪一下，免得以为没加上 */
.co-row-new td { background: #fff6d8; }

/* 这个弹窗又大（880px × 92vh）、底下还压着一张 22 列的宽表：整屏 backdrop-filter 模糊
   和弹入动画都是「点开卡一下」的来源——实测首次打开 69ms、5 帧超过 33ms（最长 83ms），
   关掉之后 25ms、最长帧 17ms。跟项目成本那个弹窗一样，这里也关掉（2026-10-07 用户反馈）。 */
#co-modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
}
#co-modal .co-modal-content {
    animation: none;
}