/**
 * UI 硬性标准 - 安可 MES
 * 6宫格、头部7按钮、DOCK 7图标、主题与按钮、选中与悬浮高亮 统一规范
 * 引入顺序：theme-unified.css 之后加载本文件
 */

/* ========== 1. 算法页内容区与录入框左右对齐变量 ========== */
:root {
  --algo-content-padding: 20px;
  --algo-dock-height: 80px;
  /* 六宫格：顶部/底部与 DOCK 等距，与按钮间隙一致 */
  --six-grid-vertical-margin: clamp(20px, 3vw, 36px);
  /* PC 标准内容宽：与报价单图1容器一致，所有模块与弹窗统一使用 */
  --pc-content-max-width: min(960px, 96vw);
}

/* ========== 2. 头部 7 按钮：与录入框左右边缘对齐并均分，压缩上下留白 ========== */
.algo-header-nav {
  width: 100%;
  padding: 6px var(--algo-content-padding) 10px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: stretch;
  box-sizing: border-box;
}
.algo-header-nav .algo-nav-btn {
  min-width: 0;
  width: 100%;
}

/* ========== 3. 算法页主内容区与录入面板：左右边距与头部一致，压缩上下内边距与行距 ========== */
.board-calc-panel,
.box-panel,
.cabinet-panel,
.ltuz-panel {
  padding-left: var(--algo-content-padding);
  padding-right: var(--algo-content-padding);
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
body.algo-page .calc-row,
body.algo-page .box-row,
body.algo-page .cabinet-row,
body.algo-page .ltuz-row,
body.algo-page .freight-row {
  margin-bottom: 6px !important;
}
body.algo-page .algo-btns {
  margin-top: 8px !important;
}
body.algo-page .freight-panel {
  margin-top: 12px !important;
}
/* 数量+主材+颜色备注：标签与输入框紧靠，组间加大间距；与 row-dims 输入框左对齐 */
.calc-row[data-layout-id="row-material"],
.box-row[data-layout-id="row-material"],
.cabinet-row[data-layout-id="row-material"],
.ltuz-row[data-layout-id="row-material"] {
  flex-wrap: nowrap !important;
  gap: 0 !important;
}
.calc-row[data-layout-id="row-material"] label,
.box-row[data-layout-id="row-material"] label,
.cabinet-row[data-layout-id="row-material"] label,
.ltuz-row[data-layout-id="row-material"] label {
  margin-right: 6px;
  min-width: 58px;
  flex-shrink: 0;
}
.calc-row[data-layout-id="row-material"] input[type="number"],
.calc-row[data-layout-id="row-material"] select,
.box-row[data-layout-id="row-material"] input[type="number"],
.box-row[data-layout-id="row-material"] select,
.cabinet-row[data-layout-id="row-material"] input[type="number"],
.cabinet-row[data-layout-id="row-material"] select,
.ltuz-row[data-layout-id="row-material"] input[type="number"],
.ltuz-row[data-layout-id="row-material"] select {
  margin-right: 16px;
}
.calc-row[data-layout-id="row-material"] .calc-color-remark,
.box-row[data-layout-id="row-material"] .box-remark,
.cabinet-row[data-layout-id="row-material"] .cabinet-remark,
.ltuz-row[data-layout-id="row-material"] .ltuz-remark {
  margin-right: 0;
  margin-left: 0;
}
/* row-material：主材、板厚、颜色备注；板厚输入框宽 80px 与 row-dims 一致 */
.calc-row[data-layout-id="row-material"] input[type="number"],
.box-row[data-layout-id="row-material"] input[type="number"],
.cabinet-row[data-layout-id="row-material"] input[type="number"],
.ltuz-row[data-layout-id="row-material"] input[type="number"] {
  width: 80px !important;
  min-width: 80px !important;
}
/* row-qty：数量单独一行，数量框宽 80px 与 row-dims 第一列左对齐 */
.calc-row[data-layout-id="row-qty"],
.box-row[data-layout-id="row-qty"],
.cabinet-row[data-layout-id="row-qty"],
.ltuz-row[data-layout-id="row-qty"] {
  flex-wrap: nowrap !important;
  gap: 0 !important;
}
.calc-row[data-layout-id="row-qty"] label,
.box-row[data-layout-id="row-qty"] label,
.cabinet-row[data-layout-id="row-qty"] label,
.ltuz-row[data-layout-id="row-qty"] label {
  margin-right: 6px;
  min-width: 58px;
  flex-shrink: 0;
}
.calc-row[data-layout-id="row-qty"] input[type="number"],
.box-row[data-layout-id="row-qty"] input[type="number"],
.cabinet-row[data-layout-id="row-qty"] input[type="number"],
.ltuz-row[data-layout-id="row-qty"] input[type="number"] {
  width: 80px !important;
  min-width: 80px !important;
}
/* 颜色备注：保证始终可显示、可点击，最小宽度 100px；最长与主材框同宽（176px） */
.calc-row[data-layout-id="row-material"] .calc-color-remark,
.box-row[data-layout-id="row-material"] .box-remark,
.cabinet-row[data-layout-id="row-material"] .cabinet-remark,
.ltuz-row[data-layout-id="row-material"] .ltuz-remark {
  flex: 1 1 auto !important;
  min-width: 100px !important;
  width: auto !important;
  max-width: 176px !important;
}
/* 全屏/大屏：颜色备注与主材选择框同宽（176px） */
@media (min-width: 1280px) {
  .calc-row[data-layout-id="row-material"] .calc-color-remark,
  .box-row[data-layout-id="row-material"] .box-remark,
  .cabinet-row[data-layout-id="row-material"] .cabinet-remark,
  .ltuz-row[data-layout-id="row-material"] .ltuz-remark {
    flex: 0 0 auto !important;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
  }
}

/* 录入区最小宽度优先，避免被缩略图挤压导致数量主材颜色备注行被盖住 */
.board-calc-panel-main,
.box-panel-main,
.cabinet-panel-main,
.ltuz-panel-main {
  min-width: 280px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 格子行（柜子）：横竖输入框统一宽度 */
.cabinet-row[data-layout-id="row-grid"] {
  flex-wrap: nowrap !important;
}
.cabinet-row[data-layout-id="row-grid"] input[type="number"] {
  width: 80px;
  min-width: 80px;
  box-sizing: border-box;
}

/* 缩略图：固定缩小尺寸，优先保证录入区（主材/板厚/颜色备注）可显示与点击；4:3 比例 */
@media (min-width: 768px) {
  .board-calc-panel-main, .box-panel-main, .cabinet-panel-main, .ltuz-panel-main {
    flex: 1 1 auto !important; /* 录入区优先占满剩余空间，不被缩略图挤压 */
  }
  .board-calc-thumb-wrap, .box-calc-thumb-wrap, .cabinet-calc-thumb-wrap, .ltuz-thumb-wrap {
    flex: 0 0 auto !important;
    width: 160px !important;
    height: 120px !important; /* 4:3 固定缩小 */
  }
  .board-calc-thumb-wrap canvas, .box-calc-thumb-wrap canvas, .cabinet-calc-thumb-wrap canvas, .ltuz-thumb-wrap canvas { width: 100%; height: 100%; }
}
@media (min-width: 1000px) {
  .board-calc-thumb-wrap, .box-calc-thumb-wrap, .cabinet-calc-thumb-wrap, .ltuz-thumb-wrap {
    width: 180px !important;
    height: 135px !important; /* 4:3 */
  }
}
@media (min-width: 1280px) {
  .board-calc-thumb-wrap, .box-calc-thumb-wrap, .cabinet-calc-thumb-wrap, .ltuz-thumb-wrap {
    width: 200px !important;
    height: 150px !important; /* 4:3 */
  }
}
@media (min-width: 1600px) {
  .board-calc-thumb-wrap, .box-calc-thumb-wrap, .cabinet-calc-thumb-wrap, .ltuz-thumb-wrap {
    width: 220px !important;
    height: 165px !important; /* 4:3 */
  }
}

/* ========== 3.1 无计算结果时不显示结果区黑框（仅在有内容时显示） ========== */
.calc-result:empty,
.box-result:empty,
.cabinet-result:empty,
.ltuz-result:empty {
  display: none !important;
}

/* ========== 4. 底部 DOCK 预留 + 顶部状态栏安全区 ========== */
body.algo-page,
body.algo-page .wrap {
  padding-bottom: var(--algo-dock-height);
  box-sizing: border-box;
}
/* 手机 App/PWA：顶部 padding 用 safe-area-inset-top 避开信号/电量状态栏 */
body.algo-page {
  padding-top: max(28px, env(safe-area-inset-top)) !important;
}

/* ========== 5. 字体：使用 ui-font-standards 变量，保证四拆单一致 ========== */
body.algo-page,
.board-calc-panel,
.box-panel,
.cabinet-panel,
.ltuz-panel,
.freight-panel {
  font-size: var(--ui-font-size-content, 14px);
}
body.algo-page .calc-row label,
body.algo-page .box-row label,
body.algo-page .cabinet-row label,
body.algo-page .ltuz-row label,
body.algo-page .freight-row label {
  font-size: var(--ui-font-size-content, 14px);
}
body.algo-page .calc-group-label,
body.algo-page .box-group-label,
body.algo-page .cabinet-group-label,
body.algo-page .ltuz-group-label {
  font-size: var(--ui-font-size-content, 14px);
}
@media (max-width: 768px) {
  body.algo-page .calc-row label, body.algo-page .box-row label, body.algo-page .cabinet-row label, body.algo-page .ltuz-row label, body.algo-page .freight-row label { font-size: var(--ui-font-size-content, 14px) !important; }
}
@media (max-width: 480px) {
  body.algo-page, .board-calc-panel, .box-panel, .cabinet-panel, .ltuz-panel { font-size: var(--ui-font-size-content, 14px) !important; }
}

/* ========== 5.1 手机竖屏：主材行允许换行防溢出，颜色备注独占一行 ========== */
@media (max-width: 480px) {
  .calc-row[data-layout-id="row-material"],
  .box-row[data-layout-id="row-material"],
  .cabinet-row[data-layout-id="row-material"],
  .ltuz-row[data-layout-id="row-material"] {
    flex-wrap: wrap !important;
  }
  .calc-row[data-layout-id="row-material"] .calc-color-remark,
  .box-row[data-layout-id="row-material"] .box-remark,
  .cabinet-row[data-layout-id="row-material"] .cabinet-remark,
  .ltuz-row[data-layout-id="row-material"] .ltuz-remark {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ========== 6. 窄屏下头部 7 按钮仍均分、与录入框对齐 ========== */
@media (max-width: 768px) {
  .algo-header-nav {
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding-left: var(--algo-content-padding);
    padding-right: var(--algo-content-padding);
  }
}
@media (max-width: 480px) {
  .algo-header-nav {
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding-left: var(--algo-content-padding);
    padding-right: var(--algo-content-padding);
  }
  .algo-header-nav .algo-nav-btn { padding: 0 6px; font-size: 12px; }
}

/* ========== 7. 默认无下滚条：矮屏下进一步收紧（以柜子默认拆单为参考，底7图标以上见全） ========== */
@media (max-height: 800px) {
  body.algo-page .board-calc-panel,
  body.algo-page .box-panel,
  body.algo-page .cabinet-panel,
  body.algo-page .ltuz-panel {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  body.algo-page .calc-row,
  body.algo-page .box-row,
  body.algo-page .cabinet-row,
  body.algo-page .ltuz-row,
  body.algo-page .freight-row {
    margin-bottom: 4px !important;
  }
  body.algo-page .algo-btns { margin-top: 6px !important; }
}
@media (max-height: 700px) {
  body.algo-page .board-calc-panel,
  body.algo-page .box-panel,
  body.algo-page .cabinet-panel,
  body.algo-page .ltuz-panel {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  body.algo-page .calc-row,
  body.algo-page .box-row,
  body.algo-page .cabinet-row,
  body.algo-page .ltuz-row,
  body.algo-page .freight-row {
    margin-bottom: 3px !important;
  }
  body.algo-page .algo-btns { margin-top: 4px !important; }
}

/* ========== 8. DOCK 7 图标：苹果 Dock 式悬停上浮（与 theme-unified 一致，此处仅作规范引用） ========== */
/* 见 theme-unified.css .global-footer-nav 及 .menu2-actions 相关规则 */