/* 北星城店排休表 —— 大字号、高对比、读屏友好 */

:root{
  --bg:#ffffff;
  --fg:#111111;
  --accent:#17469b;
  --accent-fg:#ffffff;
  --ok:#0b6b2f;
  --warn:#a33;
  --border:#333333;
  --muted:#555555;
  --soft:#eef2fb;
}

*{ box-sizing:border-box; }

html{ font-size:20px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
  line-height:1.75;
}

.wrap{ max-width:680px; margin:0 auto; padding:16px 16px 80px; }

/* 版本号（页脚） */
.ver{
  margin:22px 0 0;
  padding-top:10px;
  border-top:1px solid #ddd;
  text-align:center;
  font-size:.78rem;
  color:var(--muted);
}

h1{ font-size:1.6rem; margin:0 0 .6em; }
h2{ font-size:1.3rem; border-bottom:3px solid var(--accent); padding-bottom:6px; margin:1.4em 0 .6em; }
h3{ font-size:1.12rem; margin:1em 0 .4em; }

/* 角色编辑页的分段标题（总部／门店·店长／技师·个人）：
   Tab 会停在这上面，读屏念「第几段、这一段多少项」，再往下才是这一段的勾选项 */
.sec-head{
  display:inline-block;
  margin:1.4em 0 .5em;
  padding:6px 14px;
  background:var(--soft);
  border-left:8px solid var(--accent);
  border-radius:8px;
}
.sec-hr{ border:0; border-top:4px dashed var(--border); margin:1.6em 0 .2em; }

p{ margin:.5em 0; }

/* 按钮：大、清晰、整行、读屏可读 */
button{
  display:block;
  width:100%;
  font-size:1.05rem;
  font-family:inherit;
  padding:14px 16px;
  margin:8px 0;
  border:2px solid var(--accent);
  border-radius:10px;
  background:var(--accent);
  color:var(--accent-fg);
  text-align:left;
  cursor:pointer;
}
button.secondary{
  background:#ffffff;
  color:var(--accent);
}
button.ghost{
  background:#ffffff;
  color:var(--fg);
  border-color:var(--border);
}
button:disabled{
  background:#888888;
  border-color:#888888;
  color:#ffffff;
  cursor:not-allowed;
}
/* 停得住、但不能按的按钮（用 aria-disabled 而不是 disabled——disabled 会被 Tab 跳过、读屏也够不着） */
button.is-off, button[aria-disabled="true"]{
  background:#888888;
  border-color:#888888;
  color:#ffffff;
  cursor:not-allowed;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex]:focus{
  outline:4px solid #ff9f00;
  outline-offset:2px;
}

/* 表单 */
input, select{
  font-family:inherit;
  font-size:1.1rem;
  padding:12px;
  border:2px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--fg);
  max-width:240px;
  width:100%;
}
input[type=number]{ max-width:110px; }

/* 4.107：复选框／单选框别被上面的表单规则拉成 240px 宽的空心大方块——
   服务工单卡片前面那个「空橙框」就是这么来的（钟总 10-29 截图）。
   它们自己就是个小方框，放大一点、用 accent-color 变色就够了。 */
input[type=checkbox], input[type=radio]{
  width:auto;
  max-width:none;
  padding:0;
  margin:0 6px 0 4px;
  transform:scale(1.6);
  vertical-align:middle;
  accent-color:#17469b;
}

/* 多选组合框（4.14）：一个按钮 + 浮在下面的列表。
   按钮上直接写着「已选 3 家：A、B、C」；回车打开列表，上下光标挑，回车就是选中。
   选项文字永远只有名字，不塞「已选」，没按回车绝不会误念成选中。 */
