/* ══════════════════════════════════════
   餐台管理（订位 / 等候 / 桌台占用）
   ══════════════════════════════════════ */

#screen-reservations {
  padding: 16px 20px;
  max-width: 1280px;
  margin: 0 auto;
}

/* 屏幕高度约束：topbar 已隐藏，用动态视口高度撑满并禁止页面级纵向滚动。
   100dvh 兼容 iOS/Android 浏览器工具栏收展；100vh 作为旧浏览器回退。 */
html:has(body.res-screen) {
  overflow: hidden;
}

body.res-screen {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.res-screen #screen-reservations {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
}

body.res-screen .res-grid {
  flex: 1;
  min-height: 0;
}

body.res-screen .res-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 左列：panel 填满剩余高度，内部 task-list 可滚动。section-header 的
   margin-bottom 已随 header 自身占位，剩余空间由 flex:1 精确分配。 */
body.res-screen .res-col .panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.res-screen .res-col .panel .task-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 右列：桌台列表 / 平面图直接挂在 res-col 下，同样占满剩余高度并滚动。 */
body.res-screen #res-table-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.res-screen #res-floor-plan {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 餐台管理屏（body.res-screen）始终隐藏全局 topbar（桌面/平板/手机一致）。 */
body.res-screen .topbar {
  display: none;
}

/* 新增等候弹窗：隐藏标题栏（含关闭按钮），桌面/平板/手机一致。 */
body.res-screen #res-add-modal .modal-head {
  display: none;
}

.res-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.res-toolbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.res-toolbar-date {
  justify-content: center;
}

