/**
 * 审查台响应式布局优化
 * 创建时间: 2026-07-01
 * 目标: 改善宽度自适应，充分利用屏幕空间
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   基础变量优化 - 更合理的宽度分配
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.app-root.review-mode .mx-app-layout,
.app-root.review-mode .workspace {
  /* 优化：减小最小宽度，允许更窄的侧边栏 */
  --workspace-side-min: 200px;   /* 原 220px */
  --workspace-batch-min: 320px;  /* 原 380px */
  --workspace-tools-min: 240px;  /* 原 280px */
  
  /* 优化：调整权重比例，给右侧工具栏更多空间 */
  --workspace-side-width: 3fr;   /* 原 4fr - 左侧减少 */
  --workspace-batch-width: 6fr;  /* 原 8fr - 中间减少 */
  --workspace-tools-width: 15fr; /* 原 12fr - 右侧增加 */
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   响应式断点 - 不同屏幕尺寸的布局策略
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 超宽屏 (≥1920px) - 充分利用空间 */
@media (min-width: 1920px) {
  .app-root.review-mode .mx-app-layout,
  .app-root.review-mode .workspace {
    --workspace-side-width: 280px;  /* 固定左侧 */
    --workspace-batch-width: 420px; /* 固定中间 */
    --workspace-tools-width: 1fr;   /* 右侧自动扩展 */
    
    grid-template-columns:
      var(--workspace-side-width)
      var(--workspace-batch-width)
      var(--workspace-tools-width);
  }
}

/* 标准宽屏 (1440px ~ 1919px) - 平衡分配 */
@media (min-width: 1440px) and (max-width: 1919px) {
  .app-root.review-mode .mx-app-layout,
  .app-root.review-mode .workspace {
    --workspace-side-width: 2.5fr;
    --workspace-batch-width: 5.5fr;
    --workspace-tools-width: 16fr;
  }
}

/* 中等宽屏 (1200px ~ 1439px) - 微调比例 */
@media (min-width: 1200px) and (max-width: 1439px) {
  .app-root.review-mode .mx-app-layout,
  .app-root.review-mode .workspace {
    --workspace-side-width: 2fr;
    --workspace-batch-width: 5fr;
    --workspace-tools-width: 13fr;
  }
}

/* 较窄屏幕 (1000px ~ 1199px) - 压缩左侧 */
@media (min-width: 1000px) and (max-width: 1199px) {
  .app-root.review-mode .mx-app-layout,
  .app-root.review-mode .workspace {
    --workspace-side-min: 180px;
    --workspace-batch-min: 300px;
    
    --workspace-side-width: 1.8fr;
    --workspace-batch-width: 4.5fr;
    --workspace-tools-width: 12fr;
  }
}

/* 窄屏 (900px ~ 999px) - 两栏布局（隐藏历史） */
@media (min-width: 900px) and (max-width: 999px) {
  .app-root.review-mode .mx-app-layout,
  .app-root.review-mode .workspace {
    grid-template-columns:
      minmax(280px, 5fr)
      minmax(240px, 18fr);
  }
  
  /* 隐藏左侧历史栏，释放空间 */
  .workspace-side {
    display: none;
  }
  
  /* 批次区域扩展 */
  .workspace-panel-batch {
    min-width: 280px;
  }
}

/* 移动/平板竖屏 (<900px) - 单栏堆叠 */
@media (max-width: 899px) {
  .app-root.review-mode .mx-app-layout,
  .app-root.review-mode .workspace {
    display: flex !important;
    flex-direction: column;
    gap: var(--review-gap);
  }
  
  .workspace-side,
  .workspace-panel-batch,
  .workspace-panel-tools {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  
  /* 左侧历史栏变为顶部紧凑展示 */
  .workspace-side {
    max-height: 120px;
    overflow-y: auto;
  }
  
  /* 批次列表可滚动 */
  .workspace-panel-batch {
    max-height: 40vh;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   组件级优化 - 内部元素自适应
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 批次卡片 - 更合理的宽度利用 */
.batch-check-row {
  width: 100%;
  min-width: 0;
}

.batch-check-main {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

/* 字段展示 - 自适应截断 */
.batch-slot-value,
.batch-check-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 顶部进度条 - 小屏幕优化 */
@media (max-width: 1100px) {
  .mx-app-progress .header-progress-flow {
    gap: 2px;
  }
  
  .pipeline-h-step-label {
    font-size: 11px;
  }
}

/* 工具栏按钮 - 响应式排列 */
.workspace-batch-actions,
.batch-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workspace-batch-actions .btn,
.batch-list-toolbar .btn {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .workspace-batch-actions .btn,
  .batch-list-toolbar .btn {
    min-width: 80px;
    font-size: calc(var(--review-fs) - 1px);
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   微调优化 - 间距和留白
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 减少不必要的内边距 */
@media (min-width: 1440px) {
  .app-root.review-mode .mx-app-layout,
  .app-root.review-mode .workspace {
    --review-panel-pad: 14px; /* 原 16px */
  }
}

/* 批次列表更紧凑 */
.batch-check-list {
  gap: 6px; /* 原 8px */
}

/* 面板标题区域优化 */
.workspace-panel-head {
  padding: 10px 12px; /* 减少垂直padding */
}

/* 历史列表项间距 */
.hist-list {
  gap: 4px; /* 原 6px */
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   拖拽调整支持增强
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 拖拽手柄更明显 */
.workspace-side-resize-handle,
.workspace-batch-resize-handle {
  transition: background 0.15s;
}

.workspace-side-resize-handle:hover,
.workspace-batch-resize-handle:hover {
  background: rgba(59, 130, 246, 0.15) !important;
}

.workspace-side-resize-handle:active,
.workspace-batch-resize-handle:active {
  background: rgba(59, 130, 246, 0.25) !important;
}

/* 拖拽时的视觉反馈 */
.workspace.is-resizing {
  user-select: none;
  cursor: col-resize;
}

.workspace.is-resizing * {
  cursor: col-resize !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   性能优化 - GPU 加速
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.workspace-side,
.workspace-panel-batch,
.workspace-panel-tools {
  will-change: width;
  transform: translateZ(0);
}

/* 滚动性能优化 */
.workspace-panel-scroll,
.batch-check-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}