/* 新建客户档案弹层样式(工作台 / 测色模块共用)。
   配套脚本 assets/case-create.js 会把弹层 DOM 注入页面。 */

/* 弹层遮罩：对齐首页「注册」弹层的浅色蒙层规范（Design-v1.1 §6） */
.create-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(51, 51, 51, .28);
}

.create-modal[hidden] {
  display: none;
}

/* 弹层卡片：圆角 16px + 玻璃质感 + 柔和藏蓝投影，与注册弹层一致 */
.create-card {
  position: relative;
  width: min(720px, 100%);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 16px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 24px 70px rgba(40, 55, 70, .18);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
}

/* 定高弹层：撑满窗口高度（上下各留 24px 遮罩内边距），头部固定、表单区滚动。
   图片多的时候卡片高度不再随内容伸缩，弹层位置也就不会跳。
   只用于带图片列表的两个弹层（新建档案 / 工作台档案编辑）。 */
.create-card-tall {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);
}

.create-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 24px 18px;
}

.create-card-tall .create-card-head {
  flex: 0 0 auto;
}

.create-form {
  padding: 4px 24px 24px;
}

/* 表单 = 可滚动主体 + 固定页脚。页脚在滚动区**之外**，因此不需要任何背景去
   遮挡从底下穿过的内容 —— 半透明卡片上加白色底会明显是一条白带。 */
.create-card-tall .create-form {
  flex: 1 1 auto;
  min-height: 0;      /* 允许 flex 子项收缩到内容以下，否则 overflow 不生效 */
  display: flex;
  flex-direction: column;
}

.create-card-tall .create-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* overflow-y:auto 会同时建立横向裁切区。给滚动内容留出与 focus 光环
     等宽的安全边距，再用负 margin 抵消布局变化，避免输入框聚焦外环被切掉。 */
  padding: 4px;
  margin: -4px;
  /* 滚到头之后不把滚动传给身后的页面(页面滚动同时由 JS 锁住) */
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.create-card-tall .form-actions {
  flex: 0 0 auto;
  margin-top: 16px;
}

/* 上方字段固定高度，只让图片区吃掉剩余空间 */
.create-card-tall .create-form-body > .form-row {
  flex: 0 0 auto;
}

/* 图片区撑满剩余高度：列表按内容占位，虚线拖拽框吃掉余下的空间。
   图片多到需要滚动时，拖拽框收回到自身 min-height，不再抢占。 */
/* 选择器要盖过后面的 .create-card .field{margin-bottom:16px}：底部间距只留给
   页脚的 margin-top，两处叠加会把虚线框和按钮拉得太开 */
.create-card-tall .create-form-body > .field-images {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
}

.create-card-tall .field-images .img-list {
  flex: 0 0 auto;
}

.create-card-tall .field-images .file-drop {
  flex: 1 1 auto;
}

/* 表单字段：字号/字重/间距对齐注册弹层的 .reset-field */
/* 右列(档案号/性别)固定宽度，左列(名字/年龄)填充剩余；
   minmax(0,1fr) 防止年龄快速选择条的内容宽度把左列撑开 */
.create-card .form-row {
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
}

.create-card .field {
  margin-bottom: 16px;
}

.create-card .field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--sub);
  margin-bottom: 8px;
}

/* 输入框：高度 50 / 圆角 12 / 内边距对齐 .reset-input（聚焦态沿用 .reso-app 藏蓝外环） */
.create-card .input {
  height: 50px;
  border-radius: 12px;
  padding: 0 15px;
  font-size: 14px;
}

.create-card select.input {
  padding-right: 12px;
}

/* 档案号：原位编辑——同一个输入框，未聚焦时呈文本态、悬停虚线提示可编辑、
   聚焦后恢复输入框样式；不换 DOM、不上浮，避免高度/位置跳动 */
.create-card #recordNo {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.create-card #recordNo:hover:not(:focus) {
  border: 1px dashed rgba(32, 68, 105, .38);
  background: rgba(255, 255, 255, .6);
}

.create-card #recordNo:focus {
  border: 1px solid var(--acc);
  background: #ffffff;
  transform: none;
}

/* 性别单选：与输入框同高的分段选项，图标 + 文字便于快速点选 */
.sex-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.sex-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.sex-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sex-option-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 50px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
  color: var(--sub);
  font-size: 13px;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}

.sex-option:hover .sex-option-body {
  border-color: rgba(32, 68, 105, .35);
  color: var(--ink);
}

