/* =============================================================
   多端适配 —— SPEC §3.9
   -------------------------------------------------------------
   | 端     | 断点        | 范围                                    |
   |--------|-------------|-----------------------------------------|
   | PC     | ≥ 1200px    | 全功能，管理端主战场                    |
   | 平板   | 768–1199px  | 日视图排程板 + 可调配人员，为触控重设计 |
   | 手机   | < 768px     | 本人排班、休假申请、通知确认            |

   平板不是「把 PC 页面缩小」：热区放大到 44px 触控标准，可调配
   面板改为底部抽屉，调配用长按触发，日期用左右滑动切换。

   手机端等价于小程序范围（SPEC §3.9），排班生成与规则配置不提供
   ——这是规格明确写的「移动端不做」，不是没做完。
============================================================= */

/* ============ 平板：768 – 1199px ============ */
@media (max-width:1199px){
  :root{--rail-w:200px}
  .main{padding:15px 16px 50px}
  .split{flex-direction:column}
  .split>.side{width:100%}
  .day-shell{flex-direction:column}
  .day-side{width:100%}
  .avail{position:static}
  .avail-bd{max-height:none}
  /* 可调配人员在平板上改为两列，减少滚动 */
  .avail-bd{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .lvl-hd{grid-column:1/-1;position:static}
  .grid-2{grid-template-columns:1fr}
}

@media (max-width:1199px) and (pointer:coarse){
  /* 触控设备：热区放大到 44px 标准 */
  .btn{padding:10px 15px;font-size:14px}
  .btn.sm{padding:7px 12px;font-size:13px}
  .btn.xs{padding:5px 10px;font-size:12px}
  .sidenav a{padding:11px 18px;font-size:14px}
  .tab{padding:11px 17px;font-size:14px}
  table.ledger td{padding:10px}
  .menu .mi{padding:11px 13px;font-size:14px}
  .av-i{padding:11px 13px}
  td.cell{height:34px;min-width:34px;width:34px}
  .hd-day{min-width:34px;width:34px}
  td.bar{min-width:34px;width:34px}
  .fld input,.fld select,.fld textarea{padding:9px 11px;font-size:14px}
  /* 触控上没有 hover，用按压反馈代替 */
  td.cell:active{box-shadow:inset 0 0 0 2px var(--drape2)}
  .av-i:active{background:var(--wash)}
}

/* ============ 手机：< 768px ============ */
@media (max-width:767px){
  :root{--topbar-h:52px}

  .topbar{padding:8px 13px;gap:10px}
  .topbar h1{font-size:14px}
  .topbar .sub{display:none}
  .topbar .actions .btn{padding:7px 10px;font-size:12.5px}
  .topbar .actions .btn.pc-only{display:none}
  .who-btn .rl{display:none}

  /* 侧边导航改为抽屉，用汉堡按钮开合 */
  .nav-toggle{
    display:grid;place-items:center;width:34px;height:34px;
    border:1px solid var(--line-strong);background:var(--surface);border-radius:3px;
    font-size:15px;color:var(--ink2);flex-shrink:0;
  }
  .shell{flex-direction:column}
  .sidenav{
    position:fixed;top:var(--topbar-h);left:0;bottom:0;width:250px;z-index:120;
    transform:translateX(-100%);transition:transform .22s ease-out;
    box-shadow:4px 0 22px rgba(21,36,43,.16);height:auto;
  }
  body.nav-open .sidenav{transform:none}
  body.nav-open::after{
    content:"";position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(21,36,43,.34);z-index:110;
  }
  .main{padding:13px 12px 44px;width:100%}

  .page-hd{gap:9px}
  .page-hd h2{font-size:15.5px}
  .page-hd .desc{font-size:12px}
  .page-hd .actions{margin-left:0;width:100%}
  .page-hd .actions .btn{flex:1}

  .readout{--readout-h:auto}
  .metric{min-width:104px;padding:8px 13px}
  .metric .v{font-size:16px}

  .card{padding:13px;margin-bottom:13px}
  .filter{padding:10px;gap:8px}
  .filter input,.filter select{min-width:0;flex:1}
  .filter label{width:100%}
  .filter .spacer{display:none}

  .grid-2,.grid-3{grid-template-columns:1fr}
  .fld-row{flex-direction:column;gap:0}
  .balance{grid-template-columns:1fr}
  .avail-bd{grid-template-columns:1fr}

  .modal-mask{padding:0;align-items:flex-end}
  .modal{max-width:100%;border-radius:6px 6px 0 0;max-height:92vh}
  .modal-ft{position:sticky;bottom:0;background:var(--surface)}
  .modal-ft .btn{flex:1}
  .drawer{width:100%}
  .toast-host{left:12px;right:12px;top:auto;bottom:14px}
  .toast{max-width:100%}

  .board-wrap{max-height:none}
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tab{flex-shrink:0}

  /* 移动端不提供的功能：给出明确说明，而不是让按钮点了没反应 */
  .mobile-na{
    background:var(--paper);border:1px dashed var(--line-strong);border-radius:3px;
    padding:22px 16px;text-align:center;color:var(--slate);font-size:12.5px;line-height:1.7;
  }
  .mobile-na b{display:block;color:var(--ink2);font-size:13.5px;margin-bottom:6px}
}

/* ============ 手机端「我的排班」日历 ============ */
.my-cal{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:11px}
.my-cal-hd{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.my-cal-hd .m{font-family:var(--font-mono);font-size:15px;font-weight:600;flex:1;text-align:center}
.my-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.my-dow{
  text-align:center;font-size:10.5px;color:var(--slate);font-family:var(--font-mono);
  padding-bottom:4px;
}
.my-dow.wk{color:var(--amber)}
.my-d{
  aspect-ratio:1;border:1px solid var(--line);border-radius:3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--surface);position:relative;min-height:42px;
}
.my-d.empty-d{border:none;background:none}
.my-d.wk{background:#F5F7F6}
.my-d.today{border-color:var(--drape);border-width:2px}
.my-d .dnum{font-family:var(--font-mono);font-size:11px;color:var(--slate);line-height:1}
.my-d.today .dnum{color:var(--drape);font-weight:700}
.my-d .chip{font-size:10px;height:17px;line-height:17px;min-width:17px;padding:0 3px}
.my-legend{display:flex;gap:11px;flex-wrap:wrap;margin-top:11px;font-size:11.5px;color:var(--ink2)}

/* 手机端通知卡片 */
.notice{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--drape);
  border-radius:3px;padding:11px 13px;margin-bottom:9px;
}
.notice.unread{border-left-color:var(--amber);background:#FFFDF9}
.notice.recall{border-left-color:var(--crimson);background:#FEFAFA}
.notice-t{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.notice-m{font-size:12px;color:var(--ink2);margin-top:5px;line-height:1.6}
.notice-f{display:flex;align-items:center;gap:9px;margin-top:9px}
.notice-f .tm{font-size:11px;color:var(--slate);font-family:var(--font-mono);margin-right:auto}

/* ============ 打印：把班表打出来贴在科室墙上 ============ */
@media print{
  .topbar,.sidenav,.readout,.page-hd .actions,.filter,.tabs,.legend,.pager,.btn{display:none !important}
  .main{padding:0}
  .card{border:none;padding:0;margin-bottom:10px}
  .board-wrap{max-height:none;overflow:visible;border:1px solid #999}
  body{background:#fff}
  td.cell,.hd-day{width:24px;min-width:24px}
}