.mpcombo{ position:relative; margin:8px 0; max-width:560px; }
.mpcombo .mp-btn{
  display:block;
  width:100%;
  max-width:100%;
  text-align:left;
  font-family:inherit;
  font-size:1.1rem;
  font-weight:700;
  padding:12px 14px;
  border:2px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--fg);
  cursor:pointer;
}
.mpcombo .mp-btn::after{ content:'\25BE'; float:right; font-weight:400; }
.mpcombo .mp-btn[aria-expanded="true"]{ border-color:#1f6feb; background:#eef4ff; }
.mpcombo .mp-pop{
  position:absolute;
  z-index:40;
  left:0;
  right:0;
  top:100%;
  margin-top:2px;
  max-height:20em;
  overflow:auto;
  border:2px solid var(--border);
  border-radius:10px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.mpcombo .mp-pop[hidden]{ display:none; }
.mpcombo .mp-opt{
  padding:11px 14px;
  border-bottom:1px dashed #ccc;
  font-weight:400;
  cursor:pointer;
}
.mpcombo .mp-opt:last-child{ border-bottom:0; }
.mpcombo .mp-opt:hover{ background:#f2f6ff; }
.mpcombo .mp-opt:focus{ outline:3px solid #1f6feb; outline-offset:-3px; background:#eaf1ff; }
.mpcombo .mp-opt[aria-selected="true"]{
  font-weight:700;
  background:#eaf7ea;
  box-shadow:inset 5px 0 0 #2e9e4f;
}

label{ display:block; font-weight:700; margin-top:10px; }

fieldset{
  border:2px solid var(--border);
  border-radius:12px;
  margin:12px 0;
  padding:12px 14px;
}
legend{ font-weight:700; padding:0 8px; }

.radio-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:10px 0;
  font-weight:700;
}
.radio-row input{ width:auto; max-width:none; transform:scale(1.6); margin:0 6px 0 4px; }

ul.list{ list-style:none; padding:0; margin:0; }
ul.list li{ margin:2px 0; }

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.topbar button{ width:auto; margin:0; }

/* 标题栏左上角的品牌 logo（钟总 2026-10-11 定：全站每页都挂）。
   走 CSS 背景图，是纯装饰——读屏不念、Tab 停不到，不挡任何内容；
   换图只改这一处，所有页面一起变。 */
.topbar::before{
  content:"";
  flex:0 0 auto;
  width:133px;
  height:40px;
  background:url("img/logo-horizontal.png") center/contain no-repeat;
}
/* 让标题跟在 logo 右边、按钮仍靠最右 */
.topbar > h1{ flex:1 1 auto; }
@media (max-width:560px){
  .topbar::before{ width:100px; height:30px; }   /* 手机屏收窄，免得挤标题 */
}

/* 吉祥物「荣仔」（钟总 2026-10-11 定）——纯装饰：
   aria-hidden + CSS 背景图 + pointer-events:none，读屏不念、Tab 停不到、点不到。 */
.mascot-corner{                 /* 首页右下角固定角标（只首页有，随页面切换自然消失） */
  position:fixed;
  right:10px;
  bottom:10px;
  width:76px;
  height:76px;
  background:url("img/rongzai-head.png") center/contain no-repeat;
  opacity:.55;
  pointer-events:none;
  z-index:5;
}
.mascot-login{                  /* 登录页／选门店页的全身版 */
  width:150px;
  height:220px;
  margin:4px auto 0;
  background:url("img/rongzai-full-towel.png") center/contain no-repeat;
  opacity:.95;
}
@media (max-width:560px){
  .mascot-corner{ width:60px; height:60px; }
}

/* 技师端首页的两个入口大按钮：字大、居中、好点好读 */
.bigbtn{
  font-size:1.6rem;
  font-weight:700;
  text-align:center;
  padding:30px 16px;
  margin:20px 0;
  border-radius:14px;
}

.row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:6px 0;
}

.quota-box{
  background:var(--soft);
  border-radius:12px;
  padding:10px 14px;
}
.quota-box ul{ margin:0; padding-left:0; list-style:none; }
.quota-box li{ margin:4px 0; }

.flash{
  background:#e7f7ec;
  border:2px solid var(--ok);
  color:var(--ok);
  border-radius:12px;
  padding:12px 14px;
  font-weight:700;
}

.status-full{ color:var(--warn); font-weight:700; }
.hint{ color:var(--muted); }

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.card{
  border:2px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  margin:12px 0;
}

/* 门店卡片前的复选框行：把「这是哪家店」变成一个可以用 Tab 停靠、用空格勾选的位置 */
.pick-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 8px;
  font-weight:700;
  font-size:1.06em;
}
.pick-row input[type=checkbox]{
  width:auto;
  max-width:none;
  flex:none;
  transform:scale(1.9);
  margin:2px 6px 2px 4px;
  accent-color:#17469b;
}
.card.picked{
  border-color:#17469b;
  background:#eef3fd;
}

/* 列表编号 + 前面的复选框：编号由系统按先来后到给。
   读屏念的是「3 白晓栏」，听见名字就知道这条是谁；
   点一下打钩、再点取消，只是个记号，不动数据。 */
.seqcb{
  width:auto;
  max-width:none;
  flex:none;
  transform:scale(1.7);
  margin:0 4px 0 2px;
  accent-color:#17469b;
  vertical-align:middle;
}
.seqno{
  display:inline-block;
  min-width:2.2em;
  margin:0 10px 0 2px;
  padding:1px 8px;
  border-radius:8px;
  background:#eef3fd;
  border:2px solid #17469b;
  color:#17469b;
  font-weight:700;
  font-size:.9em;
  text-align:center;
  vertical-align:middle;
  cursor:pointer;
}

/* =========================================================
   颜色标识（给明眼人看得更清楚）
   —— 颜色只作辅助：每种颜色都配了文字/色标名称，
      读屏听到的信息完全不受影响。
   ========================================================= */

/* 色标小胶囊：深色字 + 同色浅底 + 同色描边，白底上也清晰 */
.chip{
  display:inline-block;
  padding:1px 10px;
  border-radius:999px;
  border:2px solid currentColor;
  font-weight:700;
  font-size:.82em;
  line-height:1.5;
  white-space:nowrap;
  vertical-align:middle;
}
/* 假期类型 */
.chip.regular{  color:#17469b; background:#e8effb; }
.chip.annual{   color:#6a1b9a; background:#f3e8f8; }
.chip.birthday{ color:#c2185b; background:#fbe8f0; }
.chip.legal{    color:#0b6b2f; background:#e7f7ec; }
.chip.over{     color:#b3261e; background:#fdecec; }
/* 工单卡片最前面的摘要标题（4.82，钟总读屏要求：母单/子单第一句就要听清） */
.tk-card-h{
  font-size:1rem;
  margin:.1em 0 .3em;
  font-weight:800;
  color:#12305e;
  letter-spacing:.5px;
}
/* 岗位 */
.chip.tech{  color:#17469b; background:#e8effb; }
.chip.front{ color:#0b6b2f; background:#e7f7ec; }
/* 每天是否还能休（月历状态） */
.chip.state-ok{   color:#0b6b2f; background:#e7f7ec; }
.chip.state-few{  color:#9a5b00; background:#fff4e0; }
.chip.state-full{ color:#b3261e; background:#fdecec; }
.chip.mine{       color:#6a1b9a; background:#f3e8f8; }
/* 全勤奖 */
.chip.fullattend{ color:#8a6d00; background:#fff8e0; }
/* 今天 */
.chip.today{ color:#8a4b00; background:#fff2cc; }

/* 月历里每一天的按钮：白底 + 左侧粗色条，一眼分状态 */
button.daybtn{
  background:#ffffff;
  color:var(--fg);
  border:2px solid var(--border);
  border-left-width:14px;
  border-left-style:solid;
  border-left-color:var(--muted);
}
button.daybtn.state-ok  { border-left-color:#0b6b2f; }                 /* 绿：还能休 */
button.daybtn.state-few { border-left-color:#9a5b00; background:#fffaf1; } /* 橙：快满了 */
button.daybtn.state-full{ border-left-color:#b3261e; background:#faf3f3; color:#333333; } /* 红：已满 */
button.daybtn.mine{ background:#f3e8f8; border-color:#6a1b9a; border-left-color:#6a1b9a; } /* 紫：我已休 */

/* 今天那一格：金色粗描边 + 淡黄底，明眼人一眼找到 */
button.daybtn.today{
  border-color:#d98b00;
  border-width:4px;
  background:#fff8e6;
  font-weight:700;
}
button.daybtn.today.state-full{ background:#fdf1e0; }

/* 后台概览里的人数：按满/未满上色 */
.cnt{ font-weight:700; }
.cnt.ok{   color:#0b6b2f; }
.cnt.few{  color:#9a5b00; }
.cnt.full{ color:#b3261e; }

/* 待处理的超休申请卡片：左侧红色提示条 */
.card.pending{ border-left-width:14px; border-left-color:#b3261e; }

/* 颜色说明图例 */
.legend{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:.4em 0; }
.legend .legend-title{ color:var(--muted); }

/* 页面最下面的「返回」按钮（保存/确认按钮之后再来一个，方便 Tab 往下够到） */
.back-bottom{ margin:20px 0 0; }
.back-bottom button{ width:100%; }

/* 组织架构页：部门树（用 details/summary，键盘与读屏天生支持） */
details.orgnode{
  border:2px solid var(--border);
  border-radius:10px;
  margin:6px 0;
  padding:6px 10px;
  background:#fff;
}
details.orgnode > summary{
  font-weight:700;
  cursor:pointer;
  padding:4px 0;
}
details.orgnode > summary:focus{ outline:4px solid #ff9f00; outline-offset:2px; }
details.orgnode .orgkids{ margin-left:16px; border-left:3px solid #e6e6e6; padding-left:8px; }
details.orgnode .orgmem ul.list li{ border-bottom:1px solid #eee; padding:4px 0; }

/* 可 Tab 到的姓名（读屏用户靠它知道在给谁发消息／这是谁） */
.staff-name{ font-weight:700; }

/* 组织架构页的两栏切换（4.30：组织架构全貌 / 人员清单）
   钟总 2026-10-18 要「加在人事管理里面、和组织架构同页面」，所以做成同一页的两栏，
   不另开一个菜单项——菜单越少，找人越快。 */
.org-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 6px; }
.org-tab{
  font:inherit; font-weight:700; cursor:pointer;
  padding:8px 18px; border:2px solid var(--border); border-radius:999px;
  background:#fff; color:var(--fg);
}
.org-tab.on{ background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.org-tab:focus{ outline:4px solid #ff9f00; outline-offset:2px; }

/* 人员清单的快捷筛选。一屏能看全各类有多少人，点一下就是那一类人的待办清单 */
.chip.pl-chip{
  cursor:pointer; font:inherit; font-size:.92em; font-weight:700;
  border:2px solid var(--border); background:#fff; color:var(--fg); padding:4px 12px;
}
.chip.pl-chip.on{ background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.chip.pl-chip:focus{ outline:4px solid #ff9f00; outline-offset:2px; }

/* 人员清单的表格：列多，窄屏允许横向滚，不要挤成一团 */
#pl-table{ overflow-x:auto; margin:8px 0; }
.pl-tab{ width:100%; border-collapse:collapse; font-size:.82em; }
.pl-tab th, .pl-tab td{ border:1px solid #ddd; padding:6px 8px; text-align:left; vertical-align:top; white-space:nowrap; }
.pl-tab thead th{ background:var(--soft); font-weight:700; }
.pl-tab tr.pl-gone td{ color:var(--muted); }
.pl-miss{ color:var(--warn); font-weight:700; }

/* =========================================================
   总部后台通用弹层（4.172，钟总 2026-11-08 测出来的）
   —— hqOpenOverlay 生成的那两层（.hq-ovl／.hq-ovl-box）从 2.82 起一直只有 class、没写样式，
      真机上就是页面最底下一块白底字，按了按钮像没反应。这里照 .modal-mask 那套补上：
      铺满视口、白底圆角、大字号、够高的对比，手机上也点得着。
   —— .hq-ovl-box 带 tabindex=-1，打开时焦点落它身上（读屏念「对话框」），所以也给它描个焦点框。
   ========================================================= */
.hq-ovl{
  position:fixed; inset:0; z-index:60;
  background:rgba(0,0,0,.45);
  display:flex; align-items:flex-start; justify-content:center;
  padding:16px; overflow-y:auto;
}
.hq-ovl-box{
  background:var(--bg); color:var(--fg);
  width:100%; max-width:640px; margin:auto 0;
  border:2px solid var(--border); border-radius:14px;
  padding:16px 16px 20px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.hq-ovl-box h3{ margin:16px 0 8px; }
.hq-ovl-box h3:first-child{ margin-top:0; }
/* 4.189：hqConfirmBox 的确认弹层（role=alertdialog）——外观跟 .hq-ovl 同款，类名分开，
   免得 closeHqOverlay 把它当普通弹层顺手端掉、把还没答的 Promise 弄丢 */
.hq-cbox{
  position:fixed; inset:0; z-index:70;
  background:rgba(0,0,0,.45);
  display:flex; align-items:flex-start; justify-content:center;
  padding:16px; overflow-y:auto;
}
.hq-cbox .hq-ovl-box{ max-width:520px; }

/* 4.172：项目负责人组合框的结果列表（role=listbox，每行 role=option，↑↓挑、回车定） */
#pj-hits{
  border:2px solid var(--border); border-radius:10px; background:#fff;
  margin:8px 0 12px; max-height:340px; overflow:auto;
}
#pj-hits[hidden]{ display:none; }
#pj-hits .pj-opt{ padding:10px 12px; border-bottom:1px solid #e6dccb; }
#pj-hits .pj-opt:last-child{ border-bottom:0; }
#pj-hits .pj-opt.on, #pj-hits .pj-opt[aria-selected="true"]{
  background:#fff3d6; outline:3px solid #ff9f00; outline-offset:-3px;
}

/* =========================================================
   弹层（4.36 统一）
   —— 4.32/4.33 那两个框（核对、改资料）只写了 class、没写样式，
      真机上就是散在页面最底下一块白底字。这里补一套共用的，
      新加的「切换岗位」也用它。大字号、够高的对比，手机上好点。
   ========================================================= */
.modal-mask{
  position:fixed; inset:0; z-index:50;
  background:rgba(0,0,0,.45);
  display:flex; align-items:flex-start; justify-content:center;
  padding:16px; overflow-y:auto;
}
.modal-box{
  background:var(--bg); color:var(--fg);
  width:100%; max-width:560px; margin:auto 0;
  border:2px solid var(--border); border-radius:14px;
  padding:16px 16px 20px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.modal-box h2{ margin:0 0 8px; }
.modal-box .list{ padding-left:0; list-style:none; }
.modal-box .list li{ margin:6px 0; }
.modal-box button.ident-go{ width:100%; text-align:left; }
.modal-box button.ident-go.on{ background:var(--soft); border-color:var(--accent); font-weight:700; }
.modal-box button:disabled{ opacity:.72; }

/* 4.91（钟总 10-29 定）：拆分派工弹框每件排整齐——
   全局按钮是整行宽、输入框也各带内联宽度，加了「上级备注」后一行挤不下，
   控件三三两两乱换行，「删」还独占一整行。改成两列网格：
   类目｜责任人 一行，这件干什么独占一行，完成时间｜活动开始 一行，上级备注｜删 一行。 */
.sp-row, .sb-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:8px;
}
.sp-row > select, .sp-row > input,
.sb-row > select, .sb-row > input{
  width:100%;
  max-width:none;
  margin:0;
}
.sp-row > .sp-note, .sb-row > .sb-note{ grid-column:1 / -1; }   /* 这件干什么：整行写清楚 */
.sp-row > .sp-del, .sb-row > .sb-del{
  width:auto;
  margin:0;
  padding:10px 18px;
  justify-self:start;
}

/* ── 4.117 招聘漏斗看板 ──
   数据表在手机上要能横着划（列多），别把页面撑开。 */
.hr-tbl{ border-collapse:collapse; width:100%; margin:8px 0 16px; }
.hr-tbl th, .hr-tbl td{ border:1px solid #ddd; padding:6px 8px; text-align:left; vertical-align:top; white-space:nowrap; }
.hr-tbl thead th{ background:#f2f6fa; }