.sex-option input:checked+.sex-option-body {
  border-color: var(--acc);
  background: var(--acc-soft);
  color: var(--acc);
  font-weight: 600;
}

.sex-option input:focus-visible+.sex-option-body {
  box-shadow: 0 0 0 4px rgba(32, 68, 105, .13);
}

/* 年龄快速选择：点击输入框后弹出日历式面板，10×10 覆盖 0~99。
   JS 会把面板提升为 modal 的直接子层，并用 fixed 锚定到输入框；这样它高于
   卡片内的滚动区、图片区和页脚，不再被 create-card 的 overflow 裁切。 */
.age-field {
  position: relative;
}

.age-pop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(10, 34px);
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(40, 55, 70, .18);
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: top left;
  transition: opacity .18s ease, transform .18s ease;
}

.age-pop.is-floating {
  position: fixed;
  top: auto;
  left: auto;
  z-index: 2;
}

.age-pop.is-closing {
  opacity: 0;
  transform: translateY(var(--age-pop-close-y, -6px)) scale(.985);
  pointer-events: none;
}

.age-pop[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .age-pop {
    transition-duration: .01ms;
  }
}

.age-cell {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: rgba(255, 255, 255, .6);
  color: var(--sub);
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.age-cell.blank {
  visibility: hidden;
}

.age-cell:hover {
  border-color: rgba(32, 68, 105, .35);
  color: var(--ink);
}

.age-cell.active {
  border-color: var(--acc);
  background: var(--acc-soft);
  color: var(--acc);
  font-weight: 600;
}

/* RAW 上传：整块区域可点击/拖拽，虚线与提示文字均做了强化 */
.file-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  border: 1.5px dashed rgba(32, 68, 105, .4);
  border-radius: 12px;
  background: var(--card-2);
  padding: 24px 20px;
  text-align: center;
  color: var(--acc);
  transition: border-color .2s ease, background .2s ease;
}

.file-drop:hover,
.file-drop.dragover {
  border-color: var(--acc);
  background: var(--acc-soft);
}

.file-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-drop-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
}

/* 上传进度圆环：上传期间替代图标与提示文字展示 */
.file-drop.uploading .file-drop-icon,
.file-drop.uploading .file-drop-hint {
  display: none;
}

.upload-ring {
  position: relative;
  width: 112px;
  height: 112px;
  margin-bottom: 10px;
}

.upload-ring[hidden] {
  display: none;
}

.upload-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.upload-ring-track {
  fill: none;
  stroke: rgba(32, 68, 105, .14);
  stroke-width: 8;
}

.upload-ring-bar {
  fill: none;
  stroke: var(--acc);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 263.9;
  stroke-dashoffset: 263.9;
  transition: stroke-dashoffset .2s ease;
}

.upload-ring strong {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: var(--acc);
}

/* 上传后的图片处理态：处理中为主信息，上传完成仅作为次要说明 */
.file-drop.uploaded {
  border-color: rgba(32, 68, 105, .4);
  background: rgba(32, 68, 105, .055);
}

.file-drop.uploaded .file-drop-icon {
  display: none;
}

.file-drop.uploaded .file-drop-hint {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--dim);
}

.file-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.file-done[hidden] {
  display: none;
}

.file-done-icon {
  width: 46px;
  height: 46px;
  color: var(--acc);
  animation: file-processing-spin 1s linear infinite;
  transform-origin: center;
}

.file-processing-track {
  opacity: .18;
}

.file-processing-bar {
  stroke-width: 2.2;
}

@keyframes file-processing-spin {
  to { transform: rotate(360deg); }
}

.file-done-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--acc);
}

.file-done-name {
  max-width: 100%;
  font-size: 13px;
  font-weight: 500;
  color: var(--sub);
  word-break: break-all;
}

@media (prefers-reduced-motion: reduce) {
  .file-done-icon { animation: none; }
}

