/* ===================================================================
   拾眠 ERP · 自带设计系统（不依赖任何 CDN，机场断网也能正常显示）
   配色：以"休息/安睡"为意象的靛蓝 + 中性灰
   =================================================================== */
:root {
  --brand: #4f46e5;          /* 靛蓝主色 */
  --brand-dark: #4338ca;
  --brand-light: #eef2ff;
  --ink: #1e293b;            /* 主文字 */
  --ink-2: #475569;          /* 次文字 */
  --ink-3: #94a3b8;          /* 弱文字 */
  --line: #e2e8f0;           /* 分隔线 */
  --bg: #f1f5f9;             /* 页面背景 */
  --card: #ffffff;
  --ok: #16a34a; --ok-bg:#dcfce7;
  --warn: #d97706; --warn-bg:#fef3c7;
  --danger: #dc2626; --danger-bg:#fee2e2;
  --info: #2563eb; --info-bg:#dbeafe;
  --sidebar: #1e293b;
  --sidebar-ink: #cbd5e1;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg: 0 10px 25px rgba(15,23,42,.12);
}
* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body {
  font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  color: var(--ink); background: var(--bg); font-size: 14px; line-height: 1.6;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { margin: 0 0 .5em; font-weight: 600; color: var(--ink); }

/* ---------- 布局骨架 ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex-shrink:0; background: var(--sidebar); color: var(--sidebar-ink);
  position: sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column;
}
.sidebar .brand {
  padding: 18px 20px; font-size: 18px; font-weight: 700; color:#fff;
  display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar .brand small { font-weight:400; font-size:11px; color:var(--ink-3); }
.nav-group { padding: 10px 0 2px; }
.nav-group-title { padding: 8px 20px 4px; font-size:11px; color:#64748b; letter-spacing:.05em; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding: 9px 20px; color:var(--sidebar-ink);
  font-size:13.5px; border-left:3px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,.05); color:#fff; text-decoration:none; }
.nav-item.active { background: rgba(79,70,229,.18); color:#fff; border-left-color: var(--brand); }
.nav-item .ico { width:18px; text-align:center; opacity:.9; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar {
  height:56px; background:var(--card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:20;
}
.topbar .page-title { font-size:16px; font-weight:600; }
.topbar .right { display:flex; align-items:center; gap:16px; }
.store-pick { font-size:13px; color:var(--ink-2); }
.user-chip { display:flex; align-items:center; gap:8px; font-size:13px; }
.user-chip .avatar { width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600; }
.content { padding: 22px 24px; flex:1; }

/* ---------- 卡片 / 区块 ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-head { padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.card-head h3 { margin:0; font-size:15px; }
.card-body { padding:18px; }
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width:1100px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }

/* 统计磁贴 */
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); }
.stat .label { color:var(--ink-3); font-size:12.5px; }
.stat .value { font-size:26px; font-weight:700; margin-top:4px; color:var(--ink); }
.stat .sub { font-size:12px; color:var(--ink-2); margin-top:2px; }
.stat .value.brand{color:var(--brand);} .stat .value.ok{color:var(--ok);} .stat .value.danger{color:var(--danger);}

