/* ============================================================================
   商机详细页 v5 —— 布局自适应 / 自绘日期控件 / 节假日标注 / 移动端浮动新建入口
   ----------------------------------------------------------------------------
   单独成文件的原因：Tailwind 产物 CSS（index-ui2-*.css）只包含「按需生成」的类，
   而 .input / .btn-* 等既有规则要沿用；只有在它之后追加一份样式表，
   才能既复用旧类、又让新增的 .ns-* 规则生效。
   本文件加载在 index-ui2-*.css 之后，同名属性覆盖后者。
   ⚠️ 文件名带内容哈希，服务端据此返回 immutable 强缓存 —— 改了内容必须一起改名。
   ========================================================================= */

/* ------------------------- R8：字段按内容自适应宽度 ------------------------- */
/* 原先每格都是 fr 网格，被行宽拉伸：数字框空出 200px、下拉空出 240px。
   改为 flex 换行 + 每格按内容定宽，同一行的框体紧邻排列。 */
.ns-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 20px;
  min-width: 0;
}

.ns-f {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  max-width: 100%;
  min-width: 0;
}

/* 第一行：金额 / 优先级 / 公示 */
.ns-f-budget { width: 248px; }
.ns-f-priority { width: 224px; }
.ns-f-publicity { width: auto; align-items: flex-start; }

/* 第二行：客户单位 / 行业经理 / 项目阶段 */
.ns-f-customerName { width: 368px; }
.ns-f-owner_name { width: 296px; }
.ns-f-status { width: 264px; }

/* 第四行：四个日期 */
.ns-f-startDate,
.ns-f-bidDate,
.ns-f-deliveryDate,
.ns-f-updatedAt { width: 240px; }

/* 第三行：项目内容 —— 吃掉本行剩余宽度；标签与首行文字对齐 */
.ns-f-projectOverview {
  flex: 1 1 340px;
  width: auto;
  min-width: 280px;
  align-items: flex-start;
}
.ns-f-projectOverview > label { padding-top: .375rem; }

/* ------------------------------ R2：金额无上下箭头 ------------------------------ */
/* input[type=number] 的原生上下箭头在窄框里既挤又容易误点 */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* --------------------------- R1：顶部商机名称编辑按钮 --------------------------- */
.ns-name-edit {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgb(229 231 235);
  border-radius: 6px;
  background: #fff;
  color: rgb(156 163 175);
  cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s;
}
.ns-name-edit:hover {
  background: rgb(239 246 255);
  border-color: rgb(191 219 254);
  color: rgb(37 99 235);
}

.ns-name-input {
  width: auto;
  min-width: 200px;
  max-width: min(440px, 42vw);
  padding-top: .3rem;
  padding-bottom: .3rem;
  font-size: .875rem;
}

/* ------------------------- R7：日期选择弹窗向右弹出 ------------------------- */
/* 原生 input[type=date] 的日历面板由浏览器渲染，无法用 CSS 控制方向；
   这里改为自绘面板：默认贴在输入框右侧展开，右侧空间不足（手机）时
   才退回下方右对齐，避免跑出屏幕。 */
.ns-cal {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.ns-cal-inline { width: auto; }

.ns-cal-input {
  padding-right: 24px;
  cursor: pointer;
}

.ns-cal-ico {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-flex;
  transform: translateY(-50%);
  color: rgb(156 163 175);
  cursor: pointer;
}
.ns-cal-ico:hover { color: rgb(37 99 235); }

.ns-cal-pop {
  position: absolute;
  z-index: 70;
  width: 252px;
  padding: 10px 10px 8px;
  border: 1px solid rgb(229 231 235);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
  text-align: left;
}
.ns-cal-pop-side { top: -4px; left: calc(100% + 10px); right: auto; }
.ns-cal-pop-below { top: calc(100% + 6px); left: auto; right: 0; }
/* 锚点贴近视口底部时向上展开：由 bundle 的 openIt 判定后挂 -above 类。
   下方不足而上方有余量时向上弹，用户不用先把页面滚到底。 */
.ns-cal-pop-above { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }

.ns-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ns-cal-title { font-size: 12px; font-weight: 600; color: rgb(55 65 81); }
.ns-cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgb(229 231 235);
  border-radius: 6px;
  background: #fff;
  color: rgb(107 114 128);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.ns-cal-nav:hover { background: rgb(243 244 246); color: rgb(37 99 235); }

.ns-cal-week,
.ns-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ns-cal-week { margin-bottom: 2px; }
.ns-cal-week span { text-align: center; font-size: 10px; color: rgb(156 163 175); }

.ns-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgb(55 65 81);
  font-size: 12px;
  cursor: pointer;
}
.ns-cal-day:hover { background: rgb(239 246 255); color: rgb(37 99 235); }
.ns-cal-day.is-today { box-shadow: inset 0 0 0 1px rgb(191 219 254); }
.ns-cal-day.is-on { background: rgb(37 99 235); color: #fff; }
.ns-cal-blank { height: 24px; }

.ns-cal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgb(243 244 246);
}
.ns-cal-act {
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgb(37 99 235);
  font-size: 11px;
  cursor: pointer;
}
.ns-cal-act:hover { background: rgb(239 246 255); }