.file-drop-hint {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.file-drop-hint em {
  font-style: normal;
  color: var(--acc);
  border-bottom: 1.5px dashed rgba(32, 68, 105, .55);
  padding-bottom: 1px;
}

.file-meta {
  margin-top: 10px;
  min-height: 18px;
  color: var(--dim);
  font-size: 12.5px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.toast {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 240;
  min-width: 260px;
  max-width: 420px;
  border: 1px solid var(--teal);
  border-radius: 10px;
  background: var(--teal-soft);
  color: var(--teal);
  padding: 13px 15px;
  font-size: 13px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
}

.toast[hidden] {
  display: none;
}

.reso-app .create-form .btn:disabled,
.reso-app .create-form .btn:disabled:hover {
  opacity: .58;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* ── 工作台欢迎页：展示牙色测定流程图 ────────────────────
   流程图为 16:9 长图，卡片比常规弹层更宽；纵向空间不足时
   图片区自身滚动，头部与底部操作条始终可见。 */

/* 进出场：遮罩淡入淡出 + 卡片由小放大 / 由大缩小。
   初始态写在基础类上，.is-open 由脚本在 hidden 撤销后的下一帧加上，
   否则元素刚从 display:none 出来，过渡不会触发。 */
.welcome-modal {
  opacity: 0;
  transition: opacity .22s ease;
}

.welcome-modal.is-open {
  opacity: 1;
}

.welcome-modal .welcome-card {
  opacity: 0;
  transform: scale(.92);
  transform-origin: center center;
  transition: transform .26s cubic-bezier(.2, .8, .3, 1), opacity .22s ease;
  will-change: transform, opacity;
}

.welcome-modal.is-open .welcome-card {
  opacity: 1;
  transform: scale(1);
}

/* 尊重系统的「减弱动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {

  .welcome-modal,
  .welcome-modal .welcome-card {
    transition-duration: .01ms;
  }

  .welcome-modal .welcome-card {
    transform: none;
  }
}

.welcome-card {
  width: min(1040px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}

.welcome-card .create-card-head {
  flex: 0 0 auto;
  padding-right: 60px;
}

.welcome-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 24px;
}

.welcome-flow {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: #ffffff;
}

.welcome-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 18px 24px 24px;
}

.welcome-skip {
  font-size: 13px;
  color: var(--sub);
}

/* 帮助入口：与「下次不再提示」同在左侧，用细竖线分隔；
   margin-right:auto 把主按钮顶到右端 */
.welcome-hint {
  margin: 0 auto 0 0;
  padding-left: 14px;
  border-left: 1px solid var(--hair);
  font-size: 13px;
  color: var(--sub);
}

.welcome-hint a {
  color: var(--acc);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(32, 68, 105, .35);
  transition: color .16s ease, border-color .16s ease;
}

.welcome-hint a:hover {
  color: var(--acc-hover);
  border-bottom-color: var(--acc-hover);
}

.welcome-start {
  padding: 11px 22px;
  font-size: 14px;
}

@media (max-width: 640px) {
  .welcome-actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* 窄屏换行后竖线分隔失效，改回常规左对齐 */
  .welcome-hint {
    margin: 0;
    padding-left: 0;
    border-left: 0;
    flex: 1 0 100%;
    order: 3;
  }

  .welcome-start {
    width: 100%;
    order: 2;
  }
}

/* ── 多图上传：已选图片列表 ────────────────────────────────
   建档与档案编辑共用这套卡片。每张图两个相互独立的标记——
   「主图片」决定客户列表里展示哪张封面，「参与测色」决定它是否
   进入「图片校色 → 牙位标记」流程（有的照片里根本没有待测的牙齿）。 */
/* 图片列表在上传框上方，两者之间留出间隔，视觉上分成「已选」与「继续添加」两块 */
.img-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.img-list[hidden] {
  display: none;
}

/* 工作台与测色页共用的档案编辑弹层(case-edit.js)。页面只提供打开/保存回调，
   弹层宽度、文件卡片和错误提示统一由共享资源控制。 */
.case-edit-modal {
  z-index: 200;
}

.case-edit-modal[hidden] {
  display: none;
}

.case-edit-card {
  width: min(720px, 100%);
  overflow: visible;
}

/* 从工作台文件数量进入时，优先把屏幕空间留给文件：弹层加宽，文件卡片可并排
   展示更多列；脚本同时会把滚动主体定位到“档案文件”标题。普通编辑入口不受影响。 */
.case-edit-modal.is-file-focus {
  padding: 16px;
}

.case-edit-modal.is-file-focus .case-edit-card {
  width: min(1180px, 100%);
  height: calc(100vh - 32px);
}

.case-edit-modal.is-file-focus .img-list {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* 让文件区至少占满一个滚动视口，哪怕文件较少也能真正顶到滚动区顶部；
   文件较多时仍按内容自然增高，由表单主体继续滚动。 */
.case-edit-modal.is-file-focus .create-form-body > .field-images {
  flex: 0 0 auto;
  min-height: 100%;
}

.case-edit-modal.is-file-focus [data-shared-case-edit-files]:focus {
  outline: none;
}

.case-edit-record {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

.case-edit-notice {
  flex: 0 0 auto;
  margin-top: 10px;
  color: var(--dim, #8a909c);
  font-size: 12px;
  line-height: 1.5;
}

.case-edit-notice[hidden] {
  display: none;
}

.case-edit-notice.is-error {
  color: #b4503c;
}

.case-edit-modal .btn:not([disabled]):not(.disabled) {
  cursor: pointer;
}

/* 有图之后上传区收成一条窄栏，把纵向空间让给图片列表 */
.file-drop.compact {
  min-height: 84px;
  padding: 14px 16px;
}

.file-drop.compact .file-drop-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 4px;
}

.img-card {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line, rgba(32, 68, 105, .18));
  border-radius: 10px;
  background: var(--card, #fff);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.img-card.is-cover {
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc) inset;
}

.img-card.is-failed {
  border-color: rgba(200, 80, 60, .5);
  background: rgba(200, 80, 60, .05);
}

.img-card-thumb {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--card-2, #f4f5f8);
}

.img-card-thumb.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--acc);
}

.img-card-thumb.is-empty[data-failed] {
  color: #b4503c;
}

.img-card-spin {
  width: 16px;
  height: 16px;
  border: 2px solid var(--acc-soft, rgba(32, 68, 105, .18));
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: img-card-spin .8s linear infinite;
}

/* 上传态：百分比外层同时展示实际进度圆环。之前只有裸数字，容易被误认为
   圆环未加载；内圆沿用缩略位底色，在浅色/深色主题下都保持清晰。 */
.img-card-progress {
  --img-card-progress: 0%;
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: conic-gradient(var(--acc) var(--img-card-progress),
      var(--acc-soft, rgba(32, 68, 105, .18)) 0);
}

.img-card-progress::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--card-2, #f4f5f8);
}

.img-card-progress .img-card-pct {
  position: relative;
  z-index: 1;
}

@keyframes img-card-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .img-card-spin { animation: none; }
}

