/* ============================================================
   仪器预约时段界面  reservation-ui.css
   ------------------------------------------------------------
   核心是"时段网格"：把一天拆成整点格，每格按状态着色，
   让人一眼看出哪些时段已被占用、哪些还空着。
   配色与仪器模块既有的 statusMap 一致：
     绿=可预约  黄=已预约  蓝=使用中  橙=维护中  红=故障停用  灰=已过期
   ============================================================ */

/* ── 概览条 ── */
.slot-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.slot-stat {
  flex: 1 1 92px;
  min-width: 92px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  text-align: center;
}
.slot-stat-num {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.slot-stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
.slot-stat.is-free { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.08); }
.slot-stat.is-free .slot-stat-num { color: #047857; }
.slot-stat.is-busy { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); }
.slot-stat.is-busy .slot-stat-num { color: #b45309; }
.slot-stat.is-off { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.08); }
.slot-stat.is-off .slot-stat-num { color: #b91c1c; }

/* ── 日期条 ── */
.date-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px;
  margin-bottom: 4px;
  scrollbar-width: thin;
}
.date-strip::-webkit-scrollbar { height: 6px; }
.date-strip::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.date-chip {
  flex: 0 0 auto;
  min-width: 62px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  text-align: center;
  cursor: pointer;
  transition: all .18s;
  user-select: none;
}
.date-chip:hover { border-color: var(--accent-primary); }
.date-chip.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(59,130,246,.28);
}
.date-chip .dc-week { display: block; font-size: 0.72rem; opacity: .85; }
.date-chip .dc-day  { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.date-chip .dc-mon  { display: block; font-size: 0.68rem; opacity: .7; }
.date-chip .dc-flag { display: block; font-size: 0.62rem; margin-top: 1px; opacity: .9; }
.date-chip.has-busy::after {
  content: "";
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #f59e0b;
  margin: 3px auto 0;
}
.date-chip.active.has-busy::after { background: #fff; }

/* ── 图例 ── */
.slot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.slot-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.slot-swatch {
  width: 14px; height: 14px;
  border-radius: 4px;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.08);
}

/* ── 时段网格 ── */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.slot {
  position: relative;
  padding: 9px 6px;
  border-radius: 10px;
  border: 1.5px solid var(--slot-color, #e5e7eb);
  background: var(--slot-bg, #f9fafb);
  color: var(--slot-color, #4b5563);
  text-align: center;
  cursor: default;
  transition: transform .14s, box-shadow .14s;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
/* 格内文字统一用 --slot-ink（深色识别色），而不是 --slot-color：
   --slot-color 是识别用的亮色，压在自身 16% 底纹上仅约 1.9–2.5:1，
   姓名/联系方式会糊掉；--slot-ink 在同样底纹上达 6.2–7.3:1（WCAG AA）。 */
.slot-time { font-size: 0.88rem; font-weight: 700; letter-spacing: -0.2px; color: var(--slot-ink, var(--slot-color)); }
.slot-state { font-size: 0.7rem; opacity: .95; color: var(--slot-ink, var(--slot-color)); }
.slot-who {
  font-size: 0.65rem;
  opacity: .95;
  color: var(--slot-ink, var(--slot-color));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 格内联系方式：桌面端可见，窄屏隐藏（点格子仍会弹出完整号码） */
.slot-phone {
  font-size: 0.6rem;
  opacity: .9;
  color: var(--slot-ink, var(--slot-color));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
/* 可预约格：唯一可点的状态，给出明确的可点提示 */
.slot.is-bookable {
  cursor: pointer;
  border-style: dashed;
}
.slot.is-bookable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(16,185,129,.22);
  border-style: solid;
}
.slot.is-bookable:active { transform: scale(.97); }
.slot.is-bookable::after {
  content: "＋";
  position: absolute;
  top: 3px; right: 5px;
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity .15s;
}
.slot.is-bookable:hover::after { opacity: .8; }
.slot.is-mine { box-shadow: inset 0 0 0 2px rgba(59,130,246,.35); }
.slot.is-now { animation: slotPulse 2s ease-in-out infinite; }
@keyframes slotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,.35); }
  50%      { box-shadow: 0 0 0 5px rgba(59,130,246,0); }
}
/* 选中态（作为预约起点/终点被点中） */
.slot.is-selected {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25) !important;
  background: rgba(59,130,246,.12) !important;
  color: #1d4ed8 !important;
}
.slot.is-locked { opacity: .45; }

/* ── 提示行 ── */
.slot-hint {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-primary-light, rgba(59,130,246,.1));
  border: 1px solid rgba(59,130,246,.25);
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.55;
}
.slot-hint strong { color: var(--accent-primary); }

/* ── 可预约区间胶囊 ── */
.free-ranges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.free-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.35);
  /* 胶囊底色是"绿叠蓝"，比纯白深；#047857 压在上面只有 4.49:1，
     差一点点就掉出 AA，故加深为 #036b4e（≈5.35:1）。 */
  color: #036b4e;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.free-range:hover { background: rgba(16,185,129,.18); transform: translateY(-1px); }