/* ------------------- R9：日历标注法定假期与调休上班日 ------------------- */
/* 数据来自 /assets/holidays-v1.js（window.NS_HOLIDAYS，逐年更新只需换该文件）。
   口径：休 = 法定节假日放假（含春节/国庆等连休）与自然周末；班 = 调休上班日。
   日期粒度到天后，用户是按天选时机的，所以"这天到底上不上班"必须能一眼看到。 */
.ns-cal-day { position: relative; }
.ns-cal-day.is-hol { color: rgb(185 28 28); }
.ns-cal-day.is-hol:hover { background: rgb(254 226 226); color: rgb(185 28 28); }
.ns-cal-day.is-work { color: rgb(180 83 9); }
.ns-cal-day.is-work:hover { background: rgb(254 243 199); color: rgb(180 83 9); }

.ns-cal-tag {
  position: absolute;
  top: 0;
  right: 1px;
  font-size: 8px;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  pointer-events: none;
}
.ns-cal-tag-weekend { color: rgb(148 163 184); }
.ns-cal-tag-holiday { color: rgb(220 38 38); }
.ns-cal-tag-work { color: rgb(217 119 6); }

/* 选中态必须压过上面的假期配色，所以在它之后重新声明一次 */
.ns-cal-day.is-on,
.ns-cal-day.is-on:hover { background: rgb(37 99 235); color: #fff; }
.ns-cal-day.is-on .ns-cal-tag { color: rgba(255, 255, 255, 0.88); }

.ns-cal-note {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.35;
  color: rgb(107 114 128);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ns-cal-legend { margin-right: auto; font-size: 10px; color: rgb(148 163 184); }

/* --------------------------------- 窄屏 --------------------------------- */
/* 手机上没有"右侧"可用空间，统一改为每格独占一行、日历落回下方右对齐 */
@media (max-width: 767px) {
  .ns-fields { gap: 10px; }
  .ns-f { width: 100%; }
  .ns-f-projectOverview { min-width: 0; }
  /* 窄屏：弹层固定 252px，而锚点常比它窄（行内日历被 flex 压到 ~160px，
   待办行前面还有「截止」标签）。此时继续右对齐会把弹层左缘顶出屏幕
   （实测 left:-57px，左侧日期与星期列被裁掉且点不到），故统一改为左对齐。
   锚点左缘 36~64px + 252px 仍在 390px 视口内。 */
  .ns-cal-pop-side,
  .ns-cal-pop-below { top: calc(100% + 6px); left: 0; right: auto; }
  .ns-cal-pop-above { bottom: calc(100% + 6px); left: 0; right: auto; }
}


/* ============================================================================
   R10 · 移动端「新建」浮动入口（商机列表页）
   ----------------------------------------------------------------------------
   背景：窄屏（<640px）工具栏里的「新建商机」只剩一个 39x28px 的绿色图标按钮，
   既低于 44px 最小触达尺寸，又贴在右上角 —— 实测 390x844 下 39x28 @ (341,118)，
   是单手最难够到的位置；列表长了还要先滚回顶部。
   改为右下角常驻浮动按钮：高 56px、带文字、位于底部分页栏（45px）之上，
   底边距含 iOS 安全区；窄屏隐藏工具栏原按钮（避免双入口，也让搜索框更宽）。
   断点与产物既有 `hidden sm:inline` 一致：<640px 浮动按钮，>=640px 工具栏按钮。
   ========================================================================= */
:root {
  --ns-fab-h: 56px;
  --ns-fab-gap: 12px;
  --ns-fab-side: 16px;
}

.ns-fab { display: none; }

@media (max-width: 639.98px) {
  /* 工具栏里的同功能按钮在窄屏收起，只留浮动入口 */
  .ns-newbar { display: none !important; }

  /* 列表底部占位：保证最后一张卡片的按钮能滚到浮动按钮上方，不被压住 */
  .ns-fab-space {
    height: calc(var(--ns-bottombar-h, 45px) + var(--ns-fab-gap) + var(--ns-fab-h) + 16px);
  }

  .ns-fab {
    position: fixed;
    z-index: 20; /* 与底部分页栏同级；抽屉遮罩 30 / 弹窗 50 / 通知 60 都能盖住它 */
    right: var(--ns-fab-side);
    bottom: calc(var(--ns-bottombar-h, 45px) + var(--ns-fab-gap) + env(safe-area-inset-bottom, 0px));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ns-fab-h);
    padding: 0 20px 0 16px;
    border: 0;
    border-radius: 9999px;
    background: #10b981; /* 与 .btn-success 同色 */
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    /* 阴影兼顾「浮起感」与低端机合成成本（不用 filter/backdrop-filter） */
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35), 0 2px 6px rgba(15, 23, 42, 0.18);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.12s ease-out, background-color 0.15s;
  }

  .ns-fab-ico { width: 20px; height: 20px; flex: none; }
  .ns-fab-txt { letter-spacing: 0.02em; white-space: nowrap; }
  .ns-fab:active { background: #047857; transform: scale(0.96); }
  .ns-fab:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }

  /* 登录提交按钮：产物里实测只有 35px 高，低于 iOS 44px 最小触达尺寸 */
  .ns-login-submit { min-height: 48px; font-size: 15px; }
}