.img-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.img-card-name {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 文件重命名(档案编辑弹层) ─────────────────────────────────
   文件名后跟一支铅笔，点开就地改名。扩展名不随改名走(它定死了文件类别)，
   编辑态里固定显示在输入框右侧，只让基础名可编辑。 */
.img-card-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  /* 名字很长时铅笔会被挤到最右，正好压在绝对定位的移除按钮下面：
     给这一行留出移除按钮的宽度，两个按钮就不会互相盖住。 */
  padding-right: 18px;
}

.img-card-name-row .img-card-name {
  min-width: 0;
}

.img-card-rename {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--dim, #8a909c);
  opacity: .6;
  cursor: pointer;
  transition: opacity .15s ease, color .15s ease, background-color .15s ease;
}

.img-card-rename:hover,
.img-card-rename:focus-visible {
  opacity: 1;
  color: var(--acc);
  background: var(--acc-soft, rgba(32, 68, 105, .12));
}

.img-card-name-row.is-editing {
  gap: 0;
  padding: 1px 6px;
  margin-right: 18px;   /* 同样避开移除按钮 */
  border: 1px solid var(--acc);
  border-radius: 6px;
  background: var(--card, #fff);
}

.img-card-name-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink, #2c3238);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
}

.img-card-name-ext {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dim, #8a909c);
}

.img-card-meta {
  font-size: 11px;
  color: var(--dim, #8a909c);
}

.img-card-flags {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}

.img-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--ink, #2c3238);
  cursor: pointer;
  user-select: none;
}

.img-flag input {
  margin: 0;
  accent-color: var(--acc);
}

.img-flag input:disabled + span {
  opacity: .45;
}

.img-card-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dim, #8a909c);
  font-size: 16px;
  cursor: pointer;
}

.img-card-del:hover {
  background: rgba(200, 80, 60, .12);
  color: #b4503c;
}

/* ── 文档类文件：按类别着色的文件图标 + 说明标签 ──────────────
   档案可以挂任意类型文件，只有 RAW 参与校色。文档没有封面/测色两个角色，
   卡片上用一枚说明标签替代那两个勾选框，避免出现一排点不动的控件。 */
.img-card-thumb.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  background: transparent;
}

.img-card.is-doc {
  background: var(--card-2, #f7f8fa);
}

.img-flag-note {
  font-size: 11px;
  color: var(--dim, #8a909c);
  line-height: 1.5;
}