/* ---------- 表格 ---------- */
table.tbl { width:100%; border-collapse:collapse; font-size:13px; }
table.tbl th { text-align:left; padding:10px 12px; color:var(--ink-2); font-weight:600; border-bottom:2px solid var(--line); background:#f8fafc; white-space:nowrap; }
.table-wrap table.tbl thead th { position:sticky; top:0; background:#f8fafc; z-index:1; }
table.tbl td { padding:10px 12px; border-bottom:1px solid var(--line); }
table.tbl tr:hover td { background:#f8fafc; }
table.tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.table-wrap { overflow-x:auto; }

/* ---------- 徽章 / 状态 ---------- */
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:500; }
.badge.ok{background:var(--ok-bg);color:var(--ok);}
.badge.warn{background:var(--warn-bg);color:var(--warn);}
.badge.danger{background:var(--danger-bg);color:var(--danger);}
.badge.info{background:var(--info-bg);color:var(--info);}
.badge.gray{background:#f1f5f9;color:var(--ink-2);}

/* ---------- 按钮 ---------- */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-size:13.5px; cursor:pointer; font-family:inherit; transition:.12s; }
.btn:hover { background:#f8fafc; text-decoration:none; }
.btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.primary:hover { background:var(--brand-dark); }
.btn.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--brand); }
.btn.sm { padding:5px 10px; font-size:12.5px; }
.btn.lg { padding:12px 24px; font-size:15px; }
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- 表单 ---------- */
.field { margin-bottom:14px; }
.field label { display:block; font-size:13px; color:var(--ink-2); margin-bottom:5px; }
.field .req { color:var(--danger); }
input[type=text],input[type=password],input[type=number],input[type=date],input[type=datetime-local],input[type=tel],select,textarea {
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.help { font-size:12px; color:var(--ink-3); margin-top:4px; }
.row { display:flex; gap:12px; } .row > * { flex:1; }

/* ---------- 房态图 ---------- */
.room-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.room {
  border-radius:10px; padding:10px 8px; text-align:center; cursor:pointer; border:2px solid transparent;
  font-size:12px; user-select:none; transition:.1s; position:relative; min-height:74px; display:flex; flex-direction:column; justify-content:center; gap:2px;
}
.room:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.room .no { font-size:15px; font-weight:700; }
.room.free  { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.room.busy  { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.room.soon  { background:#fffbeb; border-color:#fde68a; color:#b45309; }
.room.dirty { background:#fff7ed; border-color:#fed7aa; color:#c2410c; }
.room.fix   { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-bottom:14px; }
.legend i { width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:middle; }

/* ---------- 杂项 ---------- */
.muted { color:var(--ink-3); }
.mt0{margin-top:0;} .mt8{margin-top:8px;} .mt16{margin-top:16px;} .mt24{margin-top:24px;}
.mb0{margin-bottom:0;} .mb8{margin-bottom:8px;} .mb16{margin-bottom:16px;}
.flex{display:flex;} .between{justify-content:space-between;} .center{align-items:center;} .gap8{gap:8px;} .gap16{gap:16px;} .wrap{flex-wrap:wrap;}
.tag-pending{color:var(--warn);}
.pill { padding:3px 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;background:#fff;cursor:pointer;}
.pill.on{background:var(--brand);color:#fff;border-color:var(--brand);}
.alert{padding:12px 16px;border-radius:8px;font-size:13.5px;margin-bottom:16px;}
.alert.info{background:var(--info-bg);color:#1e40af;}
.alert.warn{background:var(--warn-bg);color:#92400e;}
.alert.ok{background:var(--ok-bg);color:#166534;}
.alert.danger{background:var(--danger-bg);color:#991b1b;}

/* 登录页 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4f46e5,#312e81);}
.login-card{background:#fff;border-radius:16px;padding:36px 34px;width:380px;box-shadow:0 20px 50px rgba(0,0,0,.25);}
.login-card .logo{font-size:24px;font-weight:700;color:var(--brand);text-align:center;margin-bottom:4px;}
.login-card .tip{text-align:center;color:var(--ink-3);font-size:13px;margin-bottom:24px;}

/* 模态 */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal{background:#fff;border-radius:14px;width:100%;max-width:560px;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg);}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.modal-body{padding:20px;} .modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;}

/* 进度条/步骤 */
.steps{display:flex;gap:0;margin-bottom:20px;}
.step{flex:1;text-align:center;font-size:12.5px;color:var(--ink-3);padding-bottom:8px;border-bottom:3px solid var(--line);}
.step.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600;}
.step.done{color:var(--ok);border-bottom-color:var(--ok);}

/* 通用空状态 */
.empty-state{ text-align:center; padding:40px; color:var(--ink-3); }

/* ---------- 移动端汉堡按钮（默认隐藏，仅窄屏显示） ---------- */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:38px; height:38px; margin-right:12px; padding:0;
  border:1px solid var(--line); border-radius:8px; background:#fff;
  color:var(--ink); font-size:18px; line-height:1; cursor:pointer; font-family:inherit;
}
.nav-toggle:hover{ background:#f8fafc; }

/* 导航遮罩（默认不显示，仅窄屏抽屉打开时出现） */
.nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:55; display:none; }
.nav-overlay.show{ display:block; }

/* ===================================================================
   移动端响应式（max-width:860px）：单列布局 + 侧边抽屉
   桌面端（>860px）不受影响，外观保持不变
   =================================================================== */
@media (max-width:860px){
  /* 主框架改为纵向单列 */
  .app{ flex-direction:column; }

  /* 侧边栏改为固定抽屉，默认滑出屏幕外 */
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; width:236px; z-index:60;
    transform:translateX(-100%); transition:transform .25s ease;
  }
  .sidebar.open{ transform:none; }

  /* 汉堡按钮在窄屏显示 */
  .nav-toggle{ display:inline-flex; }

  /* 网格统一单列 */
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }

  /* 行布局改为纵向堆叠 */
  .row{ flex-direction:column; }

  /* 内容区内边距收紧 */
  .content{ padding:14px; }
  /* 顶栏窄屏自适应高度+允许换行，避免「改密码/退出」被挤出屏幕点不到 */
  .topbar{ padding:8px 12px; height:auto; min-height:56px; flex-wrap:wrap; row-gap:6px; }
  .topbar .right{ flex-wrap:wrap; gap:8px; width:100%; justify-content:flex-end; }
  .store-pick{ max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* 可点元素加大点击区域、字号略增，便于触控 */
  .btn,.pill,select,
  input[type=text],input[type=password],input[type=number],
  input[type=date],input[type=datetime-local],input[type=tel],
  .nav-item{
    min-height:42px; font-size:14px;
  }
  .btn{ display:inline-flex; align-items:center; }
  .btn.sm{ min-height:42px; font-size:13px; }
  .nav-item{ align-items:center; }
}

/* ============ v2 视觉打磨（全方位优化批次·只做安全增强，不动布局） ============ */
/* 操作反馈：按钮/链接的过渡与按压感 */
.btn{ transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease; }
.btn:hover{ box-shadow: 0 2px 8px rgba(15,23,42,.10); }
.btn:active{ transform: translateY(1px); }
.btn.primary:hover{ filter: brightness(1.06); }
/* 卡片：轻投影 + 悬停微浮 */
.card{ transition: box-shadow .18s ease; }
.card:hover{ box-shadow: 0 4px 16px rgba(15,23,42,.06); }
.stat{ transition: box-shadow .18s ease; }
.stat:hover{ box-shadow: 0 3px 12px rgba(15,23,42,.06); }
/* 表格：行悬停高亮、表头吸附更清晰 */
.tbl tbody tr{ transition: background-color .12s ease; }
.tbl tbody tr:hover{ background:#f8fafc; }
/* 输入聚焦：清晰的品牌色描边（无障碍） */
input:focus, select:focus, textarea:focus{ outline:none; border-color:#93c5fd !important; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
/* 侧边导航：当前项更醒目 */
.nav-item.on, .nav-item.active{ box-shadow: inset 3px 0 0 var(--brand, #2563eb); }
.nav-item{ transition: background-color .12s ease; }
/* 徽章统一圆角节奏 */
.badge{ border-radius: 999px; }
/* 弹窗：淡入 */
.modal-mask{ animation: fadeIn .15s ease; }
.modal{ animation: popIn .18s ease; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popIn{ from{ opacity:0; transform: translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
/* 提示条：左侧色条强调 */
.alert{ border-left: 4px solid transparent; }
.alert.info{ border-left-color:#3b82f6; }
.alert.ok{ border-left-color:#16a34a; }
.alert.warn{ border-left-color:#d97706; }
.alert.danger{ border-left-color:#dc2626; }
/* 打印友好：打印报表时去掉导航/顶栏/按钮 */
@media print{
  .sidebar, .topbar, .btn, .nav-toggle, form[method="get"], .modal-mask{ display:none !important; }
  .content{ padding:0 !important; }
  .card{ box-shadow:none !important; border:1px solid #ddd; page-break-inside: avoid; }
}

/* ===== 可视化选舱（开单页点格子）===== */
.cabgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:8px; }
.cab{ border:1.5px solid var(--line); border-radius:10px; padding:8px 4px; text-align:center; cursor:pointer;
      background:#f0fdf4; user-select:none; transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease; }
.cab:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(15,23,42,.10); border-color:#86efac; }
.cab .cab-no{ font-weight:700; font-size:15px; }
.cab .cab-type{ font-size:11px; color:var(--ink-2,#64748b); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cab .cab-tag{ font-size:11px; font-weight:700; min-height:14px; }
.cab.cab-main{ background:#2563eb; border-color:#1d4ed8; color:#fff; }
.cab.cab-main .cab-type{ color:#dbeafe; }
.cab.cab-main .cab-tag{ color:#fff; }
.cab.cab-link{ background:#ecfdf5; border-color:#10b981; box-shadow:inset 0 0 0 1.5px #10b981; }
.cab.cab-link .cab-tag{ color:#047857; }