/*
 * ═══════════════════════════════════════════════════════
 *  五粮液AI管家 — 可复用组件样式
 *  纯 CSS class，data 属性驱动状态，不依赖框架
 *  所有颜色引用 design-tokens.css 变量
 * ═══════════════════════════════════════════════════════
 */

/* ── Scroll Region ─────────────────────���────────────── */
/* iOS Safari: body overflow:hidden blocks nested touch scroll.
   Any element that needs overflow-y: auto MUST use this class
   to guarantee touch scrolling works inside fixed/overlay contexts. */
.scroll-region {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
/* Flex children need min-height:0 for Safari to allow shrink+scroll */
.scroll-region-flex {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  min-height: 0;
}

/* Popover fallback: iOS 16 does not support popover/popovertarget. */
.popover-fallback #slash-panel:not(.open),
.popover-fallback #plus-panel:not(.open),
.popover-fallback #drawer-popup-menu:not(.open) {
  display: none !important;
}

[popover][data-popover-fallback="true"].open,
.popover-fallback #slash-panel.open,
.popover-fallback #plus-panel.open,
.popover-fallback #drawer-popup-menu.open {
  display: block !important;
}

/* ── Status Badge ────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.status-badge[data-status="draft"]     { background: var(--status-draft-bg);     color: var(--status-draft); }
.status-badge[data-status="planned"]   { background: var(--status-planned-bg);   color: var(--status-planned); }
.status-badge[data-status="confirmed"] { background: var(--status-confirmed-bg); color: var(--status-confirmed); }
.status-badge[data-status="in_progress"],
.status-badge[data-status="active"]    { background: var(--status-active-bg);    color: var(--status-active); }
.status-badge[data-status="completed"] { background: var(--status-completed-bg); color: var(--status-completed); }
.status-badge[data-status="cancelled"] { background: var(--status-cancelled-bg); color: var(--status-cancelled); }

/* ── Phase Bar ───────────────────────────────────────── */
.phase-bar {
  display: flex;
  gap: 2px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
}
.phase-bar-step {
  flex: 1;
  background: var(--ink-6);
  transition: background var(--duration-normal) var(--easing-standard);
}
.phase-bar-step[data-state="done"]    { background: var(--status-confirmed); }
.phase-bar-step[data-state="current"] { background: var(--status-planned); }
.phase-bar-step[data-state="pending"] { background: var(--ink-6); }

.phase-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10px;
  color: var(--ink-4);
}
.phase-bar-labels [data-state="done"]    { color: var(--status-confirmed); }
.phase-bar-labels [data-state="current"] { color: var(--status-planned); font-weight: 600; }

/* ── Floor Cell (包间格子) ───────────────────────────── */
.floor-cell {
  background: var(--color-surface-secondary);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  transition: border-color var(--duration-fast) var(--easing-standard);
}
.floor-cell[data-status="draft"]       { border-color: var(--status-draft); }
.floor-cell[data-status="planned"]     { border-color: var(--status-planned); }
.floor-cell[data-status="confirmed"]   { border-color: var(--status-confirmed); }
.floor-cell[data-status="in_progress"] { border-color: var(--status-active); }
.floor-cell[data-status="completed"]   { border-color: var(--status-completed); }
.floor-cell[data-status="empty"]       { border-color: var(--color-border); }

.floor-cell-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}
.floor-cell-info {
  font-size: var(--font-size-xs);
  color: var(--ink-3);
  margin-top: 2px;
}
.floor-cell-guest {
  font-size: var(--font-size-xs);
  font-weight: 600;
  margin-top: var(--space-1);
}

/* ── Menu Section (菜谱段落) ─────────────────────────── */
.menu-section {
  margin-bottom: var(--space-4);
}
.menu-section-title {
  color: var(--color-gold);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: var(--space-1);
}
.menu-section-items {
  font-family: var(--font-kai);
  font-size: var(--font-size-base);
  line-height: 2;
  color: var(--color-text-primary);
}

/* ── Menu Item (逐道菜，可勾选) ──────────────────────── */
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.menu-item:last-child { border-bottom: none; }

.menu-item-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--ink-5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--duration-fast);
}
.menu-item-check[data-checked="true"] {
  background: var(--status-confirmed);
  border-color: var(--status-confirmed);
  color: #fff;
}
.menu-item-check[data-checked="true"]::after {
  content: '✓';
  font-size: 12px;
  line-height: 1;
}

