/* ================================================================
   pdf_compose.css — PDF 矢量图拼版工具（新版布局）

   布局说明：
   - 第 1 区域：compose-top-grid（左右两列，左宽右窄）
     - 左列 compose-top-left：PDF 文件 + 槽位分配
     - 右列 compose-top-right：模板与参数 + 操作
   - 第 2 区域：compose-preview-row（左右两列，左宽右窄）
     - 左列 compose-preview-main：PDF 预览区
     - 右列 compose-preview-side：参数区 + 输出区
   ================================================================ */

/* ================================================================
   第 1 区域：两列布局
   ================================================================ */
.compose-top-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 15px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .compose-top-grid {
    grid-template-columns: 1fr;
  }
}

/* 左列 */
.compose-top-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 右列 */
.compose-top-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 右列内操作区块撑满剩余空间 */
.compose-action-block {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ================================================================
   第 2 区域：预览与输出（左右两列布局）
   ================================================================ */
.compose-preview-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 15px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .compose-preview-row {
    grid-template-columns: 1fr;
  }
}

/* 左列：预览区 */
.compose-preview-main {
  display: flex;
  flex-direction: column;
}

/* 右列：侧边栏（参数区 + 输出区） */
.compose-preview-side {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 参数区 */
.compose-preview-params {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 输出区 */
.compose-preview-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ================================================================
   区块（文件 / 模板 / 槽位 / 编号 / 导出）
   ================================================================ */
.compose-block {
  border: 1px solid var(--border-card);
  border-radius: 4px;
  padding: 15px;
  background: #fff;
  margin-bottom: 15px;
}

.compose-block:last-child {
  margin-bottom: 0;
}

.compose-block-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e8f2fa;
}

/* ================================================================
   栅格
   ================================================================ */
.compose-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 600px) {
  .compose-row2 {
    grid-template-columns: 1fr;
  }
}

.compose-row3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 600px) {
  .compose-row3 {
    grid-template-columns: 1fr;
  }
}

/* 全局拼版参数网格（2x2） */
.compose-params-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .compose-params-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   全局 label
   ================================================================ */
.compose-top-left label,
.compose-preview-side label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  margin: 8px 0 4px;
}

/* ================================================================
   按钮组
   ================================================================ */
.compose-btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ================================================================
   提示文字
   ================================================================ */
.compose-hint {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.5;
  margin-top: 8px;
}
.compose-hint p {
  margin: 2px 0;
}

/* ================================================================
   状态文字
   ================================================================ */
.compose-status {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.5;
  margin-top: 8px;
}
.compose-status.err {
  color: var(--danger);
}

/* ================================================================
   文件上传区
   ================================================================ */
.pdf-upload-area {
  border: 2px dashed var(--border-card);
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  background: #fafbff;
  margin-bottom: 10px;
}
.pdf-upload-area:hover {
  border-color: var(--primary);
  background: #eaf4ff;
}

.upload-icon {
  font-size: 28px;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 6px;
}
.upload-text {
  font-size: 13px;
  color: var(--text-main);
  font-weight: 600;
}
.upload-sub {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 3px;
}

/* ================================================================
   文件列表
   ================================================================ */
.pdf-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}

.pdf-file-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  background: #f8f9fa;
  border: 1px solid #e8ecf0;
  border-radius: 4px;
  font-size: 12px;
}

.pdf-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-main);
  font-size: 12px;
}

.pdf-file-actions {
  display: flex;
  gap: 4px;
}

.pdf-file-actions button {
  background: none;
  border: 1px solid #d0dbe7;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 7px;
  color: var(--text-sub);
  line-height: 1.4;
  transition: border-color 0.15s, color 0.15s;
}
.pdf-file-actions button:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.pdf-file-actions button[data-action="del"]:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ================================================================
   槽位分配网格（根据模板动态生成，仅文件选择）
   ================================================================ */
.slots-grid {
  display: grid;
  gap: 10px;
}

/* 模板 1x2：1 行 2 列 */
.slots-grid[data-template="1x2"] {
  grid-template-columns: 1fr 1fr;
}

/* 模板 2x2：2 行 2 列 */
.slots-grid[data-template="2x2"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

/* 模板 2x3：2 行 3 列 */
.slots-grid[data-template="2x3"] {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
}

/* 模板 3x2：3 行 2 列 */
.slots-grid[data-template="3x2"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
}

/* ---- 槽位分配卡片 ---- */
.slot-assign-card {
  border: 1px solid #dde6ef;
  border-radius: 4px;
  padding: 10px;
  background: #fafbff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slot-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  padding-bottom: 4px;
  border-bottom: 1px solid #e8f2fa;
}

.slot-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.slot-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.slot-field-row.single {
  grid-template-columns: 1fr;
}

/* 槽位内的表单控件 */
.slot-select {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid #d0dbe7;
  border-radius: 3px;
  color: var(--text-main);
  background: #fff;
  width: 100%;
  cursor: pointer;
}

.slot-select:focus {
  border-color: var(--primary);
  outline: none;
}

/* ================================================================
   预览区
   ================================================================ */
.compose-plot-card {
  border: 1px solid var(--border-card);
  border-radius: 4px;
  padding: 15px;
  background: #ffffff;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

.preview-empty-hint {
  flex: 1;
  font-size: 13px;
  color: var(--text-sub);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #d0dbe7;
  border-radius: 6px;
  padding: 60px 20px;
  margin: 0;
}

/* ---- PDF 预览容器 ---- */
.preview-pdf-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.preview-pdf-frame {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 1px solid #d0dbe7;
  border-radius: 4px;
  background: #fff;
}