/* 预约选时段的那张周表（.bwk-*）——首页、会员中心、后台三个页面共用一份。

   为什么单独成文件：原来这些规则长在 styles.css 里，只有前台两个页面引得到。
   2026-09-08 主理人要求后台「预约上课」也改成"客人约课那样的时间表"，而 admin.html
   是内嵌样式、不引 styles.css。抄一份进 admin.html 是最省事的做法，但这张表返工过
   五六次、参数几十处，两份必然慢慢走样（不许再犯.md 第 3 条）——所以整段搬到这里，
   三个页面各引一次。**改这张表的样式只改这个文件。**

   ⚠️ var() 全部带 fallback：前台 styles.css 有 --seal/--line/--paper-deep 那套变量，
   admin.html 用的是另一套名字（--red/--border/--surface），两边对不上。fallback 值
   就是前台那些变量的实际色号，所以后台显示出来跟客人看到的完全一致。
   ⚠️ JS 里的 BWK_SLOT_H = 24 / BWK_HEAD_H = 40 跟这里的 height 必须保持一致，
   拖拽算"手指落在第几格"靠它们。 */

.bwk-picker {
  border: 1px solid var(--line, rgba(43, 40, 34, 0.14)); border-radius: 8px; padding: 10px;
  background: var(--paper-deep, #efe7d6);
}
.bwk-nav {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink, #2b2822);
}
.bwk-nav span {
  flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bwk-nav button {
  flex-shrink: 0; background: none; border: 1px solid var(--line, rgba(43, 40, 34, 0.14));
  color: var(--ink-soft, #55503f); font-size: 16px;
  cursor: pointer; padding: 2px 10px; border-radius: 4px;
}
.bwk-nav button:hover:not(:disabled) { border-color: var(--seal, #a3312a); color: var(--seal, #a3312a); }
.bwk-nav button:disabled { opacity: 0.35; cursor: default; }

/* 整张表（每天一列）放在一个能上下、左右都滚动的框里，表头行 position:sticky，
   滚动时始终看得到"这是星期几"。
   跟后台周视图最大的结构差别：**没有左边那根时间轴列**——客人不像主理人那样要对着时间轴
   读一条条行程，时间直接印在每个能约的格子里，省下来的 46px 全部分给七天那几列。 */
/* ⚠️ 下面这些数值不是随手定的，是照抄 admin.html 后台周视图的真实参数，改之前先去那边对一眼：
   边框色 #D8D0C0（后台 --border）、隔天底色 #F8EED7（后台 .cal-week-daycol:nth-child(even)）、
   半小时格高 24px（后台 calWeekPxPerHour = 48）、时间文字 9px/10px（后台手机版 @media 那套）、
   半点线 dashed + 更淡。目的是让客人看到的这张表跟主理人后台那张是同一个组件，不是"长得像"。 */
.bwk-table-wrap { position: relative; max-height: 360px; overflow: auto; overscroll-behavior: contain; border: 1px solid #D8D0C0; border-radius: 6px; }
/* ⚠️ 不能改用 CSS Grid 平铺格子——那样表头 .bwk-col-head 的 position:sticky 会失效
   （grid 子项的包含块就是它自己那一格，没有可以"吸"的余量），纵向一滚"星期几"就跑没了 */
.bwk-table { display: flex; min-width: min-content; }
/* 过去的日子整栏不画，所以本周栏数会变少（周六打开只剩两栏）。栏少的时候让它们
   居中、并且限一个最大宽度——不然 flex 会把仅剩的一两栏拉到满框宽，24px 高的格子
   被抻成几百像素的长条就不像张表了 */
.bwk-days { display: flex; flex: 1; justify-content: center; }
/* 列宽从 46px 提到 58px：格子里现在要装得下"晚上10:30"这种完整时间标（10px 字号约
   48px 宽 + 左右留白）。因为同时砍掉了 46px 的时间轴列，一屏能看到的天数反而没变少 */
.bwk-day-col {
  position: relative; flex: 1 1 58px; min-width: 58px; max-width: 150px;
  background: var(--col-tint, #F7F3EC);
}
.bwk-col-head {
  position: sticky; top: 0; background: var(--paper-deep, #efe7d6); z-index: 3;
  height: 40px; box-sizing: border-box;
  padding: 4px 2px; text-align: center; font-size: 0.7rem; color: var(--ink-soft, #55503f);
  border-bottom: 1px solid #D8D0C0;
  white-space: nowrap;
}
.bwk-col-head b { display: block; font-size: 0.78rem; color: var(--ink, #2b2822); }
.bwk-col-head.today b { color: var(--seal, #a3312a); }

/* 每天列自己的底色（单双日交替，--col-tint 由 JS 传进来，值直接用后台那两个色号），
   忙/闲状态再叠一层上去，不是拿纯灰/纯红盖住整格——这样还看得出"这是哪一天" */
/* 24px = 后台 pxPerHour 48 的一半；这个高度同时被 JS 里的 BWK_SLOT_H 用来算"手指落在
   第几格"和预选框的定位，改这里必须同步改那边 */
.bwk-cell {
  height: 24px; box-sizing: border-box;
  border-top: 1px dashed rgba(74, 92, 90, 0.4); border-left: 1px solid #D8D0C0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.bwk-cell.hour-start { border-top: 1px solid #D8D0C0; }
/* 格子里的时间：淡灰色，不要正文那种深墨色——它是"这一格是几点"的注解，
   真正要一眼看出来的是"哪几格能点、哪几段不能点"，时间字太黑会盖过这件事。
   半点那行跟后台时间轴一样再小一号、再淡一点，保留整点/半点两级的层次 */
.bwk-cell-time {
  font-size: 10px; line-height: 1; white-space: nowrap;
  color: rgba(74, 92, 90, 0.55);
  user-select: none; -webkit-user-select: none;
}
.bwk-cell:not(.hour-start) .bwk-cell-time { font-size: 9px; opacity: 0.75; }
/* 被预选框盖住的格子藏掉时间文字——那一段的时间由框上的"开始/时长/结束"三个标负责，
   逐格再印一遍会跟它们叠在一起糊掉（用 visibility 不用 display，格子高度不变） */
.bwk-cell.masked .bwk-cell-time { visibility: hidden; }
/* 灰斜纹=不能约（被占用、主理人关了、或者已经过去），斜纹跟后台"关闭时段"是同一套
   视觉语言。具体是哪种原因客人看不到，只在整段上盖一个"已约满"／"已过"的字 */
.bwk-cell.busy {
  background-image: repeating-linear-gradient(45deg, rgba(43, 40, 34, 0.22) 0, rgba(43, 40, 34, 0.22) 1px, transparent 1px, transparent 7px);
}
/* 琴课一次固定一小时，起不了一整节课的半小时缝隙：不挂 .open 所以点不动，
   也不写"已约满"（那半小时确实还空着）。只把时间再淡一档，示意这儿开不了课 */
.bwk-cell-nostart .bwk-cell-time { opacity: 0.4; }

/* 她自己已经约下的那一段：斜纹换成印章红，跟"已约满"（别人占的/主理人关的，灰）分开。
   同样是不能点，但意思完全不同——一个是"没轮到你"，一个是"这是你的"。
   ⚠️ 后台代客约课时这一列恒为 false（掌柜账号没有 member_id），所以后台看到的
   永远是灰的"已约满"，这是对的：掌柜要看的是"这个时间琴室有没有人"，不分是谁 */
.bwk-cell.busy.mine {
  background-image: repeating-linear-gradient(45deg, rgba(163, 49, 42, 0.3) 0, rgba(163, 49, 42, 0.3) 1px, transparent 1px, transparent 7px);
}
/* 不能约的那一整段上盖一个说明标：连着的格子只写一次，不是每格都写。
   文字是 position:sticky——一段很长（比如一整天都已经过去）时往下滚也一直贴在可视区
   顶下方跟着走，不会滚到中段就不知道这一片是什么状态。top 取 40px 正好卡在表头下沿 */
/* ⚠️ 这里绝对不能加 overflow:hidden——sticky 元素只要有一个 overflow 不是 visible 的
   祖先，就会改用那个祖先当滚动容器；那个容器自己不滚动，于是 sticky 完全失效，
   文字又变回死死钉在这一段的顶端。踩过一次，去掉才吸得住 */
.bwk-blocked-tag {
  position: absolute; left: 0; right: 0; z-index: 2;
  pointer-events: none; text-align: center;
}
/* 文字底下垫一层这一天自己的底色（--col-tint 从 .bwk-day-col 继承下来），
   把斜纹压住，不然细斜线横穿字面，"已约满"三个字糊在纹路里不好认 */
.bwk-blocked-tag span {
  display: inline-block; position: sticky; top: 40px;
  font-size: 10px; line-height: 24px; font-weight: 600;
  letter-spacing: 0.04em; white-space: nowrap; color: rgba(74, 92, 90, 0.78);
  background: var(--col-tint, #F7F3EC); padding: 0 5px; border-radius: 3px;
}
.bwk-blocked-tag.mine span { color: var(--seal, #a3312a); }
/* 这一周的数据还在路上：表格结构照常摆着（不清空、不闪），格子先淡一点表示还不能点，
   数据回来原地换成真实忙闲 */
.bwk-day-col.loading { opacity: 0.5; transition: opacity .15s; }
/* 可约的格子**不刷颜色**，就是这一天本身的底色——跟后台一样，空着的时间段是留白的。
   之前给每个可约格子刷了一层红，叠在隔天交替的两种底色上就变成了粉红/肉色两种颜色，
   整张表花掉了，反而看不出哪里是真的被选中 */
.bwk-cell.open { cursor: pointer; touch-action: pan-y; }
.bwk-cell.open:hover { background-image: linear-gradient(rgba(163, 49, 42, 0.12), rgba(163, 49, 42, 0.12)); }
/* 拖出来的预选框 / 选定后的时间段：照后台 .cal-week-selectbox 那套——开始时间贴框顶、
   结束时间贴框底、中间空间够就写时长。绝对定位盖在格子上面，pointer-events:none 让
   点击和拖拽照样落到下面的格子上 */
.bwk-selbox {
  position: absolute; left: 2px; right: 2px; z-index: 4; box-sizing: border-box;
  border: 2px dashed var(--seal, #a3312a); border-radius: 4px; background: rgba(163, 49, 42, 0.16);
  pointer-events: none; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; padding: 2px 0; overflow: hidden;
}
.bwk-selbox.done { border-style: solid; background: rgba(163, 49, 42, 0.26); }
.bwk-selbox-label {
  font-size: 10px; font-weight: 700; color: var(--seal, #a3312a); background: #fff;
  padding: 0 5px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  white-space: nowrap; line-height: 1.5; flex-shrink: 0;
}
.bwk-selbox-duration { font-size: 10px; font-weight: 600; color: var(--seal, #a3312a); opacity: 0.85; white-space: nowrap; }
.bwk-loading { text-align: center; font-size: 0.85rem; color: var(--ink-soft, #55503f); padding: 20px 0; }
.bwk-selected-label { font-size: 0.85rem; color: var(--ink-soft, #55503f); margin: 10px 0 16px; }
.bwk-selected-label.picked { color: var(--seal, #a3312a); font-weight: 600; }

@media (max-width: 600px) {
  /* 手机端七列必须一屏完整呈现：把每列改为等分，不再保留桌面 58px 的最小宽度。 */
  .bwk-picker { padding: 8px; }
  .bwk-nav { gap: 4px; }
  .bwk-nav button { padding: 2px 8px; }
  .bwk-table { width: 100%; min-width: 0; }
  .bwk-days { min-width: 0; }
  .bwk-day-col { flex: 1 1 0; min-width: 0; max-width: none; }
  .bwk-col-head { padding: 4px 0; font-size: 0.64rem; }
  .bwk-col-head b { font-size: 0.72rem; }
  /* 七列等分后每格很窄，时间只是辅助注记，缩小到不会顶出格子。 */
  .bwk-cell-time { font-size: 7px; letter-spacing: -0.04em; }
  .bwk-cell:not(.hour-start) .bwk-cell-time { font-size: 6px; }
  .bwk-table-wrap { max-height: 280px; }
}