/* =========================
   NC 在线工具 - 视觉增强（无需改模板）
   Bootstrap 5 覆盖 + 更明显的版式提升
   ========================= */

:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;

  --primary:#2563eb;
  --primary-2:#1d4ed8;
  --danger:#dc2626;
  --warning:#f59e0b;
  --success:#16a34a;
  --info:#0284c7;

  --radius:16px;
  --shadow:0 16px 40px rgba(15, 23, 42, .10);
  --shadow-sm:0 10px 24px rgba(15, 23, 42, .10);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg) !important;
  color:var(--text);
  font:14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
}

/* ====== 顶部导航：更干净、更像产品 ====== */
.navbar{
  background:#0f172a !important;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.navbar-brand{
  font-weight:900 !important;
  letter-spacing:.3px;
}
.nav-link{
  color:#e5e7eb !important;
  border-radius:14px;
  padding:.45rem .75rem !important;
}
.nav-link:hover{
  background:rgba(255,255,255,.08);
}
.navbar-text{
  color:#e5e7eb !important;
}

/* ====== 版心 & 内容区：白卡片承载 ====== */
.container{
  max-width:1200px !important;
}

.container.my-4{
  margin-top:18px !important;
  margin-bottom:26px !important;
  padding:18px !important;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* 标题更有层级 */
h1,h2,h3,h4{
  letter-spacing:.2px;
}
h1{font-size:20px}
h2{font-size:18px}
h3{font-size:16px}
h4{font-size:15px}

/* ====== 卡片统一 ====== */
.card{
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-sm) !important;
}
.card-header{
  background:transparent !important;
  border-bottom:1px solid var(--line) !important;
  font-weight:900;
}
.card-body{
  padding:18px !important;
}

/* ====== 表单：更像“工业配置面板” ====== */
.form-label{font-weight:800}
.form-control, input[type="text"], input[type="number"], input[type="file"], select, textarea{
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  padding:.58rem .75rem !important;
  outline:none !important;
  box-shadow:none !important;
  background:#fff !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus{
  border-color:rgba(37,99,235,.55) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.14) !important;
}

/* ====== 按钮：更厚实、更明确 ====== */
.btn{
  border-radius:14px !important;
  padding:.58rem .95rem !important;
  font-weight:900 !important;
}
.btn-primary{
  background:var(--primary) !important;
  border-color:var(--primary) !important;
  box-shadow:0 12px 20px rgba(37,99,235,.18);
}
.btn-primary:hover{
  background:var(--primary-2) !important;
  border-color:var(--primary-2) !important;
}
.btn-outline-secondary{
  border-color:rgba(107,114,128,.35) !important;
}
.btn-danger{
  background:var(--danger) !important;
  border-color:var(--danger) !important;
}
.btn-lg{
  padding:.72rem 1.1rem !important;
  border-radius:16px !important;
}

/* ====== Flash 提示：更像车间报警条（但不需要关闭按钮） ====== */
.alert{
  border-radius:16px !important;
  border:1px solid transparent !important;
  box-shadow:var(--shadow-sm);
  padding:.85rem 1rem !important;
  font-weight:900;
}
.alert-danger, .alert-error{
  background:rgba(220,38,38,.10) !important;
  border-color:rgba(220,38,38,.22) !important;
  color:#991b1b !important;
}
.alert-success{
  background:rgba(22,163,74,.10) !important;
  border-color:rgba(22,163,74,.22) !important;
  color:#166534 !important;
}
.alert-warning{
  background:rgba(245,158,11,.12) !important;
  border-color:rgba(245,158,11,.25) !important;
  color:#92400e !important;
}
.alert-info{
  background:rgba(2,132,199,.10) !important;
  border-color:rgba(2,132,199,.22) !important;
  color:#075985 !important;
}

/* ====== 表格：更紧凑、更清晰（孔参数页立刻明显变化） ====== */
.table{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  margin-bottom:0;
}
.table thead th{
  background:#eef2ff !important;
  border-bottom:1px solid var(--line) !important;
  color:#111827 !important;
  font-weight:900;
  white-space:nowrap;
  padding:.65rem .7rem !important;
}
.table td, .table th{
  border-color:var(--line) !important;
  vertical-align:middle !important;
  padding:.52rem .7rem !important;
}
.table tbody tr:hover{
  background:rgba(37,99,235,.05) !important;
}

/* 超宽表：滚动更好用 */
.table-responsive{
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow-sm);
  padding:10px;
}
.table-responsive::-webkit-scrollbar{height:12px}
.table-responsive::-webkit-scrollbar-thumb{
  background:rgba(17,24,39,.25);
  border-radius:10px;
}
.table-responsive::-webkit-scrollbar-track{
  background:rgba(17,24,39,.06);
  border-radius:10px;
}

