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

: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; }

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;
}
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; }

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; }

/* 技师端首页的两个入口大按钮：字大、居中、好点好读 */
.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;
}

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

/* 色标小胶囊：深色字 + 同色浅底 + 同色描边，白底上也清晰 */
.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; }
/* 岗位 */
.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; }