/* 「7h」这类后缀先前用 opacity:.8 做弱化，实际渲染出来只有 ~2.9:1；
   改用字重区分层次，不再压透明度，保证真机上真的看得清。 */
.free-range .fr-h { font-size: 0.72rem; font-weight: 500; }

/* ── 预约清单卡片 ── */
.res-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  margin-bottom: 10px;
}
.res-item.is-cancelled { opacity: .5; }
.res-item.is-past { background: var(--bg-secondary); }
.res-bar {
  flex: 0 0 5px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--res-color, #f59e0b);
}
.res-main { flex: 1; min-width: 0; }
.res-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.res-when {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.res-purpose {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.res-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.res-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

/* ── 列表页：卡片上的"今日时段迷你条" ── */
.mini-slots {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.mini-slot {
  flex: 1 1 0;
  min-width: 2px;
  background: var(--slot-color, #e5e7eb);
  transition: transform .12s;
}
.mini-slots:hover .mini-slot { transform: scaleY(1.6); }
.mini-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.mini-info .mi-free { color: #047857; font-weight: 600; }
.mini-info .mi-busy { color: #b45309; font-weight: 600; }

/* ── 手机端微调 ── */
@media (max-width: 767px) {
  .slot-grid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 6px;
  }
  .slot { min-height: 58px; padding: 7px 4px; border-radius: 8px; }
  .slot-time { font-size: 0.82rem; }
  .slot-state { font-size: 0.68rem; }
  .slot-who { display: none; }          /* 手机上省空间，点开看详情 */
  .slot-legend { font-size: 0.76rem; gap: 6px 12px; padding: 8px 10px; }
  .slot-legend-item { font-size: 0.76rem; }
  .slot-stat { flex: 1 1 72px; min-width: 72px; padding: 8px 6px; }
  .slot-stat-num { font-size: 1.15rem; }
  .slot-stat-label { font-size: 0.68rem; }
  .date-chip { min-width: 56px; padding: 7px 8px; }
  .res-item { padding: 12px; }
  .res-actions .btn { flex: 1 1 auto; }
  .free-range { font-size: 0.78rem; padding: 6px 10px; }
}

@media (max-width: 400px) {
  .slot-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 5px; }
  .slot { min-height: 54px; }
  .slot-time { font-size: 0.76rem; }
  .slot-state { font-size: 0.64rem; }
}

/* 深色主题下把浅色系文字提亮，保证可读 */
[data-theme="dark"] .slot-stat.is-free .slot-stat-num { color: #34d399; }
[data-theme="dark"] .slot-stat.is-busy .slot-stat-num { color: #fbbf24; }
[data-theme="dark"] .slot-stat.is-off .slot-stat-num { color: #f87171; }
[data-theme="dark"] .free-range { color: #34d399; }
[data-theme="dark"] .mini-info .mi-free { color: #34d399; }
[data-theme="dark"] .mini-info .mi-busy { color: #fbbf24; }
[data-theme="dark"] .slot.is-selected { color: #93c5fd !important; }

/* ══════════════════════════════════════════════════════════
   联系人展示（当前使用/预约人 + 预约清单里的联系方式）
   ----------------------------------------------------------
   设计要点
   1) 手机号做成 tel: 链接——手机上一点即可拨打，这是"联系方式"
      真正有用的形态，而不是印在屏幕上的数字。
   2) 拿不到号码时显示"未登记"，被开关隐藏时显示"已隐藏"：
      两种占用位含义不同，不能混成一片空白。
   3) 所有文字色都按 WCAG AA 选（浅色主题下压浅底 ≥4.5:1，
      深色主题下压深底同理），不用 alpha 半透明文字。
   ══════════════════════════════════════════════════════════ */

/* ── 顶部"当前占用"卡片 ── */
.occ-card {
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #9ca3af;
  background: #f9fafb;
  margin-bottom: 14px;
}
.occ-card.is-inuse { border-color: #bfdbfe; border-left-color: #2563eb; background: #eff6ff; }
.occ-card.is-next  { border-color: #fde68a; border-left-color: #d97706; background: #fffbeb; }
.occ-card.is-free  { border-color: #bbf7d0; border-left-color: #16a34a; background: #f0fdf4; }

.occ-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.occ-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #e5e7eb;
  color: #374151;
}
.occ-card.is-inuse .occ-badge { background: #dbeafe; color: #1e40af; }
.occ-card.is-next  .occ-badge { background: #fef3c7; color: #92400e; }
.occ-card.is-free  .occ-badge { background: #dcfce7; color: #14532d; }

.occ-name { font-size: 0.98rem; font-weight: 700; color: #111827; }
.occ-sub {
  margin-top: 5px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #374151;
  overflow-wrap: anywhere;
}
.occ-warn { font-weight: 700; color: #92400e; }

.occ-roster {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed #d1d5db;
  font-size: 0.78rem;
  line-height: 1.9;
  color: #374151;
}
.occ-person {
  display: inline-block;
  margin-right: 12px;
  white-space: nowrap;
  font-weight: 600;
}
.occ-person .contact { font-weight: 600; font-size: 0.78rem; }
.occ-person-when {
  font-weight: 400;
  color: #4b5563;
  font-variant-numeric: tabular-nums;
}

/* ── 联系方式（tel: 链接 / 两种占位）── */
.contact {
  font-size: 0.8rem;
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
a.contact:hover { text-decoration: underline; }
.contact.is-missing { color: #4b5563; font-weight: 500; }
.contact.is-hidden  { color: #4b5563; font-weight: 500; }

/* ── 预约清单里的联系方式行 ── */
.res-contact-row { margin-top: 4px; }

/* ── 列表页卡片上的"现在是谁在用" ── */
.mini-who-row {
  margin-top: 4px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-who-row .mi-who { font-weight: 600; color: #1e40af; }

/* ══════════════════════════════════════════════════════════
   深色主题：格子文字改用浅一档的 inkDark，卡片与联系方式同步提亮
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .slot-time,
[data-theme="dark"] .slot-state,
[data-theme="dark"] .slot-who,
[data-theme="dark"] .slot-phone { color: var(--slot-ink-d, var(--slot-ink, var(--slot-color))); }

[data-theme="dark"] .occ-card { border-color: #334155; border-left-color: #64748b; background: #1e293b; }
[data-theme="dark"] .occ-card.is-inuse { border-color: #1e40af; border-left-color: #60a5fa; background: #172554; }
[data-theme="dark"] .occ-card.is-next  { border-color: #92400e; border-left-color: #fbbf24; background: #451a03; }
[data-theme="dark"] .occ-card.is-free  { border-color: #166534; border-left-color: #4ade80; background: #052e16; }
[data-theme="dark"] .occ-badge { background: #334155; color: #e2e8f0; }
[data-theme="dark"] .occ-card.is-inuse .occ-badge { background: #1e40af; color: #dbeafe; }
[data-theme="dark"] .occ-card.is-next  .occ-badge { background: #78350f; color: #fef3c7; }
[data-theme="dark"] .occ-card.is-free  .occ-badge { background: #14532d; color: #dcfce7; }
[data-theme="dark"] .occ-name { color: #f1f5f9; }
[data-theme="dark"] .occ-sub { color: #cbd5e1; }
[data-theme="dark"] .occ-warn { color: #fcd34d; }
[data-theme="dark"] .occ-roster { border-top-color: #475569; color: #cbd5e1; }
[data-theme="dark"] .occ-person-when { color: #94a3b8; }
[data-theme="dark"] .contact { color: #93c5fd; }
[data-theme="dark"] .contact.is-missing,
[data-theme="dark"] .contact.is-hidden { color: #94a3b8; }
[data-theme="dark"] .mini-who-row .mi-who { color: #93c5fd; }

/* ══════════════════════════════════════════════════════════
   窄屏：保留姓名（这正是本次要显示的信息），只收起手机号数字，
   完整号码仍可通过点击格子 / 预约清单里的 tel 链接拿到
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .slot-who { display: block; font-size: 0.6rem; }
  .slot-phone { display: none; }
}
@media (max-width: 767px) {
  .occ-card { padding: 11px 13px; }
  .occ-name { font-size: 0.94rem; }
  .occ-sub { font-size: 0.78rem; }
  .occ-roster { font-size: 0.75rem; line-height: 2; }
  .occ-person { display: block; margin-right: 0; }
  .contact { font-size: 0.78rem; }
}

/* ══════════════════════════════════════════════════════════
   预约表单 · 预约人信息（登录后自动填入）
   ----------------------------------------------------------
   意图：把"每次手打姓名和手机号"变成"打开就已填好，只在需要时改"。
   标签会明确说出号码来自哪里（登录账号 / 成员资料 / 手动填写），
   因为来源不同，可信度不同——账号带出的不必核对，手填的要提示。
   ══════════════════════════════════════════════════════════ */
.reservee-auto {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: #dcfce7;
  color: #14532d;
}
.reservee-auto.is-manual { background: #fef3c7; color: #92400e; }

.reservee-box {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}
.reservee-row { display: flex; align-items: center; gap: 10px; }
.reservee-row + .reservee-row { margin-top: 8px; }
.reservee-label {
  flex: 0 0 62px;
  font-size: 0.8rem;
  color: #4b5563;
}
.reservee-name { font-size: 0.9rem; font-weight: 700; color: #111827; }
/* 16px 是关键：<16px 会让 iOS 聚焦时把整页放大 */
.reservee-input { flex: 1; min-width: 0; font-size: 16px; }

.reservee-hint {
  margin-top: 6px;
  font-size: 0.76rem;
  line-height: 1.7;
  color: #4b5563;
  overflow-wrap: anywhere;
}
.reservee-hint.is-warn { color: #92400e; font-weight: 600; }

.reservee-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 0.8rem;
  color: #374151;
  cursor: pointer;
}
.reservee-remember input { width: 16px; height: 16px; flex: none; }

[data-theme="dark"] .reservee-auto { background: #14532d; color: #dcfce7; }
[data-theme="dark"] .reservee-auto.is-manual { background: #78350f; color: #fef3c7; }
[data-theme="dark"] .reservee-box { border-color: #334155; background: #0f1a2b; }
[data-theme="dark"] .reservee-label { color: #94a3b8; }
[data-theme="dark"] .reservee-name { color: #f1f5f9; }
[data-theme="dark"] .reservee-hint { color: #cbd5e1; }
[data-theme="dark"] .reservee-hint.is-warn { color: #fcd34d; }
[data-theme="dark"] .reservee-remember { color: #cbd5e1; }

@media (max-width: 767px) {
  .reservee-row { flex-wrap: wrap; }
  .reservee-label { flex: 0 0 56px; font-size: 0.78rem; }
  .reservee-input { flex: 1 1 100%; }
}

/* 未登录时联系方式的位置占位：页面未登录也能浏览，
   号码不能公开，但也不能留白让人以为没登记。 */
.contact.is-locked { color: #4b5563; font-weight: 500; }
[data-theme="dark"] .contact.is-locked { color: #94a3b8; }