/* 表格内输入更紧凑 */
.table input[type="text"],
.table input[type="number"]{
  padding:.38rem .55rem !important;
  border-radius:12px !important;
  min-width:72px;
}

/* 13 模块：textarea 像编辑器 */
textarea{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size:13px !important;
  line-height:1.55 !important;
}

/* ====== 表格增强：固定表头（孔加工参数专用） ====== */
.table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* 第一列（删除勾选）稍微收紧 */
.table th:first-child,
.table td:first-child{
  width: 56px;
  text-align: center;
}

/* 第二列（孔规格）更醒目，避免看串 */
.table th:nth-child(2),
.table td:nth-child(2){
  font-weight: 900;
  background: #f8fafc;
  position: sticky;
  left: 0;
  z-index: 1;
}

/* 表头第二列层级再高一点 */
.table thead th:nth-child(2){
  z-index: 3;
}

/* ====== 修复：sticky 失效原因是 .table overflow:hidden ====== */
.table{
  overflow: visible !important;  /* 让 sticky 生效 */
}

/* 圆角交给外层容器（你有 table-responsive 时） */
.table-responsive{
  overflow: auto !important;
  border-radius: 16px !important;
}

/* 固定表头 */
.table thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: #eef2ff !important; /* 必须有背景，否则叠在下面会透 */
}

/* 固定第二列（孔规格） */
.table th:nth-child(2),
.table td:nth-child(2){
  position: sticky !important;
  left: 0 !important;
  z-index: 4 !important;
  background: #f8fafc !important;
  font-weight: 900 !important;
}

/* 表头第二列层级更高，避免被盖住 */
.table thead th:nth-child(2){
  z-index: 6 !important;
}

/* ====== 让孔参数表区域产生纵向滚动，从而表头固定可见 ====== */
.table-responsive{
  max-height: 520px !important;   /* 你觉得高/低再说 */
  overflow: auto !important;
}

/* ====== 自适应高度：表格区域随窗口变化 ======
   说明：75vh 表示占浏览器高度的 75%，你觉得多/少再调
*/
.table-responsive{
  max-height: 75vh !important;
  overflow: auto !important;
}

/* ====== 宽度自适应：内容区尽量铺满屏幕 ====== */
.container{
  max-width: 98vw !important;     /* 基本全宽 */
}

/* 给左右留一点边距，避免贴边 */
.container.my-4{
  margin-left: auto !important;
  margin-right: auto !important;
  width: 98vw !important;
}

/* 超大屏不至于太夸张（可按你车间屏幕调） */
@media (min-width: 1600px){
  .container{
    max-width: 1550px !important;
  }
  .container.my-4{
    width: 1550px !important;
  }
}

/* ====== 表头全部居中 ====== */
.table thead th{
  text-align: center !important;
  vertical-align: middle !important;
}

/* ====== 第二列（孔规格）宽度收小 20% ======
   说明：之前没设宽度时，浏览器会自适应。这里给一个“最大宽度”限制，
   同时保持不换行，达到“更窄”的效果。
*/
.table th:nth-child(2),
.table td:nth-child(2){
  max-width: 120px !important;   /* 你原来大概 150 左右，这里约缩 20% */
  width: 120px !important;
  white-space: nowrap !important;
}

/* ====== 表格整体收紧约 20%：列宽/间距/输入框统一变窄 ====== */

/* 表头/单元格：减少左右 padding（约 -20%） */
.table thead th{
  padding-left: .56rem !important;   /* 原 .7rem */
  padding-right: .56rem !important;
}
.table td, .table th{
  padding-left: .56rem !important;
  padding-right: .56rem !important;
}

/* 表格字号稍微小一点（约 -10%），整体观感更紧凑 */
.table{
  font-size: 13px !important;
}

/* 表格内输入框：宽度 + 内边距一起缩（约 -20%） */
.table input[type="text"],
.table input[type="number"],
.table select{
  min-width: 58px !important;        /* 原 72px 左右 */
  width: 58px !important;
  padding: .30rem .44rem !important; /* 原 .38 .55 */
  font-size: 13px !important;
}

/* 如果有更宽的输入（比如深度/转速），也统一收紧 */
.table .form-control{
  padding: .30rem .44rem !important;
  font-size: 13px !important;
}

/* 按钮在表格里也收紧一点（避免一列被按钮撑爆） */
.table .btn{
  padding: .38rem .55rem !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}

/* ====== 表格内输入框文字全部居中（含孔规格） ====== */
.table input[type="text"],
.table input[type="number"],
.table select,
.table .form-control{
  text-align: center !important;
}

/* 有些浏览器 number 会右对齐，强制修正 */
.table input[type="number"]{
  text-align: center !important;
}