.menu-item-name {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.menu-item-note {
  font-size: var(--font-size-xs);
  color: var(--status-cancelled);
  font-family: var(--font-kai);
}

/* ── Approval Stamp (印章) ───────────────────────────── */
@keyframes stampDown {
  0%   { transform: rotate(-12deg) scale(2.5); opacity: 0; }
  50%  { transform: rotate(-12deg) scale(0.9); opacity: 1; }
  70%  { transform: rotate(-12deg) scale(1.05); }
  100% { transform: rotate(-12deg) scale(1); opacity: 0.85; }
}

.approval-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 3px solid var(--color-seal);
  border-radius: 50%;
  color: var(--color-seal);
  font-size: 16px;
  font-weight: 900;
  transform: rotate(-12deg);
  opacity: 0.85;
  font-family: var(--font-family-serif);
}
.approval-stamp.animate {
  animation: stampDown 0.6s var(--easing-spring) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .approval-stamp.animate {
    animation: none;
  }
}
.approval-stamp[data-action="rejected"] {
  border-style: dashed;
  color: var(--ink-4);
  border-color: var(--ink-4);
}
.approval-stamp-meta {
  font-size: var(--font-size-xs);
  color: var(--ink-4);
  margin-top: var(--space-2);
  text-align: center;
}

/* ── Banquet Card (宴会卡片) ─────────────────────────── */
.banquet-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: box-shadow var(--duration-fast);
}
.banquet-card:hover {
  box-shadow: var(--shadow-sm);
}
.banquet-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}
.banquet-card-guest {
  font-size: var(--font-size-md);
  font-weight: 700;
  font-family: var(--font-family-serif);
  color: var(--color-text-primary);
}
.banquet-card-info {
  font-size: var(--font-size-xs);
  color: var(--ink-3);
  margin-top: var(--space-1);
}
.banquet-card-tags {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.banquet-card-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-secondary);
  color: var(--ink-3);
}
.banquet-card-tag[data-type="price"] { color: var(--color-gold); }

/* ── Info Row (键值对) ───────────────────────────────── */
.info-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-sm);
}
.info-row:last-child { border-bottom: none; }
.info-row-label { color: var(--ink-4); }
.info-row-value { color: var(--color-text-primary); font-weight: 500; }

/* ── Signal Dot (信号灯) ─────────────────────────────── */
.signal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.signal-dot[data-status="draft"]       { background: var(--status-draft);     box-shadow: 0 0 6px var(--status-draft); }
.signal-dot[data-status="planned"]     { background: var(--status-planned);   box-shadow: 0 0 6px var(--status-planned); }
.signal-dot[data-status="confirmed"]   { background: var(--status-confirmed); box-shadow: 0 0 6px var(--status-confirmed); }
.signal-dot[data-status="in_progress"] { background: var(--status-active);    box-shadow: 0 0 6px var(--status-active); }
.signal-dot[data-status="completed"]   { background: var(--status-completed); box-shadow: 0 0 6px var(--status-completed); }
.signal-dot[data-status="cancelled"]   { background: var(--status-cancelled); box-shadow: 0 0 6px var(--status-cancelled); }

/* ── Page Header (页面头部) ──────────────────────────── */
.page-header {
  text-align: center;
  padding: var(--space-6) var(--space-4) var(--space-4);
}
.page-header-brand {
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--color-gold-muted);
  text-transform: uppercase;
}
.page-header-title {
  font-size: var(--font-size-xl);
  font-weight: 300;
  letter-spacing: 3px;
  color: var(--color-text-primary);
  margin-top: var(--space-1);
}
.page-header-divider {
  width: 40px;
  height: 1px;
  background: var(--color-gold-muted);
  margin: var(--space-3) auto;
}

/* ── Action Buttons (审批按钮) ────────────────────────── */
.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  min-height: var(--touch-min);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all var(--duration-fast);
  -webkit-tap-highlight-color: transparent;
}
.action-btn:active { opacity: 0.7; }

.action-btn-approve {
  border-color: var(--status-confirmed);
  color: var(--status-confirmed);
  background: var(--status-confirmed-bg);
}
.action-btn-reject {
  border-color: var(--color-border);
  color: var(--ink-3);
  background: var(--color-surface);
}
.action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Chart Card ──────────────────────────────────────── */
.chart-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin: var(--space-3) 0;
}
.chart-card-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}
.chart-card-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.chart-card-body {
  padding: var(--space-4);
  position: relative;
  height: 260px;
}
.chart-card-body canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ── Artifact Card ────────────��──────────────────────── */
.artifact-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin: var(--space-3) 0;
}
.artifact-card-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.artifact-card-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.artifact-card-body {
  position: relative;
}
.artifact-card-body iframe {
  display: block;
  width: 100%;
  min-height: 200px;
  border: none;
}