/* 商户端 hotel_portal 样式（浅色主题）
   设计原则：左侧固定导航 + 右侧内容区；卡片式分区；表格紧凑但不挤。
   字号基准 14px，与 PMS 后台保持一致的阅读密度。 */
:root{
  --bg:#f4f6f8;
  --panel:#ffffff;
  --line:#e3e8ee;
  --text:#1f2937;
  --muted:#7b8794;
  --brand:#1f3b33;
  --brand-2:#a8823c;
  --ok:#16a34a;
  --warn:#e08c00;
  --danger:#dc3545;
  --info:#2563eb;
  --radius:8px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
    "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px;
}
a{color:var(--info);text-decoration:none}
a:hover{text-decoration:none;opacity:.85}

/* ── 布局 ── */
.layout{display:flex;min-height:100vh}
.side{
  width:212px;flex:0 0 212px;background:var(--brand);color:#e8efec;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.side-brand{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.brand-logo{
  width:36px;height:36px;flex:0 0 36px;border-radius:8px;
  background:linear-gradient(135deg,var(--brand-2),#d8b86a);
  display:flex;align-items:center;justify-content:center;color:#1f3b33;font-size:17px;
}
.brand-name{font-size:14px;font-weight:600;color:#fff;line-height:1.25}
.brand-sub{font-size:11px;color:#a9c0b8}
.side-nav{flex:1;overflow-y:auto;padding:8px 0}
.nav-group{font-size:11px;color:#8aa69d;padding:12px 16px 4px;letter-spacing:.5px}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:9px 16px;
  color:#cfe0da;font-size:13.5px;border-left:3px solid transparent;
}
.nav-item i{width:15px;text-align:center;font-size:13px}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;opacity:1}
.nav-item.active{background:rgba(255,255,255,.12);color:#fff;border-left-color:var(--brand-2)}
.side-foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.1)}
.side-foot .who{font-size:13px;color:#dfeae6;margin-bottom:8px}
.side-foot .role{font-size:11px;background:rgba(255,255,255,.15);border-radius:9px;padding:1px 7px;margin-left:4px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:54px;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;
  position:sticky;top:0;z-index:20;
}
.page-title{font-size:16px;font-weight:600;margin:0}
.topbar-right{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--muted)}
.clock{font-variant-numeric:tabular-nums}
.content{padding:18px 20px 40px}

/* ── 卡片 ── */
.card-x{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px}
.card-x>.hd{
  padding:12px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.card-x>.hd h3{font-size:14.5px;font-weight:600;margin:0;display:flex;align-items:center;gap:7px}
.card-x>.hd .sub{font-size:12px;color:var(--muted)}
.card-x>.bd{padding:16px}
.card-x>.bd.p0{padding:0}

/* ── 统计卡 ── */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.stat .lbl{font-size:12.5px;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.stat .val{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.stat .val small{font-size:12px;font-weight:400;color:var(--muted);margin-left:3px}
.stat.ok .val{color:var(--ok)}
.stat.warn .val{color:var(--warn)}
.stat.info .val{color:var(--info)}

/* ── 表格 ── */
table.tb{width:100%;border-collapse:collapse;font-size:13.5px}
table.tb th{
  background:#f7f9fb;color:#516070;font-weight:600;font-size:12.5px;
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.tb td{padding:9px 12px;border-bottom:1px solid #eef2f6;vertical-align:middle}
table.tb tbody tr:hover{background:#fafcfe}
table.tb .num{font-variant-numeric:tabular-nums;text-align:right}
table.tb .empty{text-align:center;color:var(--muted);padding:26px 0}

/* ── 标签 ── */
.tag{display:inline-block;font-size:11.5px;padding:1px 7px;border-radius:9px;line-height:17px;margin-right:4px}
.tag.on{background:#e6f6ec;color:#0f7a3d;border:1px solid #b9e3c9}
.tag.off{background:#f1f3f5;color:#7b8794;border:1px solid #dde2e7}
.tag.blue{background:#e8f0fe;color:#1a56db;border:1px solid #c3d7fb}
.tag.gold{background:#fdf4e3;color:#9a6b12;border:1px solid #f0dcb0}
.tag.red{background:#fdeaea;color:#c02626;border:1px solid #f5c6c6}

/* ── 图片网格 ── */
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.img-cell{
  position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:#f8fafb;aspect-ratio:4/3;
}
.img-cell img{width:100%;height:100%;object-fit:cover;display:block}
.img-cell .bar{
  position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);
  color:#fff;font-size:11.5px;padding:4px 6px;display:flex;justify-content:space-between;
  opacity:0;transition:opacity .15s;
}
.img-cell:hover .bar{opacity:1}
.img-cell .bar i{cursor:pointer;padding:0 3px}
.img-cell .cover-flag{
  position:absolute;left:6px;top:6px;background:var(--brand-2);color:#fff;
  font-size:11px;padding:1px 6px;border-radius:8px;
}
.img-drop{
  border:1.5px dashed #c8d2dc;border-radius:6px;background:#fbfdfe;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--muted);font-size:12.5px;gap:5px;cursor:pointer;aspect-ratio:4/3;
}
.img-drop:hover{border-color:var(--brand-2);color:var(--brand-2);background:#fffdf8}
.img-drop i{font-size:20px}

/* ── 功能开关 ── */
.mod-card{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;background:var(--panel)}
.mod-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer}
.mod-hd .nm{font-weight:600;font-size:14px}
.mod-hd .cnt{font-size:12px;color:var(--muted);margin-left:auto}
.mod-kids{border-top:1px dashed var(--line);padding:6px 16px 12px;display:none}
.mod-kids.open{display:block}
.kid{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px;border-bottom:1px dotted #f0f3f6}
.kid:last-child{border-bottom:none}
.kid .nm{flex:1}
.kid .hint{font-size:11.5px;color:var(--muted)}
.switch{position:relative;display:inline-block;width:42px;height:23px;flex:0 0 42px}
.switch input{opacity:0;width:0;height:0}
.switch .slider{
  position:absolute;inset:0;background:#c9d3dc;border-radius:23px;
  transition:.2s;cursor:pointer;
}
.switch .slider:before{
  content:"";position:absolute;height:17px;width:17px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.2s;
}
.switch input:checked+.slider{background:var(--ok)}
.switch input:checked+.slider:before{transform:translateX(19px)}
.switch input:disabled+.slider{opacity:.5;cursor:not-allowed}

/* 平台授权提示条：告诉酒店「能用哪些」是服务商定的，这里只是在授权范围内开关 */
.grant-bar{
  border:1px solid #d7e3f5;border-left:3px solid var(--brand-2);background:#f4f8fd;
  border-radius:var(--radius);padding:9px 14px;margin-bottom:12px;font-size:13px;color:#33415c;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
}
.grant-bar .gb-head{font-weight:600}
.grant-bar .gb-head b{color:var(--brand-2)}
.grant-bar .gb-tail{color:var(--muted);font-size:12.5px}
.grant-bar.gb-ok{border-left-color:var(--ok);background:#f3faf6;border-color:#d5ecdf}
.grant-bar.gb-ok .gb-head b{color:var(--ok)}

/* ── 表单 ── */
.form-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.fld{margin-bottom:12px}
.fld>label{display:block;font-size:12.5px;color:#4b5563;margin-bottom:4px;font-weight:500}
.fld>label .req{color:var(--danger)}
.fld .tip{font-size:11.5px;color:var(--muted);margin-top:3px}
.form-control{font-size:13.5px;height:calc(1.5em + .7rem + 2px);border-color:#d6dee6}
.form-control:focus{border-color:var(--brand-2);box-shadow:0 0 0 .16rem rgba(168,130,60,.15)}
select.form-control{height:auto;padding:.35rem .6rem}
textarea.form-control{height:auto;min-height:74px}
.chk-wrap{display:flex;flex-wrap:wrap;gap:7px}
.chk{
  font-size:12.5px;border:1px solid #d6dee6;border-radius:14px;padding:3px 11px;
  cursor:pointer;user-select:none;background:#fff;
}
.chk:hover{border-color:var(--brand-2)}
.chk.sel{background:#fdf7ea;border-color:var(--brand-2);color:#8a6a1d;font-weight:500}

/* ── 按钮 ── */
.btn{font-size:13.5px;border-radius:6px}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover{background:#2a4d43;border-color:#2a4d43;color:#fff}
.btn-gold{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.btn-gold:hover{background:#96742f;border-color:#96742f;color:#fff}
.btn-xs{font-size:12px;padding:2px 8px;border-radius:5px;line-height:1.5}
.btn-outline-secondary{color:#5b6673;border-color:#cfd8e0}

/* ── 日历 ── */
.cal-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.cal{border-collapse:collapse;font-size:12.5px;white-space:nowrap}
table.cal th{
  background:#f7f9fb;border:1px solid var(--line);padding:6px 8px;
  position:sticky;top:0;z-index:5;font-weight:600;color:#516070;
}
table.cal th.rt-name{position:sticky;left:0;z-index:6;text-align:left;min-width:120px}
table.cal td{border:1px solid #eef2f6;padding:0;text-align:center;vertical-align:top}
table.cal td.rt-name{
  position:sticky;left:0;z-index:3;background:#fbfcfd;text-align:left;padding:7px 10px;
  border-right:1px solid var(--line);
}
table.cal .d-cell{width:62px;min-width:62px;cursor:pointer;padding:4px 2px;line-height:1.45}
table.cal .d-cell:hover{background:#f6fbf8;outline:1px solid var(--brand-2);outline-offset:-1px}
table.cal .d-cell.sel{background:#eef7f1;outline:2px solid var(--ok);outline-offset:-2px}
table.cal .d-cell.closed{background:#fafbfc;color:#b3bbc4}
table.cal .d-cell .p{font-weight:600;font-variant-numeric:tabular-nums}
table.cal .d-cell .s{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
table.cal .d-cell.soldout .s{color:var(--danger)}
table.cal .d-cell.low .s{color:var(--warn)}
table.cal th.weekend{color:#c02626}
table.cal .sat{background:#fcfaf6}

/* ── 弹窗 ── */
.modal-content{border:none;border-radius:10px;overflow:hidden}
.modal-header{background:#f7f9fb;border-bottom:1px solid var(--line);padding:12px 18px}
.modal-title{font-size:15px;font-weight:600}
.modal-body{padding:18px;max-height:70vh;overflow-y:auto}
.modal-footer{border-top:1px solid var(--line);padding:11px 18px;background:#fbfcfd}
.modal-backdrop.show{opacity:.35}

/* ── Toast ── */
.toast-wrap{position:fixed;right:18px;top:66px;z-index:3000;display:flex;flex-direction:column;gap:8px}
.tst{
  min-width:200px;max-width:360px;background:#fff;border-left:4px solid var(--info);
  border-radius:6px;box-shadow:0 6px 20px rgba(20,40,60,.14);padding:10px 14px;
  font-size:13.5px;animation:tin .18s ease-out;
}
.tst.ok{border-left-color:var(--ok)}
.tst.err{border-left-color:var(--danger)}
.tst.warn{border-left-color:var(--warn)}
@keyframes tin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ── 登录页 ── */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1f3b33,#2c5748 55%,#a8823c);
  padding:20px;
}
.login-box{
  width:100%;max-width:396px;background:#fff;border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.24);padding:30px 30px 26px;
}
.login-box .lg-brand{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.login-box .lg-logo{
  width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand),#2c5748);color:var(--brand-2);font-size:21px;
}
.login-box h1{font-size:18px;font-weight:600;margin:0}
.login-box .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.login-box .form-control{height:42px;font-size:14px}
.login-err{
  background:#fdeaea;border:1px solid #f5c6c6;color:#c02626;font-size:13px;
  border-radius:6px;padding:8px 11px;margin-bottom:12px;display:none;
}
.login-foot{font-size:12px;color:var(--muted);text-align:center;margin-top:16px;line-height:1.7}

/* ── 其他 ── */
.empty-box{text-align:center;color:var(--muted);padding:34px 12px;font-size:13.5px}
.empty-box i{font-size:34px;display:block;margin-bottom:10px;opacity:.35}
.hr{height:1px;background:var(--line);margin:14px 0}
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.filters .form-control{width:auto;flex:0 0 auto;min-width:130px;max-width:220px;height:34px}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;padding:10px 14px;font-size:12.5px;color:var(--muted)}
.mono{font-family:Consolas,Monaco,monospace;font-size:12.5px}
.tiny{font-size:11.5px;color:var(--muted)}
@media (max-width:900px){
  .side{position:fixed;left:-212px;transition:left .2s;z-index:100}
  .side.open{left:0}
  .form-row2,.form-row3{grid-template-columns:1fr}
  .content{padding:14px}
}