/* placeholder 也居中（可选） */
.table input::placeholder{
  text-align: center;
}


/* =========================
   用户工作台 UI 优化（不改模板）
   ========================= */

/* 工作台标题更有层级（兼容 h1/h2） */
.container.my-4 h1,
.container.my-4 h2{
  font-weight: 900 !important;
  margin-bottom: 14px !important;
}

/* 两列卡片：拉齐高度、拉开间距 */
.container.my-4 .row{
  --bs-gutter-x: 16px;
  --bs-gutter-y: 16px;
}
.container.my-4 .row > [class*="col"]{
  display: flex;
}
.container.my-4 .row > [class*="col"] > .card{
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 卡片内部排版 */
.container.my-4 .card-body{
  padding: 18px !important;
}
.container.my-4 .card-title{
  font-weight: 900 !important;
  margin-bottom: 10px !important;
}

/* 上传区：文件输入更像“可操作控件” */
.container.my-4 input[type="file"].form-control,
.container.my-4 input[type="file"]{
  padding: .62rem .75rem !important;
  border-radius: 14px !important;
  background: #fff !important;
}

/* 生成按钮更醒目：全宽、大一些 */
.container.my-4 .btn.btn-primary{
  font-size: 15px !important;
  padding: .78rem 1.05rem !important;
  border-radius: 16px !important;
}
.container.my-4 .d-grid .btn{
  width: 100% !important;
}

/* 说明区：段落/列表更清晰 */
.container.my-4 .text-muted,
.container.my-4 small{
  font-size: 13px !important;
}
.container.my-4 ul{
  margin-bottom: 0 !important;
}
.container.my-4 li{
  margin: 6px 0 !important;
}

/* 右侧说明卡：更“说明面板”风格 */
.container.my-4 .card{
  border: 1px solid rgba(229,231,235,.9) !important;
}

/* =========================
   工作台：黄金比例拖拽上传区
   ========================= */

.dropzone{
  position: relative;
  display: block;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1.618 / 1;          /* 黄金比例矩形 */
  border-radius: 18px;
  border: 2px dashed rgba(37,99,235,.35);
  background: rgba(37,99,235,.04);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.dropzone:hover{
  border-color: rgba(37,99,235,.60);
  background: rgba(37,99,235,.06);
}

.dropzone.is-dragover{
  border-color: rgba(22,163,74,.65);
  background: rgba(22,163,74,.08);
}

.dropzone__input{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dropzone__center{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
}

.dropzone__hint{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .3px;
  color: #0f172a;
}

.dropzone__filename{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(15,23,42,.70);
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右下角“选择文件” */
.dropzone__choose{
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.88);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

/* ====== 拖拽区再强化：更醒目、更车间友好 ====== */
.dropzone{
  border-width: 3px !important;
  background: rgba(37,99,235,.06) !important;
}
.dropzone__hint{
  font-size: 20px !important;
}
.dropzone__filename{
  margin-top: 12px !important;
  font-weight: 900 !important;
  color: rgba(15,23,42,.78) !important;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 12px;
  padding: 8px 10px;
}
.dropzone__choose{
  font-size: 14px !important;
  padding: 10px 14px !important;
  right: 12px !important;
  bottom: 12px !important;
}

/* ====== 拖拽状态 / 已选择状态：更明确 ====== */
.dropzone.is-dragover{
  border-color: rgba(22,163,74,.80) !important;
  background: rgba(22,163,74,.10) !important;
}

.dropzone.has-file{
  border-color: rgba(22,163,74,.80) !important;
  background: rgba(22,163,74,.08) !important;
}
.dropzone.has-file .dropzone__choose{
  background: rgba(22,163,74,.92) !important;
}

/* ====== 工作台三步条 ====== */
.steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.step{
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
}
.step__num{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(37,99,235,.12);
  color: rgba(37,99,235,1);
}
.step__text{
  font-weight: 900;
  color: rgba(15,23,42,.85);
}
.step.active{
  border-color: rgba(37,99,235,.35);
  background: rgba(37,99,235,.06);
}
@media (max-width: 992px){
  .steps{grid-template-columns:1fr}
}

/* ====== 车间提示行 ====== */
.tipline{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.70);
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.20);
  border-radius: 14px;
  padding: 10px 12px;
}

/* ====== 提示行：生成中绿色状态 ====== */
.tipline.is-working{
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.20);
  color: rgba(22,101,52,.95);
}

/* ====== 右侧规则说明：车间操作卡 ====== */
.rulecard{
  background: rgba(15,23,42,.02);
  border: 1px solid rgba(229,231,235,.95);
  border-radius: 16px;
  padding: 14px 14px;
}
.ruleitem{
  font-size: 13px;
  color: rgba(15,23,42,.78);
  font-weight: 800;
}
.ruleitem .k{
  display: inline-block;
  min-width: 76px;
  color: rgba(15,23,42,.92);
}
.rulegrid{
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.rulepill{
  background: rgba(37,99,235,.06);
  border: 1px solid rgba(37,99,235,.16);
  border-radius: 14px;
  padding: 10px 10px;
  font-weight: 900;
  color: rgba(15,23,42,.85);
}
.hl{
  font-weight: 900;
  color: rgba(37,99,235,1);
}
.hl.danger{
  color: rgba(220,38,38,1);
}
@media (max-width: 992px){
  .rulegrid{grid-template-columns:1fr}
}

/* ====== 默认列：一行横排（大屏），小屏自动换行 ====== */
@media (min-width: 992px){
  .rulegrid{
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  }
  .rulepill{
    text-align: center;
    padding: 10px 6px;
    white-space: nowrap;
  }
}

/* ====== 安全原则：红色提示条 ====== */
.ruleitem .hl.danger{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(220,38,38,.12);
  border: 1px solid rgba(220,38,38,.22);
  color: rgba(220,38,38,1);
}

/* ====== 工作台两张卡同高对齐（大屏） ====== */
@media (min-width: 992px){
  .row.g-3 > .col-lg-5,
  .row.g-3 > .col-lg-7{
    display: flex;
  }
  .row.g-3 > .col-lg-5 > .card,
  .row.g-3 > .col-lg-7 > .card{
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .row.g-3 > .col-lg-5 > .card > .card-body,
  .row.g-3 > .col-lg-7 > .card > .card-body{
    flex: 1;
  }
}

/* ====== 强制同高：右侧卡片底部撑满（大屏） ====== */
@media (min-width: 992px){
  .row.g-3 > .col-lg-7 .card-body::after{
    content: "";
    display: block;
    flex: 1;
  }
  .row.g-3 > .col-lg-7 .card-body{
    display: flex;
    flex-direction: column;
  }
  .row.g-3 > .col-lg-7 .rulecard{
    flex: 1;
  }
}

/* ====== 左侧建议信息条（蓝色） ====== */
.infoline{
  font-size: 13px;
  font-weight: 900;
  color: rgba(30,64,175,.95);
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.20);
  border-radius: 14px;
  padding: 10px 12px;
}
.infoline a{
  font-weight: 900;
}

/* ====== 解决“拖错位置浏览器接管打开文件”：把可拖拽区域做得更大更显眼 ====== */
.dropzone{
  width: 100% !important;
  max-width: none !important;
  border-width: 4px !important;
}

.dropzone::after{
  content: "请把文件拖到蓝色框内（不要拖到浏览器空白/地址栏）";
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(37,99,235,.85);
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(37,99,235,.20);
  border-radius: 999px;
  padding: 6px 10px;
}

.dropzone.is-dragover::after{
  content: "松手即可选择文件";
  color: rgba(22,163,74,.95);
  border-color: rgba(22,163,74,.25);
}

/* ====== 全屏拖拽遮罩提示 ====== */
.dragmask{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(2px);
}
.dragmask.show{ display:block; }
.dragmask__box{
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  width: min(780px, 92vw);
  border-radius: 22px;
  border: 3px dashed rgba(255,255,255,.55);
  background: rgba(255,255,255,.10);
  padding: 18px;
  color: #fff;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.dragmask__title{ font-size: 18px; }
.dragmask__sub{ margin-top: 8px; font-size: 13px; font-weight: 800; opacity: .9; }

/* ====== 遮罩更强：正中大字 + 蓝框聚光灯 ====== */
.dragmask{
  background: rgba(2,6,23,.62) !important;
}
.dragmask__box{
  top: 45% !important;
  transform: translate(-50%, -50%) !important;
  border-width: 4px !important;
  padding: 22px !important;
}
.dragmask__title{ font-size: 22px !important; }
.dragmask__sub{ font-size: 14px !important; }

/* 聚光灯：拖拽时强化 dropzone */
.dropzone.drag-focus{
  transform: scale(1.01);
  box-shadow: 0 0 0 8px rgba(37,99,235,.18), 0 20px 60px rgba(0,0,0,.22) !important;
  border-color: rgba(37,99,235,.95) !important;
  background: rgba(37,99,235,.10) !important;
  animation: dzPulse 1.1s infinite;
}
@keyframes dzPulse{
  0%{ filter: brightness(1); }
  50%{ filter: brightness(1.12); }
  100%{ filter: brightness(1); }
}

/* NAV_ACTIVE_HIGHLIGHT */
.nav-link.active{
  background: rgba(255,255,255,.10) !important;
}

/* 已有页面曾注入 admin-topnav：启用全局顶部导航后隐藏它（避免双导航） */
.admin-topnav{
  display:none !important;
}