.res-toolbar input[type="date"] {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--card, #fff);
  color: var(--text, #1a1a1a);
  font-size: 15px;
}

.res-stats {
  flex: 1;
  font-size: 13px;
  color: var(--muted, #888);
  text-align: center;
  white-space: nowrap;
}

/* 统计行：整体居中，超出时允许省略 */
.res-stats-lines {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-align: center;
  line-height: 1.4;
}

.res-grid {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 20px;
}

.res-col .section-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.res-view-toggle {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.res-view-toggle button {
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  background: var(--card, #fff);
  color: var(--muted, #666);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.res-view-toggle button.active {
  color: var(--accent, #e8823a);
  border-color: var(--accent, #e8823a);
  font-weight: 600;
}

/* 等候 / 预订列表项 */
.res-wait-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  min-height: 52px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.res-wait-item:last-child {
  margin-bottom: 0;
}

/* 拖拽手柄：6 个点（加大的可抓取区域，适配手机/平板触屏） */
.res-drag-handle {
  width: 30px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  color: var(--muted, #888);
}
.res-drag-handle::before {
  content: "";
  width: 14px;
  height: 21px;
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.6px);
  background-size: 7px 7px;
  background-repeat: repeat;
}
.res-drag-handle.disabled {
  opacity: 0.3;
  cursor: default;
  touch-action: auto;
}

/* 拖拽中的源行 */
.res-wait-item.dragging {
  opacity: 0.45;
}

/* 拖拽跟随的幽灵标签 */
.res-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -120%);
  background: var(--accent, #e8823a);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

/* 拖拽时高亮可放置的空闲桌 */
body.res-dragging .res-table-card.free {
  border-color: var(--accent, #e8823a);
  box-shadow: 0 0 0 3px rgba(232, 130, 58, 0.28);
}
body.res-dragging .res-table-chip.free {
  border-color: var(--accent, #e8823a);
  box-shadow: 0 0 0 3px rgba(232, 130, 58, 0.28);
}

.res-wait-item.armed {
  border: 1px solid var(--accent, #e8823a);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 0 0 2px rgba(232, 130, 58, 0.35);
}

.res-wait-main {
  flex: 1;
  min-width: 0;
}

.res-wait-name {
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.res-wait-name-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.res-wait-time {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #e8823a);
  white-space: nowrap;
}

.res-wait-meta {
  font-size: 12px;
  color: var(--muted, #888);
  margin-top: 2px;
}

.res-wait-actions {
  display: flex;
  gap: 6px;
}

.res-subhead {
  margin-top: 12px;
}

.res-time-group {
  margin-bottom: 2px;
}

.res-time-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, #e8823a);
  background: rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid var(--border);
}

.res-time-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted, #888);
}

/* 桌台卡片 */
#res-table-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.res-table-card {
  min-height: 72px;
  border-radius: var(--radius-sm, 8px);
  background: var(--card, #fff);
  border: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.res-table-card.free {
  border-color: var(--green, #2ecc71);
}

.res-table-card.occupied {
  border-color: var(--accent, #e8823a);
  cursor: default;
}

.res-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.res-table-code {
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--accent, #e8823a);
}

.res-table-meta {
  font-size: 12px;
  color: var(--muted, #888);
}

.res-table-actions {
  margin-top: 2px;
}

.res-btn-sm {
  min-height: 32px;
  font-size: 12px;
  padding: 4px 10px;
}

/* 翻台 / 结束用餐按钮：内边距减半，整体高度减 6px */
.res-table-actions .res-btn-sm {
  padding: 2px 5px;
  min-height: 26px;
}

/* 过去日期：只读，取消点按指针 */
#res-wait-list.readonly .res-wait-item,
#res-table-list.readonly .res-table-card {
  cursor: default;
}

/* 徽标 */
.res-badge {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
}

.res-badge-booked { background: #eaf3ff; color: #2f6fd6; }
.res-badge-waiting { background: #fff4e6; color: #e8823a; }
.res-badge-seated { background: #e6f7ed; color: #1f9d55; }
.res-badge-free { background: #e6f7ed; color: #1f9d55; }
.res-badge-done { background: #f0f0f0; color: #888; }
.res-badge-cancel { background: #f0f0f0; color: #999; }

/* 平面图（只读点选） */
.res-floor-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  background: var(--card, #fff);
}

/* 显式保证 hidden 属性生效（否则 display:flex 会覆盖 UA 的 [hidden]{display:none}） */
.res-floor-plan[hidden] {
  display: none;
}

.res-floor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--card, #fff);
  flex: none;
}

.res-floor-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary, #666);
}

.res-floor-legend .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 8px;
}

.res-floor-legend .dot.free { background: var(--green, #2ecc71); }
.res-floor-legend .dot.occupied { background: var(--accent, #e8823a); }

.res-floor-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.res-floor-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background: var(--card, #fff);
}

.res-floor-viewport:active {
  cursor: grabbing;
}

.res-floor-surface {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    var(--card, #fff);
  background-size: 24px 24px;
}

.res-floor-zone {
  position: absolute;
  border: 1px dashed var(--border-strong, #bbb);
  border-radius: 12px;
  pointer-events: none;
}

.res-floor-zone-label {
  position: absolute;
  left: 6px;
  top: 4px;
  font-size: 11px;
  color: var(--text-secondary, #888);
  background: var(--card, #fff);
  padding: 0 4px;
  border-radius: 4px;
  transform: scale(calc(1 / var(--floor-zoom, 1)));
  transform-origin: 0 0;
}

.res-table-chip {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card, #fff);
  font-size: 14px;
  text-align: center;
  padding: 4px;
  overflow: visible;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.res-table-chip.round { border-radius: 50%; }
.res-table-chip.bar { border-radius: 999px; }

.res-table-chip.free {
  border-color: var(--green, #2ecc71);
}

.res-table-chip.occupied {
  border-color: var(--accent, #e8823a);
  background: #fff4e6;
  cursor: default;
}

.res-chip-label {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: visible;
  transform: scale(calc(1 / var(--floor-zoom, 1)));
  transform-origin: center;
}

/* 触控目标 */
.res-toolbar .btn,
.res-table-card,
.res-wait-item,
.res-btn-sm {
  min-height: 44px;
}

/* 手机端（<768px）：单列，无平面图切换 */
@media (max-width: 767px) {
  .res-grid {
    grid-template-columns: 1fr;
  }
  .res-view-toggle {
    display: none !important;
  }
  #res-table-list {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  body.res-screen #screen-reservations {
    padding-top: 12px;
  }
}

/* ══════════════════════════════════════
   平板端（768px–1024px）：隐藏日期选择行
   ══════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
  .res-toolbar-date {
    display: none;
  }
}

/* ══════════════════════════════════════
   手机端（<768px）：暖白「点餐纸」浅色主题
   仅作用于餐台管理屏（body.res-screen），
   桌面 / 平板保持深色控制台风格不变。
   ══════════════════════════════════════ */
@media (max-width: 767px) {
  /* ── 浅色主题变量（级联到本屏及其弹窗） ── */
  body.res-screen {
    --bg: #F6F3EC;
    --surface: #FFFFFF;
    --card: #FFFFFF;
    --border: #E8E1D4;
    --text: #201B15;
    --muted: #8B8275;
    --accent: #E0702A;
    --accent2: #C05A1E;
    --green: #2F9E63;
    --yellow: #ED8A1D;
    --blue: #3A78D6;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-card: 0 1px 3px rgba(32, 27, 21, 0.06), 0 4px 14px rgba(32, 27, 21, 0.05);
    background: #F6F3EC;
    color: #201B15;
  }

  /* ── 容器留白收紧 ── */
  body.res-screen #screen-reservations {
    padding: 6px 14px 24px;
  }

  /* ── 按钮：紧凑尺寸，不再全宽 ── */
  body.res-screen .btn {
    width: auto;
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 12px;
  }
  body.res-screen .btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
  }
  body.res-screen .btn-ghost:active {
    color: var(--text);
    background: rgba(0, 0, 0, 0.04);
  }
  body.res-screen .res-btn-sm {
    min-height: 32px;
    font-size: 12px;
    padding: 0 12px;
    border-radius: 10px;
  }

  /* ── 工具栏 / 日期 ── */
  body.res-screen .res-toolbar {
    gap: 8px;
    margin-bottom: 10px;
  }
  body.res-screen .res-toolbar-primary {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  body.res-screen .res-toolbar-primary .res-stats {
    flex: 1;
    margin-left: 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.4;
  }
  body.res-screen .res-toolbar input[type="date"] {
    flex: 1;
    min-height: 40px;
    font-size: 14px;
    text-align: center;
    background: var(--card);
    color: var(--text);
  }

  /* ── 区块头 / 徽标 ── */
  body.res-screen .section-header h2 { font-size: 15px; }
  body.res-screen .badge {
    background: #FBE9DC;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 11px;
    padding: 2px 8px;
  }
  body.res-screen .badge.green { background: #E6F5EC; color: var(--green); }

  /* ── 面板卡片白底 ── */
  body.res-screen .panel {
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(32, 27, 21, 0.06), 0 4px 14px rgba(32, 27, 21, 0.05);
  }

  /* ── 等候列表 ── */
  body.res-screen .res-time-header {
    background: #FAF7F0;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    padding: 8px 12px;
  }
  body.res-screen .res-time-count { font-size: 11px; color: var(--muted); }
  body.res-screen .res-wait-item {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    min-height: 44px;
  }
  body.res-screen .res-wait-item:last-child { border-bottom: none; }
  body.res-screen .res-wait-name { font-size: 15px; }
  body.res-screen .res-wait-meta { font-size: 12px; }
  body.res-screen #res-wait-list {
    max-height: 250px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 已结束 / 取消 区块：紧凑浅色，不再用深色大标题 */
  body.res-screen .res-subhead {
    margin-top: 8px;
    padding: 8px 12px;
    background: #FAF7F0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
  }
  body.res-screen .res-subhead .icon { font-size: 14px; }
  /* 已结束 / 取消 行：更矮、弱化 */
  body.res-screen .res-wait-item:has(.res-badge-done),
  body.res-screen .res-wait-item:has(.res-badge-cancel) {
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 0;
    opacity: 0.7;
  }

  /* ── 状态徽标（轻底） ── */
  body.res-screen .res-badge-booked { background: #EAF1FC; color: #3A78D6; }
  body.res-screen .res-badge-waiting { background: #FDF0DE; color: #ED8A1D; }
  body.res-screen .res-badge-seated { background: #E6F5EC; color: #2F9E63; }
  body.res-screen .res-badge-free { background: #E6F5EC; color: #2F9E63; }
  body.res-screen .res-badge-done { background: #F0EFEA; color: #8B8275; }
  body.res-screen .res-badge-cancel { background: #F0EFEA; color: #A49A8B; }

  /* ── 桌台卡片 ── */
  body.res-screen #res-table-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  body.res-screen .res-table-card {
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(32, 27, 21, 0.06);
    border-radius: var(--radius);
    padding: 10px 12px;
    min-height: 0;
  }
  body.res-screen .res-table-card.free { border-color: #CBE8D6; }
  body.res-screen .res-table-card.occupied { border-color: #F3D6BF; background: #FFFBF6; }
  body.res-screen .res-table-code { font-size: 15px; }
  body.res-screen .res-table-meta { font-size: 12px; }

  /* ── 弹窗：底部抽屉 + 浅色 ── */
  body.res-screen .modal-backdrop {
    align-items: flex-end;
    padding: 0;
    background: rgba(32, 27, 21, 0.35);
    backdrop-filter: none;
    transition: background 0.26s ease;
  }
  body.res-screen .modal-backdrop.closing {
    background: rgba(32, 27, 21, 0);
  }
  body.res-screen .modal-backdrop.closing .modal {
    animation: resSheetDown 0.26s ease-in forwards;
  }
  body.res-screen .modal {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    background: var(--card);
    border: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(32, 27, 21, 0.18);
    animation: resSheetUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.res-screen .modal-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  body.res-screen .modal-body { padding: 16px; gap: 12px; }
  body.res-screen .modal-actions {
    padding: 0 16px calc(16px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  body.res-screen .modal-actions .btn { flex: 1; }

  body.res-screen .field label { font-size: 12px; color: var(--muted); }
  body.res-screen .field input,
  body.res-screen .field select {
    background: #FBF9F4;
    border: 1px solid #D8CFBE;
    color: var(--text);
    font-size: 15px;
    min-height: 44px;
    border-radius: 12px;
  }
  body.res-screen .field input:focus,
  body.res-screen .field select:focus {
    background: #FFFFFF;
    border-color: var(--accent);
    box-shadow: none;
  }

  /* 新增等候弹窗：隐藏标题栏及关闭按钮，并加抽屉把手 */
  #res-add-modal .modal-head {
    display: none;
  }
  body.res-screen #res-add-modal .modal::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #D8CFBE;
    margin: 8px auto 4px;
  }
}

/* 移动端底部抽屉：自下而上滑入 */
@keyframes resSheetUp {
  from { opacity: 0.6; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 移动端底部抽屉：向下滑出消失 */
@keyframes resSheetDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0.5; transform: translateY(100%); }
}