/* 学仕民宿运营后台 · 样式表
   设计原则：手机优先、大点击区、日光下清晰可读 */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  --bg:#f5f3ef;
  --card:#ffffff;
  --line:#e8e3da;
  --line-2:#dcd5c8;
  --text:#2c2a26;
  --muted:#8a8378;
  --dim:#a9a298;
  --gold:#a8802f;
  --gold-bg:#fbf5e8;
  --red:#b4433c;
  --red-bg:#fbeeed;
  --blue:#2f6cab;
  --radius:12px;
  --radius-s:9px;
}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  font-size:15px;line-height:1.6;
  padding-bottom:40px;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:Consolas,Menlo,monospace;font-size:13px}

/* ---------- 顶栏 ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px 9px}
.brand{display:flex;align-items:baseline;gap:8px;min-width:0}
.brand-mark{font-size:17px;font-weight:600;color:var(--gold);letter-spacing:.06em;flex:none}
.brand-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);flex:none}
.who-name{color:var(--text);font-weight:500}
.who-role{background:var(--gold-bg);color:var(--gold);border:1px solid #eddfc0;border-radius:20px;padding:1px 8px;font-size:11px}
.who-out{color:var(--muted);border-left:1px solid var(--line);padding-left:7px}

.nav{display:flex;gap:6px;overflow-x:auto;padding:0 12px 9px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-a{flex:none;font-size:13px;color:var(--muted);padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:#fbfaf8;white-space:nowrap}
.nav-a:hover{text-decoration:none;color:var(--text);border-color:var(--line-2)}
.nav-a.on{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:500}

.wrap{max-width:1000px;margin:0 auto;padding:16px 14px 0}

/* ---------- 提示 ---------- */
.flash{border-radius:var(--radius-s);padding:11px 14px;font-size:14px;margin-bottom:12px;border:1px solid}
.flash-ok{background:#ebf6f0;border-color:#b9e0cc;color:#1d6b4f}
.flash-warn{background:#fdf3e2;border-color:#edd0a0;color:#8a6216}
.flash-err{background:var(--red-bg);border-color:#e7c0bd;color:var(--red)}

/* ---------- 区块 ---------- */
.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px;flex-wrap:wrap}
.sec-t{font-size:15px;font-weight:600}
.sec-t small{font-weight:400;font-size:12px;color:var(--muted);margin-left:8px}
.sec-x{font-size:13px;color:var(--muted)}
.sec-p{padding:8px 16px 14px}

h1.page-t{font-size:19px;font-weight:600;margin:2px 0 4px}
.page-d{font-size:13px;color:var(--muted);margin-bottom:14px}

/* ---------- 指标卡 ---------- */
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:13px 14px}
.metric-l{font-size:12px;color:var(--muted);margin-bottom:5px}
.metric-v{font-size:23px;font-weight:600;line-height:1.25}
.metric-v em{font-size:13px;font-weight:400;color:var(--muted);font-style:normal;margin-left:3px}
.metric-s{font-size:11.5px;color:var(--dim);margin-top:3px}
.metric.hi{border-color:#eddfc0;background:#fffdf7}
/* 指标卡分类顶边色（2026-09-19 可读性优化） */
.metric.m-green{border-top:3px solid #2f9d6b}
.metric.m-blue{border-top:3px solid #2f6cab}
.metric.m-amber{border-top:3px solid #d99a1f}
.metric.m-purple{border-top:3px solid #7a55c0}
.metric.m-gray{border-top:3px solid #9a938a}
.metric.m-red{border-top:3px solid #b4433c}
/* 与房态看板一一对应的顶边色（2026-09-21）：指标卡颜色必须和下面的房间卡一致 */
.metric.m-free{border-top:3px solid #83cba4}
.metric.m-arrival{border-top:3px solid #15a04a}
.metric.m-booked{border-top:3px solid #0d7d95}
.metric.m-occupied{border-top:3px solid #2563eb}
.metric.m-dirty{border-top:3px solid #cd9310}

/* ---------- 房态看板 ---------- */
.floor{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--line)}
.floor:last-child{border-bottom:none}
.floor-l{flex:none;width:44px;font-size:13px;color:var(--muted);padding-top:9px}
.floor-r{flex:1;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.room{
  flex:1 1 78px;min-width:78px;max-width:126px;border-radius:var(--radius-s);
  padding:8px 7px 7px;text-align:center;border:2px solid transparent;display:block;
  transition:transform .12s ease,box-shadow .12s ease;
}
.room:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 12px rgba(44,42,38,.18)}
.room:active{transform:scale(.97)}
.room-no{display:block;font-size:16px;font-weight:700;line-height:1.2;letter-spacing:.02em}
.room-st{display:block;font-size:11.5px;line-height:1.35;font-weight:600;margin-top:1px}
.room-g{display:block;font-size:10.5px;line-height:1.3;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 下单页房卡：「今有在住」标注（2026-09-23）——该房当前有在住订单未退，
   今晚入住前须先退房并清洁；琥珀色警示但不禁止（预订看日历是合法的） */
.room-occ{display:block;font-size:10.5px;line-height:1.35;margin-top:3px;font-weight:600;
  color:#8a6216;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 状态圆点：颜色之外的冗余提示，色盲或阳光直射下也能分辨 */
.room .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:4px;vertical-align:1px;opacity:.95}

/* 七种房态 = 七种明显不同的外观（2026-09-21 二次重制）
   规律：浅底=还能卖；深实底=已被占；斜纹=停用。
   色相 + 深浅 + 圆点 + 文字四重编码，弱光/小屏也分得清。 */
.st-free{background:#e9f8ef;border-color:#83cba4;color:#116643}
.st-arrival{background:#15a04a;border-color:#0d8039;color:#fff}
.st-booked{background:#0d7d95;border-color:#0a6578;color:#fff}
.st-occupied{background:#2563eb;border-color:#1b4fd1;color:#fff}
.st-dirty{background:#f4b41c;border-color:#cd9310;color:#3d2b00}
.st-self{background:#8b5cf6;border-color:#7140e2;color:#fff}
.st-closed{
  background:repeating-linear-gradient(135deg,#e7e4de 0 6px,#d0ccc4 6px 12px);
  border-color:#a29c90;color:#635d52;
}

.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;color:var(--text);margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* 退房时间提醒：格子内描边。必须排在 .room:hover 之后，
   否则鼠标悬浮时 .room:hover 的 box-shadow 会把描边盖掉 */
.room-ck-overdue{box-shadow:inset 0 0 0 2px #b4433c}
.room-ck-due_now{box-shadow:inset 0 0 0 2px #d99a1e}
.room-ck-soon{box-shadow:inset 0 0 0 2px #2f6cab}
.room-ck-overdue:hover{box-shadow:inset 0 0 0 2px #b4433c,0 4px 12px rgba(44,42,38,.18)}
.room-ck-due_now:hover{box-shadow:inset 0 0 0 2px #d99a1e,0 4px 12px rgba(44,42,38,.18)}
.room-ck-soon:hover{box-shadow:inset 0 0 0 2px #2f6cab,0 4px 12px rgba(44,42,38,.18)}
.legend-note{font-size:12px;color:var(--muted);margin-top:9px;line-height:1.75}
.legend-note b{font-weight:500}
.ck-over{color:var(--red)}
.ck-due{color:#8a6216}
.ck-soon{color:var(--blue)}

/* ---------- 列表行 ---------- */
.rows{border-top:1px solid var(--line)}
.row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.row:last-child{border-bottom:none}
.row-main{flex:1;min-width:0}
.row-t{font-size:14.5px;font-weight:500;margin-bottom:2px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.row-s{font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px}
.row-r{flex:none;text-align:right;font-size:13px}
.row-r b{font-size:15px;font-weight:600}

/* ---------- 徽标 ---------- */
.badge{display:inline-block;font-size:11px;padding:1.5px 8px;border-radius:20px;border:1px solid;line-height:1.55;white-space:nowrap}
.b-pending{background:#fdf3e2;border-color:#edd0a0;color:#8a6216}
.b-confirmed{background:#d9f2e3;border-color:#63bd8e;color:#136b44}
.b-in{background:#d9eafc;border-color:#7fb2e6;color:#17558f}
.b-out{background:#eef0ee;border-color:#d5dad4;color:#5d6a60}
.b-cancelled{background:#f2f1ef;border-color:#dcd8d1;color:#98918a}
.b-noshow{background:var(--red-bg);border-color:#e7c0bd;color:var(--red)}
/* 退房时刻三档：红=已超期 / 橙=今日已过退房点 / 蓝=即将到点（2026-09-22 新增） */
.b-due{background:#fdf3e2;border-color:#edd0a0;color:#8a6216}
.b-soon{background:#eef4fb;border-color:#c3d8ee;color:#2f6cab}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:5px;background:#f4f2ee;border:1px solid var(--line);color:#79736a;white-space:nowrap}
.tag-ch{background:#f6f4f0}
.tag-p0{background:var(--gold-bg);border-color:#eddfc0;color:var(--gold)}

/* ---------- 表格 ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-s);margin-bottom:4px}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
table.tbl th{text-align:left;padding:9px 11px;background:#faf8f5;color:var(--muted);font-weight:500;font-size:12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl td{padding:9px 11px;border-bottom:1px solid #f2efe9;vertical-align:top}
table.tbl tr:last-child td{border-bottom:none}
table.tbl td.c,table.tbl th.c{text-align:center}
table.tbl td.r,table.tbl th.r{text-align:right}
.tbl-tip{font-size:12px;color:var(--dim);margin-top:7px}

/* ---------- 表单 ---------- */
.fm{display:grid;gap:12px;margin-bottom:4px}
.fm-2{grid-template-columns:1fr}
.f{display:flex;flex-direction:column;gap:5px}
.f label{font-size:12.5px;color:var(--muted)}
.f .hint{font-size:11.5px;color:var(--dim)}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=tel],select,textarea{
  width:100%;font-size:15px;font-family:inherit;color:var(--text);
  padding:10px 11px;border:1px solid var(--line-2);border-radius:var(--radius-s);
  background:#fff;min-height:44px;outline:none;
}
textarea{min-height:92px;line-height:1.6;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(168,128,47,.12)}
input[type=checkbox]{width:19px;height:19px;vertical-align:middle}
.f-inline{display:flex;align-items:center;gap:8px;font-size:14px}
.f-row{display:flex;gap:10px;flex-wrap:wrap}
.f-row>.f{flex:1 1 150px;min-width:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:14.5px;font-family:inherit;padding:10px 17px;min-height:44px;
  border-radius:var(--radius-s);border:1px solid var(--line-2);background:#fff;color:var(--text);cursor:pointer}
.btn:hover{background:#faf8f5;text-decoration:none}
.btn-p{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:500}
.btn-p:hover{background:#966f26}
.btn-d{background:#fff;border-color:#e0bcb9;color:var(--red)}
.btn-d:hover{background:var(--red-bg)}
.btn-sm{font-size:12.5px;padding:5px 11px;min-height:32px;border-radius:7px}
.btn-blk{width:100%}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- 价格日历 ---------- */
.pcal{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pcal table{border-collapse:separate;border-spacing:4px;font-size:12px}
.pcal th{font-size:11px;color:var(--muted);font-weight:400;padding:2px 3px;text-align:center;white-space:nowrap}
.pcal td{padding:0}
.pcell{min-width:56px;padding:6px 5px;border-radius:7px;border:1px solid var(--line);background:#fbfaf8;text-align:center;font-size:12px;display:block}
.pcell:hover{text-decoration:none;border-color:var(--gold)}
.pcell b{display:block;font-weight:600;font-size:13px}
.pcell em{font-style:normal;display:block;font-size:10px;color:var(--dim);line-height:1.4}
.p-wk{background:#fdf6e8;border-color:#ecd8ab}
.p-hd{background:#fdeee9;border-color:#eec5b8}
.p-ov{background:#eaf4ec;border-color:#b4d9be}
.p-closed{background:#f2f0ec;border-color:#ddd8cf;color:#a09a91}

/* ---------- 日历格 ---------- */
.cal{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cal table{border-collapse:collapse;font-size:11px;min-width:600px}
.cal th{font-size:10.5px;color:var(--muted);font-weight:400;padding:3px 2px;text-align:center;white-space:nowrap;min-width:26px}
.cal th.wk{color:#a8802f}
.cal th.hd{color:#b4433c}
.cal td{padding:0;border:1px solid #f2efe9}
.cal td.lbl{position:sticky;left:0;background:#fff;font-size:11.5px;padding:0 6px;white-space:nowrap;border-left:none}
.cal .c{display:block;height:24px}
/* 可点格子（相关订单）：加大点击区 + 悬浮/聚焦描边（2026-09-22） */
.cal a.c{display:block;height:26px;position:relative;text-decoration:none;cursor:pointer}
.cal a.c:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:2px}
.cal a.c:hover:before,.cal a.c:focus:before{box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 0 0 2px rgba(20,18,14,.5)}
.cal a.c:active{transform:scale(.94)}
/* 与房态看板共用同一套色（2026-09-21 统一） */
.c-free{background:#e9f8ef;box-shadow:inset 0 0 0 1px #83cba4}
.c-booked{background:#0d7d95}
.c-occupied{background:#2563eb}
.c-self{background:#8b5cf6}
.c-closed{background:repeating-linear-gradient(135deg,#e7e4de 0 5px,#d0ccc4 5px 10px)}
/* 用 outline 而不是 box-shadow，免得把空房格的内描边覆盖掉 */
.c-today{outline:2px solid var(--gold);outline-offset:-2px}

/* ---------- 其他 ---------- */
.empty{padding:30px 14px;text-align:center;color:var(--dim);font-size:13.5px}
.pager{display:flex;align-items:center;gap:12px;justify-content:center;padding:14px 0 4px;font-size:13px}
.pager-now{color:var(--muted);font-size:12.5px}
.tabs{display:flex;gap:7px;overflow-x:auto;margin-bottom:13px;padding-bottom:2px}
.tab{flex:none;font-size:13px;padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--muted)}
.tab:hover{text-decoration:none;color:var(--text)}
.tab.on{background:var(--gold-bg);border-color:#eddfc0;color:var(--gold);font-weight:500}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px;align-items:baseline}
.kv dt{color:var(--muted);font-size:12.5px;white-space:nowrap}
.kv dd{margin:0;word-break:break-all}
.note{font-size:12.5px;color:var(--muted);background:#faf8f5;border:1px dashed var(--line-2);border-radius:var(--radius-s);padding:10px 12px;margin-top:10px}
.warn{border-color:#edd0a0;background:#fdf7ec;color:#8a6216}
.foot{max-width:1000px;margin:26px auto 0;padding:14px;border-top:1px solid var(--line);font-size:12px;color:var(--dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.foot-dim{color:#bdb7ae}
.bar{height:8px;background:#f5f2ec;border:1px solid var(--line);border-radius:5px;overflow:hidden;margin-top:5px}
.bar span{display:block;height:100%;background:var(--gold);border-radius:5px}
.bar span.lv-low{background:#3f9d6b}
.bar span.lv-mid{background:#d99a1f}
.bar span.lv-high{background:#b4433c}
.inline-note{font-size:12px;color:var(--dim);margin-top:6px}

@media (min-width:640px){
  .metrics{grid-template-columns:repeat(4,1fr)}
  .fm-2{grid-template-columns:1fr 1fr}
  .room{flex:0 1 96px}
}
@media print{
  .topbar,.nav,.acts,.pager{display:none}
}